ホームページ > 記事 > ウェブフロントエンド > JavaScript の DOM とは何ですか? domノードへのアクセス方法
JavaScript の DOM とは何ですか? domノードへのアクセス方法
- 伊谢尔伦オリジナル
- 2017-07-20 13:20:541943ブラウズ
DOMはDocument object Modelの略称です。文書オブジェクトモデルは、ＸＭＬやＨＴＭＬをツリーノードの形で表現した文書である。 DOM メソッドとプロパティを使用すると、ページ上の任意の要素にアクセス、変更、削除でき、また要素を追加することもできます。 DOM は言語に依存しない API で、もちろん Javascript を含むあらゆる言語で実装できます
以下のテキストを見てください。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>My page</title> </head> <body> <p class="opener">first paragraph</p> <p><em>second</em> paragraph</p> <p id="closer">final</p> </body> </html>
2段落目を見てみましょう
<p><em>second</em> paragraph</p>
これはpタグであることがわかります。 bodyタグに含まれています。したがって、body は p の親ノードであり、p は子ノードです。最初と 3 番目の段落も本文の子ノードです。これらはすべて 2 番目の段落の兄弟ノードです。この em タグは、2 番目のセグメント p の子ノードです。したがって、 p はその親ノードです。親子ノード関係はツリー状の関係を表すことができます。したがって、これは DOM ツリーと呼ばれます。
DOM ノードへのアクセス
フォームを検証したり画像を変更したりする場合、要素 (element.) にアクセスする方法を知る必要があります。要素を取得するにはさまざまな方法があります。
ドキュメントノード
ドキュメントを通じて現在のドキュメントにアクセスできます。 firebugs (Firefox プラグイン) を使用して、ドキュメントのプロパティとメソッドを表示できます。
すべてのノードには、nodeType、nodeName、nodeValue という属性があります。ドキュメントのnodeTypeが何なのか見てみましょう
document.nodeType;//9
ノードタイプは全部で12種類あります。資料は9です。よく使われるのは、要素（要素：1）、属性（属性：2）、テキスト（テキスト：3）です。
ノードにも名前があります。 HTMLタグの場合。ノード名がラベル名になります。テキストノード (text) の名前は #text です。 ドキュメントノード (document) の名前は #document です。
ノードにも値があります。テキスト ノードの場合、値はテキストです。 documentの値はnullです
documentElement
XMLにはドキュメントをラップするROOTノードがあります。 HTMLドキュメントの場合。 ROOT ノードは html タグです。ルートノードにアクセスします。 documentElement のプロパティを使用できます。
document.documentElement;//<html> document.documentElement.nodeType;//1 document.documentElement.nodeName;//HTML document.documentElement.tagName;//对于element，nodeName和tagName相同
子ノード
子ノードが含まれているかどうかを判断するには、次の方法を使用できます
document.documentElement.hasChildNodes();//trueHTMLには2つの子ノードがあります。
document.documentElement.childNodes.length;//2 document.documentElement.childNodes[0];//<head> document.documentElement.childNodes[1];//<body>子ノードを通じて親ノードにアクセスすることもできます
document.documentElement.childNodes[1].parentNode;//<html>ボディの参照を変数に代入します
var bd = document.documentElement.childNodes[1]; bd.childNodes.length;//9ボディの構造を見てみましょう
first paragraph
<p><em>second</em> paragraph</p>final
子ノードを使用する理由 番号は 9 です。
まず、Pが4つとコメントがあり、合計4つあります。
4 つのノードには 3 つの空のノードが含まれます。それは7です。
本体と最初の p の間の 8 番目の空白ノード。
9 番目は、コメントと 36cc49f0c466276486e50c850b7e4956 の間の空白ノードです。
合計9つのノード。
DOM に素早くアクセス
getElementsByTagName() getElementsByName() getElementById()まず getElementsByTagName() について説明します
タグ名を通じて HTML 要素のコレクションを取得します。例は次のとおりです
document.getElementsByTagName('p').length;//3返されるのはコレクションであるため、配列の添え字の形式または item メソッドを通じてアクセスできます。比較するには配列アクセス方式を使用することをお勧めします。もっとシンプルなもの。
document.getElementsByTagName('p')[0];// <p class="opener"> document.getElementsByTagName('p').item(0);//和上面的结果一样 document.getElementsByTagName('p')[0].innerHTML;//first paragraph要素の属性にアクセスするには、属性コレクションを使用できます。ただし、より簡単な方法は、プロパティとして直接アクセスすることです。例を見てみましょう
document.getElementsByTagName('p')[2].id;//closerなお、class属性は通常は使えません。 。クラス名を使用します。クラスは JavaScript 仕様の予約語であるためです。
document.getElementsByTagName('p')[0].className;//opener次のメソッドを使用して、ページのすべての要素にアクセスできます
<span style="color: #ff0000;">document.getElementsByTagName('*').length;//9</span>注: 上記のメソッドは、以前のバージョンの IE ではサポートされていません。 document.all に置き換えることができます。 IE7 ではすでにサポートされていますが、要素ノードだけでなくすべてのノードが返されます。
Siblings、Body、First、Last Child
nextSibling とpreviousSibling は、DOM にアクセスする 2 つのより便利な方法です。隣接するノードにアクセスするために使用されます。例は次のとおりです
var para = document.getElementById('closer') para.nextSibling;//"\n" para.previousSibling;//"\n" para.previousSibling.previousSibling;//<p> para.previousSibling.previousSibling.previousSibling;//"\n" para.previousSibling.previousSibling.nextSibling.nextSibling;// <p id="closer">bodyを使用してbody要素にアクセスします。
document.body;//<body>firstChild と lastChild 。 firstChild は childNodes[0] と同じです。lastChild は childNodes[childNodes.length - 1] と同じです。
以上がJavaScript の DOM とは何ですか? domノードへのアクセス方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。