js-dom元素操作

JS获取节点方法

1. 通过顶层document节点获取：

（1） document.getElementById(elementId)：该方法通过节点的ID，可以准确获得需要的元素，是比较简单快捷的方法。如果页面上含有多个相同id的节点，那么只返回第一个节点。如今，已经出现了如prototype、Mootools等多个JavaScript库，它们提供了更简便的方法：(id)，参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法，不过$()的功能更为强大，具体用法可以参考它们各自的API文档。

（2）document.getElementsByName(elementName)：该方法是通过节点的name获取节点，从名字可以看出，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。然后，我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
例如：在HTML中checkbox和radio都是通过相同的name属性值，来标识一个组内的元素。如果我们现在要获取被选中的元素，首先获取改组元素，然后循环判断是节点的checked属性值是否为true即可。

（3）document.getElementsByTagName(tagName)：该方法是通过节点的Tag获取节点，同样该方法也是返回一个数组，例如：document.getElementsByTagName(‘A’)将 会返回页面上所有超链接节点。在获取节点之前，一般都是知道节点的类型的，所以使用该方法比较简单。但是缺点也是显而易见，那就是返回的数组可能十分庞 大，这样就会浪费很多时间。那么，这个方法是不是就没有用处了呢？当然不是，这个方法和上面的两个不同，它不是document节点的专有方法，还可以应 用其他的节点，下面将会提到。

2、通过父节点获取：

（1）parentObj.firstChild：如果节点为已知节点（parentObj）的第一个子节点就可以使用这个方法。这个属性是可以递归使用的，也就是支持parentObj.firstChild.firstChild.firstChild…的形式，如此就可以获得更深层次的节点。

（2）parentObj.lastChild：很显然，这个属性是获取已知节点（parentObj）的最后一个子节点。与firstChild一样，它也可以递归使用。
在使用中，如果我们把二者结合起来，那么将会达到更加令人兴奋的效果，即：parentObj.firstChild.lastChild.lastChild…

（3）parentObj.childNodes：获取已知节点的子节点数组，然后可以通过循环或者索引找到需要的节点。
注意：经测试发现，在IE7上获取的是直接子节点的数组，而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。

（4）parentObj.children：获取已知节点的直接子节点数组。
注意：经测试，在IE7上，和childNodes效果一样，而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。

（5）parentObj.getElementsByTagName(tagName)：使用方法不再赘述，它返回已知节点的所有子节点中类型为指定值的子节点数组。例如：parentObj.getElementsByTagName(‘A’)返回已知的子节点中的所有超链接。

3、通过临近节点获取：

（1）neighbourNode.previousSibling：获取已知节点（neighbourNode）的前一个节点，这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
（2）neighbourNode.nextSibling：获取已知节点（neighbourNode）的下一个节点，同样支持递归。

4、通过子节点获取：

（1）childNode.parentNode：获取已知节点的父节点。

节点类型

DOM节点中，每个节点都拥有不同的类型。

W3C规范中常用的 DOM节点类型有以下几种：

节点类型 说明 值 元素 每一个HTML标签都是一个元素节点，如 、 、

等

1 属性 元素节点（HTML标签）的属性，如 id 、class 、name 等。 2 文本 元素节点或属性节点中的文本内容。 3 注释 表示文档注释，形式为< !– comment text –>。 8 文档 表示整个文档（DOM 树的根节点，即 document ） 9

获取节点类型的语法：

nodeObject.nodeType

其中，nodeObject 为DOM节点（节点对象）。该属性返回以数字表示的节点类型，例如，元素节点返回 1，属性节点返回 2 。

节点名称

节点名称就是DOM节点的名字，不同类型的节点对应不同的节点名称。

节点类型 节点名称 元素 HTML标签的名称（大写）:如DIV、UL、A 属性 属性的名称 文本 它的值永远是#text 文档 它的值永远是#document

获取节点名称的语法：

nodeObject.nodeName

其中，nodeObject 为DOM节点（节点对象）。

节点值

