Document Object Model( 文档对象模型 )

WEB前端 waitig 368℃ 百度已收录 0评论

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

获取节点的方法

  1. 在设计html的时候,一个元素对应的id应该是唯一的。 可以通过document.getElementById 获取某个元素对应的元素节点对象。
  2. 所有的元素都有标签名 通过 getElementsByTagName 根据标签名称获取一个元素数组。
  3. 与 getElementsByTagName 类似的,也可以通过 getElementsByClassName 根据class返回一个节点数组。
  4. 表单元素都有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>

本文由【waitig】发表在等英博客
本文固定链接:Document Object Model( 文档对象模型 )
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)