html は 4 種類の dom オブジェクトを深く理解しています_html/css

html は 4 種類の dom オブジェクトを深く理解しています_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:36:11

オリジナル

1138 人が閲覧しました

これら 4 つのオブジェクトは HTML 構造からレイヤーごとに派生し、それぞれ HTML 構造内のすべてのコンテンツを表します。

1. Document オブジェクト

ブラウザーに読み込まれるすべての HTML ドキュメントは Document オブジェクトになります。

Document オブジェクトを使用すると、スクリプトから HTML ページ内のすべての要素にアクセスできます。

ヒント: Document オブジェクトは Window オブジェクトの一部であり、window.document プロパティを通じてアクセスできます。

Document オブジェクトのコレクションには、forms[]、images[]、links[]、anchors[]、all[]、applets が含まれます。

Document オブジェクトのメソッド:

write() メソッドは、ドキュメントをロードするときに注目に値します。これにより、スクリプトは解析時に動的に生成されたコンテンツをドキュメントに挿入できます。

2. 要素オブジェクト

要素オブジェクトは HTML 要素を表します。

要素 (HTML 要素とも言えます) でよく使用される属性とメソッド:

1. appendChild() メソッドは、最後の子ノードをノードに追加します。 2. childNodes 属性は、ノードの子ノードのセットを NodeList オブジェクトとして返します。

<body><ul id="myList"><li>Coffee</li><li>Tea</li></ul><p id="demo">请点击按钮向列表中添加项目。</p><button onclick="myFunction()">亲自试一试</button><script>function myFunction(){var node=document.createElement("LI");var textnode=document.createTextNode("Water");node.appendChild(textnode);document.getElementById("myList").appendChild(node);}</script><p><b>注释：</b>首先创建 LI 节点，然后创建文本节点，然后把这个文本节点追加到 LI 节点。最后把 LI 节点添加到列表中。</p></body>

ログイン後にコピー

3. className 属性は、要素のクラス属性を設定または返します。

<body><p id="demo">请点击按钮来获得 body 元素子节点的相关信息。</p><button onclick="myFunction()">试一下</button><script>function myFunction(){var txt="";var c=document.body.childNodes;for (i=0; i<c.length; i++)  {  txt=txt + c[i].nodeName + "<br>";  };var x=document.getElementById("demo");  x.innerHTML=txt;}</script><p><b>注释：</b>元素中的空格被视为文本，而文本被视为节点。</p></body>

ログイン後にコピー

4. getAttribute() メソッドは、指定された属性名の属性値を返します。

<html><body id="myid" class="mystyle"><script>var x=document.getElementsByTagName('body')[0];document.write("Body CSS 类：" + x.className);document.write("<br>");document.write("另一个替代方法：");document.write(document.getElementById('myid').className);</script></body></html>

ログイン後にコピー

5. innerHTML 属性は、要素の内部 HTML を設定または返します。

<html><body>请阅读 <a href="/jsref/dom_obj_attributes.asp" target="_blank">Attr 对象</a>，<p id="demo">请点击按钮来显示上面这个链接的 target 属性值。</p><button onclick="myFunction()">试一下</button><script>function myFunction(){var a=document.getElementsByTagName("a")[0];document.getElementById("demo").innerHTML=a.getAttribute("target");}</script></body></html>

ログイン後にコピー

6. element.removeAttribute() は、要素から指定された属性を削除します。 /element.removeAttributeNode() は、指定された属性ノードを削除し、削除されたノードを返します。

element.removeChild() は要素から子ノードを削除します。 /element.replaceChild() は、要素内の子ノードを置き換えます。

<html><head><script>function changeLink(){document.getElementById('myAnchor').innerHTML="W3School";document.getElementById('myAnchor').href="http://www.w3school.com.cn";document.getElementById('myAnchor').target="_blank";}</script></head><body><a id="myAnchor" href="http://www.microsoft.com">微软</a><input type="button" onclick="changeLink()" value="更改链接"></body></html>

ログイン後にコピー

7. textContent 属性は、指定されたノードとそのすべての子孫のテキストコンテンツを設定または返します。

<html><body><ul id="myList" style="color:red"><li>Coffee</li><li>Tea</li><li>Milk</li></ul><p id="demo" style="color:red" >点击按钮来删除列表中的首个项目。</p><button onclick="myFunction1()">替换节点</button><button onclick="myFunction()">删除节点</button><button onclick="myFunction2()">移除P的style属性</button><script>function myFunction(){var list=document.getElementById("myList");list.removeChild(list.childNodes[0]);}function myFunction1(){//创建新文本节点var newnode = document.createTextNode('water');var list=document.getElementById("myList");list.replaceChild(newnode,list.childNodes[0]);}function myFunction2(){document.getElementsByTagName("P")[0].removeAttribute("style");//必须指定第几个标签，如[0]表示第一个p标签；alert("移除成功！");}</script></body></html>

ログイン後にコピー

3. 属性オブジェクト

HTML DOM では、Attr オブジェクトは HTML 属性を表します。属性属性は、要素オブジェクト (つまり、HTML 要素の属性) に属します。