对于文本节点，节点值为文本内容；对于属性节点，节点值为属性的值。

节点值对于文档节点和元素节点是不可用的。

获取节点值的语法：

nodeObject.nodeValue

其中，nodeObject 为DOM节点（节点对象）。

1、判断子节点个数

var len = 0;len = Obj.children.length;//不包括text子节点//或者 len = Obj.childNodes.length;则包含text等空格节点

2、判断是否含有子节点

obj.hasChildNodes();//返回true则含有，false则表示无

IE8.0及其以下版本的浏览器会忽略节点间的空白节点（空格、回车和Tab键），遵循W3C规范的浏览器（Chrome、FireFox、Safari等）则会把这些空白作为文本节点处理。

文本节点和属性节点不可能再包含子节点，所以对于这两类节点使用 ChildNodes() 方法返回值永远为false。

如果 hasChildNodes() 返回值为false，则 firstChild、lastChild 的返回值为 null（节点不存在），children、childNodes 返回值为空集合（数组长度为 0）。

3、删除子节点

obj.removeChild(obj.firstChild);//删除第一个子节点obj.removeChild(obj.lastChild);//删除最后一个子节点obj.removeChild(Obj.children[1])//删除第2个子节点

可以使用Obj.childNodes[i].className或者其他方式对子节点进行操作

js中设置元素class的三种方法

el.setAttribute('class','abc'); el.setAttribute('className', 'abc') el.className = 'abc';

其他

属性：

nextSibling     //返回当前节点的下一个兄弟节点(只读) previousSibling     //返回此节点的前一个兄弟节点(只读) parentNode     //返回父节点(只读) childNodes //存储节点的子节点列表(只读) nodeValue     //返回节点的文本(可读写) Text     //返回此节点及其后代的文本内容(可读写) nodeName     //返回节点的名字(只读) Attributes     //存储节点的属性列表(只读)dataType     //返回此节点的数据类型Definition     //以DTD或XML模式给出的节点的定义(只读)Doctype     //指定文档类型节点(只读)documentElement     //返回文档的根元素(可读写)firstChild     //返回当前节点的第一个子节点(只读)Implementation     //返回XMLDOMImplementation对象lastChild    //返回当前节点最后一个子节点(只读)nodeType//返回节点的类型(只读)nodeTypedValue     //存储节点值(可读写)ownerDocument     //返回包含此节点的根文档(只读)Parsed//返回此节点及其子节点是否已经被解析(只读)Prefix //返回名称空间前缀(只读)preserveWhiteSpace     //指定是否保留空白(可读写)url     //返回最近载入的XML文档的URL(只读)Xml     //返回节点及其后代的XML表示(只读)

方法：

getElementsByTagName     //返回指定名字的元素集合 appendChild     //为当前节点添加一个新的子节点,放在最后的子节点后createElement     //创建一个元素节点 createTextNode     //创建包括给定数据的文本节点 removeChild     //从子结点列表中删除指定的子节点 hasChildNodes     //返回当前节点是否有子节点 cloneNode     //返回当前节点的拷贝createAttribute     //创建新的属性createCDATASection     //创建包括给定数据的CDATA段createComment     //创建一个注释节点createDocumentFragment     //创建DocumentFragment对象createEntityReference     //创建EntityReference对象createNode     //创建给定类型,名字和命名空间的节点createPorcessingInstruction     //创建操作指令节点insertBefore     //在指定节点前插入子节点Load     //导入指定位置的XML文档loadXML     //导入指定字符串的XML文档replaceChild     //从子节点列表中替换指定的子节点Save     //把XML文件存到指定节点selectNodes     //对节点进行指定的匹配,并返回匹配节点列表selectSingleNode     //对节点进行指定的匹配,并返回第一个匹配节点transformNode     //使用指定的样式表对节点及其后代进行转换transformNodeToObject     //使用指定的样式表将节点及其后代转换为对象

参考：

JavaScript获取节点类型、节点名称和节点值

JS获取节点方法

js对子节点操作

js中设置元素class的三种方法小结