DOM的相关概念

Posted 2020-07-03 小花喵

【前面的话】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   2
4     console.log(attrNode.nodeName);   //属性节点的nodeName 属性的名称
5     console.log(attrNode.nodeValue);   //属性节点的nodeValue 属性的值
6         
7  // 设置属性  setAttribute
8         
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  下一个兄弟节点