元素节点
元素节点就是HTML标签元素，元素节点主要提供了对元素标签名、子节点及属性的访问；
元素节点的三个node属性：nodeType：1、nodeName/TagName：元素的标签名大写、nodeValue：null；
其父节点 parentNode 指向包含该元素节点的元素节点 Element 或文档节点 Document；
元素的 childNodes 属性中包含了它的所有子节点，这些子节点可能是元素、文本、注释、处理指令节点；
childNodes 结合 NodeType 可以检查有几个元素子节点：
操作属性的方法主要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()四个，可以针对任何属性使用，包括那些以HTMLElement类型属性的形式定义的属性；
- obj.hasAttribute(attr)方法返回一个布尔值，表示当前元素节点是否包含指定属性；
- IE6/IE7不支持 hasAttribute() 方法；
- obj.hasAttribute(attr)检测 class 属性时，直接用 class 就可以了，不要用className;
- obj.hasAttribute(attr)检测 for属性时，直接用 for就可以了，不要用htmlFor;
- obj.getAttribute(attr)方法用于取得属性的值，如果给定名称的属性不存在或无参数则返回null；
- obj.getAttribute(attr)获取 class 时，直接用 class 就可以了；IE6/IE7除外，IE6/IE7的 getAttribute(attr) 方法要用 className；
- obj.getAttribute(attr)获取 for时，直接用 for就可以了；
- obj.setAttribute(attr,value)方法接受两个参数：要设置的属性名和值，如果已经存在，则替换现有的值。如果属性不存在，则创建该属性并设置相应的值。该方法无返回值；
- obj.setAttribute(attr,value)设置 class 时，直接用 class 就可以了；
- obj.setAttribute(attr,value)设置 for 时，直接用 for 就可以了；
- obj.setAttribute(attr,value)设置 style 时，直接用 style 就可以了；在 IE7及以下，用 obj.style.setAttribute("cssText",value); 这里的 style 只是行间样式；
- 我们一般用 obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; 来获取元素当前样式；
属性节点
属性节点，有的叫特性节点，差不多一个意思；
属性节点的三个node属性，nodeType:2、nodeName/name:属性名称、nodeValue/value：属性值；
属性节点还有一个 specified 属性，specified 是一个布尔值，用以区别特性是在代码中指定的，还是默认的。这个属性的值如果为true，则意味着在HTML中指定了相应特性，或者是通过 setAttribute() 方法设置了该属性。在IE中，所有未设置过的特性的该属性值都为false，而在其他浏览器中，所有设置过的特性的该属性值都是true，未设置过的特性，如果强行为其设置 specified 属性，则报错。
元素节点有一个 attributes 属性，它包含一个 NamedNodeMap，包含当前元素所有的属性及属性值，与NodeList类似，也是一个动态的集合。元素的每一个属性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中，每个节点的 nodeName 就是属性的名称，节点的 nodeValue 就是属性的值；
createAttribute(attr) 创建新的属性节点；
- obj.attributes.setNamedItem(attr); 向列表中添加节点，该方法无返回值；要先创建属性，在以nodeValue的形式赋属性值，在传入setNamedItem
- obj.attributes.getNamedItem(attr); 返回 nodeName 属性等于 attr 的节点；以" attr=value " 形式返回；
- obj.attributes.removeNamedItem(attr); 从列表中移除 nodeName 属性等于 attr 的节点，并返回该节点；
- obj.attributes.item(index); 返回位于下标 index 位置处的节点，也可以用[]代替， obj.attributes[index]；
attributes属性主要用于属性遍历。在需要将DOM结构序列化为HTML字符串时，多数都会涉及遍历元素特性
文本节点属性：
- 文本节点的 data 属性与 nodeValue 属性相同；
- wholeText 属性将当前 Text 节点与毗邻的 Text 节点，作为一个整体返回。大多数情况下，wholeText 属性的返回值，与 data 属性和 textContent 属性相同；
- 文本节点的 length 属性保存着节点字符的数目，而且 nodeValue.length、data.length 也保存着相同的值；
文本节点方法：
文本节点的操作与字符串的操作方法相当类似。一般地，我们获取文本都用 innerHTML，然后再去字符串的操作方法去操作。
- document.createTextNode(text); 方法用于创建文本节点，这个方法接收一个参数，要插入节点中的文本；插入的是文本，就算写的是标签，也是当做文本来插入的；
- splitText(index) 方法将一个文本节点分成两个文本节点，即按照 index 指定的位置分割 nodeValue 值。原来的文本节点将包含从开始到指定位置之前的内容。这个方法会返回一个新文本节点，包含剩下的文本；
- appendData(text) 方法将 text 添加到节点的末尾，该方法无返回值；
- deleteData(index,count) 方法从 index指定的位置开始删除 count 个字符，无返回值；
- insertData(index,text) 方法在 index 指定的位置插入 text，无返回值；
- replaceData(index,count,text) 方法用 text 替换从 index 指定位置开始到 index+count 为止的文本，无返回值；
- substringData(index,count) 方法提取从 index 指定的位置开始到 offset+count 为止处的字符串，并返回该字符串。原来的文本节点无变化；
以上所述是小编给大家介绍的jacascript DOM节点——元素节点、属性节点、文本节点。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/js/39914.html