Document Object Model( 文档对象模型 )

来源：互联网发布：淘宝如何引流量编辑：程序博客网时间：2024/05/29 18:47

DOM 是Document Object Model( 文档对象模型 )的缩写。 DOM是把html里面的各种数据当作对象进行操作的一种思路。比如一个超链，作为一个DOM对象，就可以使其隐藏，修改其href指向的地址。

获取节点的方法

在设计html的时候，一个元素对应的id应该是唯一的。可以通过document.getElementById 获取某个元素对应的元素节点对象。
所有的元素都有标签名通过 getElementsByTagName 根据标签名称获取一个元素数组。
与 getElementsByTagName 类似的，也可以通过 getElementsByClassName 根据class返回一个节点数组。
表单元素都有name属性，通过getElementsByName可以根据name属性的值，获取元素节点。

<html>用户名 <input name="userName"> <br>密码  <input name="userPassword"><br><script>var  elements= document.getElementsByName("userName");for(i=0;i<elements.length;i++){  document.write(elements[i]);  document.write("<br>");}</script></html>

5.通过getElementById获取元素节点，然后通过元素节点的attributes获取其下所有的属性节点。
因为属性节点是多个，所以是以数组的形式返回出来的，接着通过for循环遍历，查看每个节点的nodeName和nodeValue
如果要获取一个指定属性的值，可以采用如下风格，as表示所有的属性，as[“id”]取出名称是id的属性。

<html><div id="d1" align="center" class="abc">hello HTML DOM</div><script>var  div1 = document.getElementById("d1");var as = div1.attributes;document.write("div总共有"+as.length +" 个属性");document.write("分别是:");for(i = 0; i< as.length; i++){document.write("<br>");document.write(as[i].nodeName);document.write(":");document.write(as[i].nodeValue);}document.write("<br>");document.write("div的id属性值是："+ as["id"].nodeValue);</script></html>

6.通过document.getElementById获取元素节点，然后通过childNodes获取其所有的子节点。其中第一个子节点，就是其内容节点。
然后借助nodeName和nodeValue把内容节点的名称和值打印出来。

<html><div id="d1" align="center" class="abc">hello HTML DOM</div><script>var  div1 = document.getElementById("d1");var content = div1.childNodes[0];document.write("div的内容节点名是:"+content.nodeName);document.write("<br>");document.write("div的内容节点值是:"+content.nodeValue);</script></html>

阅读全文

0 0