DOM的相关概念

【前面的话】DOM全称是Document Object Model，即文档对象模型。我们常说的html文档其实就是一个DOM树，DOM操作就是在内存中找到DOM树上我们想要的DOM对象，对它的属性进行修改，然后渲染引擎会把修改的结果重新绘制在界面上。DOM里面涵盖的知识点还是很多的，尤其是到后来要兼容浏览器的时候是很绕的，这次先讲一些DOM的相关概念，等聊完BOM之后，我会再针对兼容浏览器这块做个小总结。

1、节点的属性：

① nodeType

//节点//nodeType 1-元素节点 ， 2-属性节点 ， 3-文本节点

② nodeName

// nodeName 如果是标签则返回的是标签的名称；如果是文本则返回的是#text；如果是属性节点则返回属性的名称

③ nodeValue

// nodeValue 如果是标签则始终返回null ； 如果是文本节点则返回文本的内容 ； 如果是属性节点则返回属性的值

④节点的复制

  element.cloneNode();  // 克隆一个新的DOM对象；参数为Boolean类型，true赋值子节点，false不复制子节点  element.appendChild(); // 追加元素

2、自定义属性：

    2.1 任何浏览器都可以通过dom对象获取到标签的预定义属性
    2.2 chrome，新版IE（9及以上）无法获取标签的自定义属性；但IE8以前是可以通过dom对象获取到标签的自定义属性
    2.3 如何在任何浏览器中显示自定义属性呢？？
            ——getAttribute可以获取标签的预定义属性；通过自定义属性获得的类型都是String
            ——设置属性的值：element.setAttribute（name,value）
            ——移除属性：element.removeAttribute(name)
附：

1 element.className = " ";   //仅删除class类的值，保留类名2 element.removeAttribute("class")  //完全删除这个类

    2.4 属性的相关操作

1 // 获取属性节点2   var attrNode = box.getAttributeNode（"id"）；3   console.log(attrNode.nodeType);  //属性节点的nodeType  24   console.log(attrNode.nodeName);  //属性节点的nodeName 属性的名称5   console.log(attrNode.nodeValue);  //属性节点的nodeValue 属性的值6     7 // 设置属性 setAttribute8     9 // 移除属性 removeAttribute

3、层次结构

——父节点：parentNode

    ① 子节点： 

1 childNodes 所有的子节点——DOM标准的方法，除了获取子标签以外，还会获取文本节点；IE8以前会忽略空白节点2 children 所有的子元素——非标准的DOM方法，但是几乎所有的浏览器都支持，只会获取元素节点

    ② 兄弟节点，所有浏览器都支持

1  element.nextSibling 下一个兄弟节点，可能是非元素节点，会获取到文本节点2 element.nextElementSibling 获取下一个紧邻的兄弟元素，会忽略空白  // IE8以前不支持此属性3     4  element.previousSibling 上一个兄弟节点，可能是非元素节点，会获取到文本节点5 element.previousSibling 获取上一个紧邻的兄弟元素，会忽略空白 // IE8以前不支持此属性

    ③兄弟元素，IE8以前不支持

1  previousElementSibling 上一个兄弟节点2 nextElementSibling 下一个兄弟节点

 

 

原标题：DOM的相关概念

关键词：dom