JavaScript での DOM の詳細な紹介 (コード例)

この記事の内容は、JavaScript における DOM の詳細な紹介 (コード例) であり、一定の参考価値があります。必要な友人が参照することができます。お役に立てれば幸いです。ヘルプ。

1. DOM: ドキュメント オブジェクト (ドキュメント) モデル。 HTML ページ全体を逆さまのツリーと考えてください。HTML はツリーのルート ノードであり、head と body はツリーの子ノードです。 DOM モデルでは、HTML 内のタグの各ペアが操作

2 のノード オブジェクトとしてみなされる必要があります。DOM の役割:

JavaScript はページのコンテンツを変更できますすべての HTML 要素

JavaScript はページ内のすべての HTML 属性を変更できます
JavaScript はページ内のすべての CSS スタイルを変更できます
JavaScript はすべてのイベントに反応できますページ内

3.DOM ページ内の要素ノード オブジェクトを検索します:

3.1: ページ内の要素ノード オブジェクトを ID で検索します
例:

var ob1=document.getElementById("d1");
 //将节点对象中内容输出
 alert(ob1.innerHTML);

3.2: タグ名による検索 ページ内の要素ノードのコレクションまたは配列
eg:

var arr1=document.getElementsByTagName("h2");
//遍历节点对象集合，输出每个对象的内容
for(var i=0;i<arr1.length;i++){
alert(arr1[i].innerHTML);
 }

3.3: クラス名を使用してページ内の要素ノードのコレクションまたは配列を検索します。例:

var arr2=document.getElementsByClassName("c1");
            //遍历节点对象集合，输出每个对象的内容
            for(var i=0;i<arr2.length;i++){
                    alert(arr2[i].innerHTML);
            }

3.4: name 属性を通じて要素ノードのコレクションまたは配列を検索します

eg:

var arr3=document.getElementsByName("hobby");
            //遍历节点对象集合，输出每个对象的value属性值
            for(var i=0;i<arr3.length;i++){
                alert(arr3[i].value);
           }

4. DOM 操作ノード オブジェクトのコンテンツ (ラベル内のテキスト コンテンツ) 、サブラベル、サブラベル テキスト...):

4.1 : ノード コンテンツの取得: ノード object.innerHTML
eg:

alert(ob1.innerHTML);

4.2: ノード コンテンツの変更: ノード object.innerHTML= "新しい値";

eg:

ob1.innerHTML="哈哈";

4.3: ノードのコンテンツをクリアします:

eg:

ob1.innerHTML="";

5.DOM は、次のテキスト コンテンツを操作します。ノード オブジェクト (ラベル内のテキストとサブラベル内のテキスト...):

5.1: ノード テキストの内容 (ラベル内のテキストとサブラベル内のテキスト) を取得します: node object.innerText
例:

alert(ob1.innerText);

5.2: ノード テキストの内容を変更します (ラベル内のすべての内容は変更です): node object.innerText = "新しい値";

例:

ob1.innerText="呵呵";

6.DOM 操作 ノード オブジェクトのプロパティ:

6.1: ノード オブジェクトのプロパティを取得します: ノード オブジェクト.プロパティ名
例:

 alert(ob2.src);

6.2: ノード オブジェクトのプロパティを変更します: ノード オブジェクト。属性名 = "値";

eg:

 ob2.src="img/img-2.jpg";

6.3: ノード オブジェクトのプロパティを削除します: node Object.removeAttribute("属性名");

eg:

ob2.attributes.removeNamedItem("title");
ob2.removeAttribute("title");

7.DOM 操作ノード オブジェクト スタイル:

7.1: ノード オブジェクトのスタイルを設定します: Node object.style.Style name=" Style value";
例:

ob1.style.color="red";
ob1.style.backgroundColor="blue";

7.2:ノード オブジェクトのスタイルを取得します:node object.style.Style name

例:

alert(ob1.style.color);

8.Event

8.1: onload: ページ読み込みイベント。
8.2: onclick: マウスクリックイベント。
8.3: onchange: イベントを変更します。
8.4: onblur: カーソルが離れるイベント。
8.5: onfocus: カーソルイベントを取得します。
8.6: onmouseover: マウス通過イベント。
8.7: onmouseout: マウスがイベントを離れる。

9.DOM 操作ノード オブジェクト

9.1: ノード オブジェクトの作成:
9.1.1: ラベル ノード オブジェクトの作成: document.createElement("ラベル名");
例:

//创建节点对象
var node1=document.createElement("p");

eg:

//创建节点对象
var node1=document.createElement("h1");
node1.innerHTML="你好<span>中国</span>";

9.1.2: テキスト オブジェクトを作成します: document.createTextNode("text content");

eg:

//创建文本对象
var node1text=document.createTextNode("这是一个段落");

9.2: ノードを追加しますオブジェクト: ノード object.appendChild(子ノード);

eg:

//将节点对象添加body中
document.getElementById("d1").appendChild(node1);

//直接向一个标签中添加子节点
document.getElementById("d2").innerHTML=document.getElementById                                
("d2").innerHTML+"<h2>哈哈</h2><p>呵呵呵</p>";

9.3: ノード オブジェクトの削除: 親ノード object.removeChild(子ノード オブジェクト);

eg:

//获得父节点对象
var parentNode=document.getElementById("d1")
 //获得要删除的子节点对象
 var childNode=document.getElementsByTagName("p")[0];
//删除子节点对象
//parentNode.removeChild(childNode);
//删除当前节点对象，只有谷歌，火狐
childNode.remove();

9.4: ノード オブジェクトをコピーします: node object.cloneNode(true);

eg:

//获得要复制的节点对象
var childNode=document.getElementsByTagName("p")[0];
//复制节点对象,true表示复制节点的同时将内容复制，false反之
var copyNode=childNode.cloneNode(true);
//将复制的节点添加到body中
document.getElementById("d1").appendChild(copyNode);

9.5: 要素内の子ノードを置き換えます: 親ノード object.replaceChild(newnode,oldnode);

以上がJavaScript での DOM の詳細な紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。