JavaScript DOM编程之API总结篇

JavaScript DOM编程之API总结篇

从截图中可以看出 这段代码中ul的子节点有9个，这说明使用childNodes获取的节点包括了文本节点和元素节点

childNodes在低版本的ie浏览器下获取的节点只包括元素节点，这就导致了兼容性问题

如何解决兼容性？？

根据子节点的nodeType属性值判断

for(vari=0; i

children：

一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持。children子节点列表集合（只读属性 推荐使用 ）

children获取的子节点只包含元素节点

for(vari =0; i

firstNode：第一个子节点

lastNode：最后一个子节点

firstChild（firstElementChild）lastChild(lastElementChild) 第一个子节点 最后一个子节点

firstChild、lastChild和childNodes同样的存在兼容性问题，在低版本ie浏览器中只能获取到元素节点

firstElementChild、lastElementChild获取第一个元素子节点，最后一个元素子节点 推荐使用

varoUl =document.getElementById('ul1');//    oUl.firstChild.style.background = 'red';//标准浏览器 报错//    oUl.lastChild.style.background = 'red';//标准浏览器 报错oUl.firstElementChild.style.background ='red';oUl.lastElementChild.style.background ='red';

hasChildNodes方法：可以用来判断是否包含子节点

七、元素属性型

7.1 setAttribute

setAttribute：它允许我们对元素属性值做出修改与getAttribute一样setAttribute也能用于元素节点

通过setAttribute对文档做出修改后，在通过浏览器的查看源码选项看到的任然是改变之前的属性值，也就是说setAttribue做出的修改，不会反应到文档本身的源码里

setAttribute优势在于可以修改文档中的任何一个属性

element.setAttribute(name, value);

其中name是特性名，value是特性值。如果元素不包含该特性，则会创建该特性并赋值。

如果元素本身包含指定的特性名为属性，则可以访问属性进行赋值，比如下面两条代码是等价

element.setAttribute("id","test");element.id ="test";

非DOM的解决方案

其实不用setAttribute也可以改变元素的属性

setAttribute方法是第一级DOM的组成部分，它可以设计任何元素节点的任意属性。在第1级DOM出现之前，你可以通过另外一种办法设置大部分元素的属性

element.value ="the new value";

与下面语句等价

element.setAttribute("value","the new value");

7.2 getAttribute

getAttribute返回指定的特性名相应的特性值，如果不存在，则返回null或空字符串。

getAttribute不属性doucment对象，不能通过document对象调用，只能通过元素节点对象调用

例如可以与getElementsByTagName方法合用，获取每个p的title属性

varparas =document.getElementsByTagName("p");for(vari=0;i

八、网上的一张思维导图总结

本文mardown原文件

参考

JavaScript DOM编程艺术