JavaScript学習ノート - DOM（上） #JavaScript

DOM

DOM: ドキュメントオブジェクトモデル
これは、htmlのタグを操作する機能です。
操作できるもの
- 要素の取得
- 要素の削除
- 要素の作成
- ページへの要素の追加
- 要素へのイベントのバインド
- 要素の属性の取得
- 要素にCSSスタイルを追加
- ...
DOMの核となるオブジェクトはdocuemntオブジェクトです。
ドキュメント・オブジェクトは、要素を操作するためのメソッドを格納するブラウザ内蔵のオブジェクトです。
DOM：ページ内のラベルをjsで取得した後、このオブジェクトをDOMオブジェクトと呼びます。

要素の取得

jsコードによるタグの取得
タグを取得したら、タグを操作することができます。

getElementById

getElementByIdはid名でタグを取得します。
id はページ内で一意であるため、この要素は

<body>
 <div id="box"></div>
 <script>
 var box = document.getElementById('box')
 console.log(box) // <div></div>
 </script>
</body>

ページ内の div タグを id box で取得します。

getElementsByClassName

getElementsByClassName はタグのクラス名を取得するために使用されます。
同じクラス名を持つ要素がページ上に複数存在する可能性があるため、要素のグループを取得します。
クラスが1つしかない場合でも、要素の集合は得られますが、その集合の中に含まれるDOM要素は1つだけです。

<body>
 <div calss="box"></div>
 <script>
 var box = document.getElementsByClassName('box')
 console.log(box) // [<div></div>]
 console.log(box[0]) // <div></div>
 </script>
</body>

得られるのは要素の集合で、配列のように見えるデータ構造ですが、配列ではなく疑似配列です。
このデータセットもインデックスでソートされているので、正確なdivを取得するには、インデックスを使って

getElementsByTagName

getElementsByTagName はタグのタグ名を取得するために使用されます。
同じタグ名を持つ要素がページ上に複数存在する可能性があるため、要素のセットを取得します。
これらのタグ名が本当に1つしかない場合でも、要素の集合をフェッチしていることに変わりはありませんが、その集合にはDOM要素が1つしかありません。

<body>
 <div></div>
 <script>
 var box = document.getElementsByTagName('div')
 console.log(box) // [<div></div>]
 console.log(box[0]) // <div></div>
 </script>
</body>

getElementsByClassName と同様に、配列のような要素の配列を取得します。
正確な DOM 要素を取得するには、インデックスを使用する必要があります。

querySelector

querySelector はセレクタとして要素を取得します。
つまり、cssを記述するときに使用したセレクタを取得します。
このメソッドがフェッチできる要素は1つだけで、それは条件を満たすページ上の最初の要素です。


console.log(document.querySelector('div')) // ページの最初のdiv要素を取得する
console.log(docuemnt.querySelector('.box')) // クラス名ボックスを持つページ上の最初の要素を取得する。
console.log(document.querySelector('#box')) // id boxでページ上の最初の要素を取得する。

querySelectorAll

querySelectorAllは、セレクタに従って要素を取得します。
このメソッドは、条件を満たすすべての要素を取得し、擬似配列として返します。


console.log(document.querySelectorAll('div')) // ページ上のすべてのdiv要素を取得する
console.log(docuemnt.querySelectorAll('.box')) // クラス名のボックスを持つページ上のすべての要素を取得する。

取得されるのはデータのセットで、各DOM要素を正確に取得するためにインデックスを作成する必要があります。

属性の操作

様々な方法でページ内のタグを取得した後、要素を取得します。
DOM要素の属性を直接操作して、ページに直接効果を表示することができます。

innerHTML

要素の内容の設定

<body>
 <div>
 <p>
 <span>hello</span>
 </p>
 </div>
 
 <script>
 var div = document.querySelector('div')
 console.log(div.innerHTML)
 /*
 
 <p>
 <span>hello</span>
 </p>
 
 */
 </script>
</body>

要素の内容の設定

<body>
 <div></div>
 
 <script>
 var div = document.querySelector('div')
 div.innerHTML = '<p>hello</p>'
 </script>
</body>

これが完了すると、ページ上のdiv要素の中にp要素がネストされます。

innerText

要素内のテキストを取得

<body>
 <div>
 <p>
 <span>hello</span>
 </p>
 </div>
 
 <script>
 var div = document.querySelector('div')
 console.log(div.innerText) // hello
 </script>
</body>

要素の中にテキストを設定することができます。

<body>
 <div></div>
 
 <script>
 var div = document.querySelector('div')
 div.innerText = '<p>hello</p>'
 </script>
</body>

<p>hello</p> 設定されると、pがラベルとして解析される代わりに、div要素内のテキストとして表示されます。

getAttribute

要素の属性の取得

<body>
 <div a="100" class="box"></div>
 
 <script>
 var div = document.querySelector('div')
 console.log(div.getAttribute('a')) // 100
 console.log(div.getAttribute('class')) // box
 </script>
</body>

setAttribute

要素への属性の設定

<body>
 <div></div>
 
 <script>
 var div = document.querySelector('div')
 div.setAttribute('a', 100)
 div.setAttribute('class', 'box')
 console.log(div) // <div a="100" class="box"></div>
 </script>
</body>

removeAttribute

要素から直接属性を削除します。

<body>
 <div a="100" class="box"></div>
 
 <script>
 var div = document.querySelector('div')
 div.removeAttribute('class')
 console.log(div) // <div a="100"></div>
 </script>
</body>

style

は要素に css スタイルを追加するために使用されます。
追加はすべてインラインスタイル

<body>
 <div></div>
 
 <script>
 var div = document.querySelector('div')
 div.style.width = "100px"
 div.style.height = "100px"
 div.style.backgroundColor = "pink"
 console.log(div) 
 // <div style="width: 100px; height: 100px; background-color: pink;"></div>
 </script>
</body>

ページ内のdivは、幅と高さが100、背景色がピンクのdivになります。

className

要素を操作するために特別に設計されたクラス名です。

<body>
 <div class="box"></div>
 
 <script>
 var div = document.querySelector('div')
 console.log(div.className) // box
 </script>
</body>

要素のクラス名を設定することも可能ですが、これは完全なオーバーライド操作です。

<body>
 <div class="box"></div>
 
 <script>
 var div = document.querySelector('div')
 div.className = 'test'
 console.log(div) // <div class="test"></div>
 </script>
</body>

設定されると、クラス名の有無にかかわらず、設定された値ですべて上書きされます。

JavaScript学習ノート - DOM（上）

DOM

要素の取得

getElementById

getElementsByClassName

getElementsByTagName

querySelector

querySelectorAll

属性の操作

innerHTML

innerText

getAttribute

setAttribute

removeAttribute

style

className

Read next

pytorchのソースコードを読んで準備する

HTMLの知識を強化する

時間管理は私を統合失調症にするのだろうか？

es6 ラーニング - 数値の展開

unsafe]goで文字列のバイト配列を変更するには？

JavaScriptのアルゴリズム - 再帰