JavaScript の DOM とは何ですか? domノードへのアクセス方法-jsチュートリアル-php.cn

JavaScript の DOM とは何ですか? domノードへのアクセス方法

伊谢尔伦

リリース： 2017-07-20 13:20:54

オリジナル

1993 人が閲覧しました

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();//true

ログイン後にコピー

HTMLには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 番目は、コメントとの間の空白ノードです。
合計9つのノード。

DOM に素早くアクセス

childNodes、parentNode、nodeName、nodeValue および属性を通じてドキュメント内の任意のノードにアクセスできます。しかし、実際のアプリケーションでは、テキストノードは非常に煩わしいものです。テキストが変更されると、スクリプトに影響を与える可能性があります。また、DOM ツリーが十分に深い場合、それにアクセスするのは確かに不便です。幸いなことに、より便利な方法でノードにアクセスできます。これらのメソッドは次のとおりです

getElementsByTagName()
getElementsByName()
getElementById()

ログイン後にコピー

まず getElementsByTagName() について説明します

タグ名を通じて HTML 要素のコレクションを取得します。例は次のとおりです

document.getElementsByTagName(&#39;p&#39;).length;//3

ログイン後にコピー

返されるのはコレクションであるため、配列の添え字の形式または item メソッドを通じてアクセスできます。比較するには配列アクセス方式を使用することをお勧めします。もっとシンプルなもの。

document.getElementsByTagName(&#39;p&#39;)[0];// <p class="opener"> 
document.getElementsByTagName(&#39;p&#39;).item(0);//和上面的结果一样 
 
document.getElementsByTagName(&#39;p&#39;)[0].innerHTML;//first paragraph

ログイン後にコピー

要素の属性にアクセスするには、属性コレクションを使用できます。ただし、より簡単な方法は、プロパティとして直接アクセスすることです。例を見てみましょう

document.getElementsByTagName(&#39;p&#39;)[2].id;//closer

ログイン後にコピー

なお、class属性は通常は使えません。。クラス名を使用します。クラスは JavaScript 仕様の予約語であるためです。

document.getElementsByTagName(&#39;p&#39;)[0].className;//opener

ログイン後にコピー

次のメソッドを使用して、ページのすべての要素にアクセスできます

<span style="color: #ff0000;">document.getElementsByTagName(&#39;*&#39;).length;//9</span>

ログイン後にコピー

注: 上記のメソッドは、以前のバージョンの IE ではサポートされていません。 document.all に置き換えることができます。 IE7 ではすでにサポートされていますが、要素ノードだけでなくすべてのノードが返されます。

Siblings、Body、First、Last Child
nextSibling とpreviousSibling は、DOM にアクセスする 2 つのより便利な方法です。隣接するノードにアクセスするために使用されます。例は次のとおりです

var para = document.getElementById(&#39;closer&#39;) 
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要素にアクセスします。