前端JS-Day18

排他思想：先排除其他元素样式，再设置自身样式。

 获取、设置自定义属性值：

 

 

H5自定义属性：

getAttribute方法兼容性更好

 

 

 节点操作：

 

节点至少有nodeType(节点类型)、nodeName(节点名)、nodeValue(节点值)三个基本属性。

元素节点nodeType为1

属性节点nodeType为2

文本节点nodeType为3 （文本节点包含文字、空格、换行等）

实际开发中操作的是元素节点！

父级节点方法：注意返回的是最近的一层父节点。

 

子节点方法：childNodes标准方法但会同时返回元素节点和文本节点，需要通过nodeType的值进行处理取值。

child方法为非标准方法，但可以直接返回元素子节点。

 

 

 以上获取第几个子节点的方法存在元素混淆、兼容性问题，故实际开发中采取数组选择的方法选取：parent.children[index].

 

兄弟节点：

 

 创建节点=创建+添加：动态创建元素节点

添加节点：appendChild相当于after伪元素，insertBefore相当于before伪元素。

若insertBefore内指定元素即参照节点为null，则insertBefore和appendChild效果相同。

 替换节点：replaceChild方法，接受两个参数：要插入节点和要删除节点。

 删除节点：node为待删除节点的父节点

以上方法均需要获取父节点，若在不支持子节点的节点上调用会导致抛出错误。 

克隆节点：cloneNode内参数代表浅拷贝或者深拷贝。通常与父类添加节点并用。

浅拷贝若未指示其父节点，则称为孤儿节点，通过增加节点的方法将其添加至文档中。

Document类型：

Document类型的节点nodeType为9，nodeValue和parentValue均为null。

document.documentElement值为html元素，document.body值为body元素。

一般来说，节点增加方法不会用于document上，因为element类型元素仅有一个且为：html

文档信息：通过document的url、domain、referrer属性分别获取文档的url，域名，来源属性。仅domain属性可以设置