JavaScript DOMのサンプルコードの詳細説明

この記事では主にjavascript DOMの詳細な説明とサンプルコードの関連情報を紹介します。必要な方は

javascript DOMの概要

を参照してください。DOM (ドキュメントオブジェクトモデル)はJSにあります 最も簡単な部分です。確かに非常にシンプルであることは否定できません。DOM の思考モードは少し固定されており、いくつかの固定メソッドを覚えておくだけでよいため、DOM はすべての JS の出発点であると言えます (ここではクライアントを指します) js）。

最近、役立つ DOM の演習を行っているときに、私の DOM 知識が非常に散在していることに気づきました (私は常によく理解していると思っていました) 多くの友人は、DOM がいくつかのメソッドを呼び出すだけであるか、私が を使用しているだけだと考えているかもしれません。 DOM の詳細をまったく考慮することなく、直接 jQuery を実行できます。はい、その通りです。 jQuery による DOM のカプセル化は前例がありませんが、大人になると走れるようになる前に歩けるようになる必要があるので、DOM についてさらに詳しく理解しておく必要があると思います。使用方法。

DOM 仕様の W3C の概要には、非常に一般的に使用されるものと、あまり役に立たないものがあります。ここでは主に、よく使用されるいくつかの DOM 操作について説明します (DOM の 基本的な概念については説明しません)。ここで紹介) ：

ノード階層

いわゆるノード階層とは、

htmlドキュメント内に独自の特性、データ、メソッドを持つノード（タグなど）の存在を指します。階層を構成します (実際にはツリー構造として想像できます)。 NODE インターフェイスは、W3C の DOM レベル 1 仕様で定義されています。このインターフェースには非常に便利なメソッドがいくつかあります:

Node.ELEMENT_NODE; (要素ノード)

Node.TEXT_NODE; ノードには独自のノード タイプ フラグがあり、これはたとえば要素ノードの NodeType 属性です。 == '1'; テキストノードのnodeType == '3'; ドキュメントノードのnodeType == '9'; 1. ドキュメントノード

ドキュメントノードはドキュメント内のドキュメントオブジェクトで表現されます。特徴は以下の通りです:

console.log(document.nodeType); // 9 
console.log(document.nodeName); // #document 
console.log(document.nodeValue); // null 
console.log(document.parentNode); // null(它已经是最顶层的节点，树的根节点)

ヒント1(ドキュメントの子ノード):

1.Document.documentElementはhtmlオブジェクトを取得できますが、Document.childNodes[0]を通じて取得することもでき、document.firstchildが取得されます。 。ただし、documentElement を使用すると、要素へのより高速かつ直接的なアクセスが可能になります。

ヒント 2 (ドキュメント関連情報):

1. ドキュメントのタイトルを取得します: document.title;

2. 完全な URL を取得します: document.URL;

3. ドメイン名 (ip): document を取得します。ドメイン;

4. ページの URL を取得します: document.referrer;

ヒント 3 (ドキュメント検索要素):

1. id を渡します: document.getElementById("xxx");同一の ID が複数ある場合は、その ID を持つ最初の要素を取得します。

2. タグ名を通して: document.getElementsByTagName("xxx"); タグ名「xxx」を持つ要素のコレクションを返す!

3. 名前を通して: document.getElementByName();

とても分かりやすいです。ドキュメントオブジェクトとその互換性 これは比較的高度なものでもあります。

2. 要素ノード

要素ノードは、要素のタグ名、サブノード、属性へのアクセスを提供します。その基本的な特徴は次のとおりです:

var ele = document.getElementById("element"); //通过document取到一个标签对象 
console.log(ele.nodeType); // 1 
console.log(ele.nodeName); // 返回元素的标签名 
console.log(ele.nodeValue); //永远返回null!

ヒント 1 (html 要素):

　<p id="myp" class="bd" title="Body text" lang="en" dir="ltr"></p>
　　　　var p = document.getElementById("p");
　　　　1. console.log(p.id); // "myp"
　　　　2. console.log(p.className); // "bd"
　　　　3. console.log(p.title); // "Body text"
　　　　4. console.log(p.lang); // "en"
　　　　5. console.log(p.dir); // "ltr"

ヒント 2 (プロパティの取得、設定、削除):

　1.p.getAttribute("id"); // "myp"
　　　　2.p.setAttribuye("id","yourp"); // id已变动
　　　　3.p.removeAttribute("id"); //id已删除

注意すべき点: IE7 以下のバージョンでは、3 つのメソッドが存在します。一部の異常な動作のため、特にイベント処理

プログラムを使用する場合に、set を介してクラス属性とスタイル属性を設定しても効果がなく、同じことが get にも当てはまります。したがって、一般的な開発では上記 3 つの方法は避け、属性によって特性を設定することをお勧めします。

ヒント 3 (要素の子ノード):

最も重要なことはここで、次のコードがあります:

<ul id="myList"> 
  <li>Item 1</li> 
  <li>Item 2</li> 
  <li>Item 3</li> 
</ul> 
 
var mL = document.getElementById("myList"); 
//很明显mL对象有三个元素节点，我们也知道用childNodes属性去找到节点数，然而陷阱随之而来 
 
console.log(mL.childNodes); // 7 
//?!怎么会有7个? 
 
//原因在于childNodes中不仅包含了元素节点，还有4个文本节点。因此需要过滤 
 
for(var i=0,len=ml.childNodes.length;i<len;i++){ 
   if(ml.childNodes[i].nodeType == "1"){ // 利用元素节点的特性 
     // .... 
   }   
}<br>//最好的方法可以这么做<br>//如果元素对象内部标签名是一样的<br>var items = ml.getElementsByTagName("li"); //能得到三个li节点对象 
　　

3. テキスト ノード

テキスト ノードには、次のようなプレーン テキスト コンテンツが含まれています。文字通りに解釈される場合、プレーン テキストにはエスケープされた HTML 文字を含めることができますが、HTML コードを含めることはできません。テキスト ノードの基本的な特徴は次のとおりです:

<p id="myp">123</p> 
 
var myp = document.getElementById("myp") //取到元素节点 
var tx = myp.childNodes[0] //前面也提过childNodes的特性，这次取到了文本节点 
 
console.log(tx.nodeType) // 3 
console.log(tx.nodeName) // 所有文本节点的nodeName都是"#text"; 
console.log(tx.nodeValue) // 123(节点包含的文本)，注意元素节点是不能取到它包含的文本节点的文本的 
 
//所以其父节点显然是个元素节点.

ヒント 1:

テキスト ノードを作成する 2 つの方法: document.createTextNode()、document.createText();

作成後は、文書であり、参照する必要があります。

var a = document.createElement("p");

　　　　var b = document.createTextNode("123");

　　　　a.appendChild(b);

　　　　document.body.appendChild(a);

こうすると本文の最後に

123

のようなタグが現れます

個人的には、DOM は間違いなく JS を学習するための入り口だと思いますが、長い時間をかけて磨き上げる必要もあります。私は DOM を少なくとも 3 回読みましたが、それは DOM レベル 1 の仕様にすぎませんが、毎回何か新しいことがあります。 DOM を学習する場合は、いくつかの落とし穴に注意し、それについて考えることにもっと時間を費やす必要があります。

以上がJavaScript DOMのサンプルコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。