JavaScript-DOM の概要

DOMの概要

1. DOMの意味

DOMとはDocument Object Modelの略です。 W3C DOM 仕様によれば、DOM はブラウザー、プラットフォーム、言語に依存しないインターフェイスであり、ページの他の標準コンポーネントへのアクセスを可能にします。

DOM のノード:

* ドキュメント全体がドキュメント ノードです。

* そして、各 HMTL タグは要素ノード (divElement) です。

* ラベル内のテキストはテキストノード(div)です。

※ラベルの属性は属性ノード(divAttribute)です。

* すべてがノードです

​​

2. IDでタグを取得

2. 型名で取得します。複数のタグ

var allA = document.getElementsByClassName('a');

3. tag の name (a または form) 属性を通じて複数のタグを取得します

document.getElementsByName('corresponding name') ;

4. タグ名を通じて複数のタグを取得します

var allDiv = document.getElementsByTagName('DIV')

5. セレクターを通じて特定のタグを取得します (複数のタグがある場合は、それが見つかります)最初の 1 つ目)

var aDiv = document.querySelector('div');

6、セレクターを通じて複数のタグを取得します

document.querySelectorAll('selector name');

3.DOM ノード要素

1. li

などのラベル

alert (ラベル名.outerHTML) を含むすべてのテキストを取得します。 2. dir

console.dir (ラベル名) を通じて、ノードに関するすべての属性情報を確認できます。 li

3.for では、ノードに関するすべてのプロパティとメソッドが表示されます

4. ノードの前または次の要素ノードを取得します

alert(li1.previousElementSibling.innerText );

alert (li1.nextElementSibling.innerText);

5.. ノードの前または次の要素ノードを取得します (空のテキスト ノードの場合もあります)

alert(li1.previousSibling.nodeName) ;

alert(li1.nextSibling .nodeName);

6. ul の最初の子ノードを取得します

alert(ul.firstChild);

ul の最初の子要素を取得します。 ！ ！ ！ノード

alert(ul.firstElementChild);

alert(ul.lastElementChild.innerText);

7. 新しい li ノードを作成します

var newLi = document.createElement('li');

newLi.innerText = 'JQuery';

newLi.style.color = 'red';

8.ul

ul.appendChild(newLi)の最後に子ノードを追加します;

9.新しいノードを使用します前の子ノードを置き換えます

ul.replaceChild(newLi,li1);

10. 子ノードを削除します(削除するノードはulの子ノードである必要があります)

ul.removeChild(newLi.previousElementSibling) ;

11. 特定の子ノードに新しいノードを挿入します

ul.insertBefore(newLi,li1);

12. ul +Node オブジェクト

'beforeBegin' に新しいノード オブジェクトの位置を挿入します。 'afterBegin', 'beforeEnd', 'afterEnd'

ul.insertAdjacentElement('afterEnd',newLi);

13. HTML コードを挿入します

ul.insertAdjacentHTML('beforeBegin ','

ppppp

');

14. テキストを挿入

ul.insertAdjacentText('afterBegin','afterbegin')

4.DOM ノードテキスト

1.for traversal

for (var i = 0; i

変数または関数に名前を付けるにはキャメルケースの命名方法を使用します goShoppingToMall

var aNode = ulChild[i];

現在通過している記憶されたポイントがシステムの特定のノード タイプであるかどうかを判断します 要素 ELEMENT 属性 ATTRIBUTEテキスト TEXT

if (aNode.nodeType == Node.ELEMENT_NODE) {

マクロ定義 数字を使用してノード タイプ 1、要素 2、属性ノード 3、テキスト ノードを表します

alert (aNode.nodeType);

alert(aNode.nodeName);

}

}

2.children 内部の子を取得します。 ！ ！要素！ ！ ！ノード

childNode は内部の子ノード (テキスト ノードを含む) を取得します

var cssText = ul.children[1].childNodes[0];

テキスト ノード内のテキストを取得します

alert(cssText.nodeValue);

alert(cssText.textContent);

3. データを追加します

cssText.appendData('CSS');

a: どの文字から始まり、0 から始まります

b: データを削除する期間

cssText.deleteData(3,1);

4. 特定の範囲の文字を別の範囲の文字に置き換えます

cssText.replaceData(1,2,'CCCCC');

5.

cssText.insertData(2,'A');

5. テキストノード内のテキストを削除します

cssText.remove();

5 .DOM ノード属性

1. すべての属性

alert(a.attributes.length);

2. 要素ノードで get メソッドを直接呼び出して

alert(a.getAttribute('title'));

3 を使用して属性の値を変更することもできます

a .setAttribute( 'title', 'Click me');

4.

alert(a.title);

a.title = 'No more と入力して、特定の属性の値をすばやく取得することもできます。 ';

5. ショートカットキーを設定します

alt+shift+A ブラウザでテスト

a.accessKey = 'A';

6. ラベルを編集できるかどうかを設定します

. contentEditable = 'true';

7. 要素に属性が含まれているかどうかを判断します

alert(a.hasAttribute('title'))

8. 要素の種類を取得します

className)

9. 要素の型を直接変更すると、以前の型が失われる可能性があります

a.className = 'bigSize yellowText';

a の型リストに新しい型を直接追加しても、以前の型には影響しません。 type

a.classList.add('border');

属性を削除

a.classList.remove('bigSize');

10. 特定の型を使用するかどうかを切り替えます

一つ、削除します 元々無い場合は

a.classList.toggle('bigSize');

11. jsで設定しただけのスタイルを取得できます

属性に直接書いたスタイルはスタイルに記述された

テーブル(Styleタグ)内のスタイルjsが取得できません

a.style.padding = '20px';

12.計算を取得します ( の属性、スタイルシートのスタイル、js で変更されたものを含みます)

var aStyle = window.getComputedStyle(a,':after');

alert(aStyle.border);