操作DOM—DOM基础

一、访问节点

1)相对当前节点访问节点

节点操作方法	说明
ownerDocument	返回当前节点的根元素(document对象)
parentNode	返回当前节点的父节点。所有的节点都仅有一个父节点
childNodes	返回当前节点的所有子节点的节点列表
firstChild	返回当前节点的首个子节点
lastChild	返回当前节点的最有一个子节点
nextSibling	返回当前节点之后相邻的同级节点
previousSibiling	返回当前节点之前相邻的同级节点

提示
每个节点都有一个childNodes属性，改属性保存着一个nodeList对象，他表示所有子节点的列表
nodeList是一种类数组对象，用于保存一组有序的节点，用户可以通过下标位置来访问这些节点。虽然childNodes可以通过方括号雨来来访问nodeList的值，而且childNodes对象包含一个length属性，他表示列表包含子节点的个数（长度），但childNodes并不是数组，不能够直接调动数组的方法
注意
nodeList对象实际上是基于DOM结构动态执行查询的结果，DOM结构的变化能够自动反映在nodeList对象中。因此，我们不能够以动态的方式处理nodeList对象
示例

0,2,4,7节点为‘回车’文本节点, 同理其first、last、next、prev也为“回车”节点

只获取元素节点

元素节点操作方法	说明
children	获取当前元素的所有子元素节点
children[0]	获取当前元素的第一个子元素节点
children[el.children.length - 1]	获取当前元素的最后一个子元素节点
nextElementSibling	获取当前元素的同级前一个元素
previousElementSibling	获取当前元素的同级下一个元素

2)访问元素节点

document对象含多个访问文档内元素的方法

方法	说明
getElementById()	通过id获取
getElementsByClassName()	通过class获取
getElementsByTagName()	通过tag获取
querySelector(‘#id’)	通过id获取
querySelector(‘.className’)	通过className获取第一个对应元素
querySelector(‘tagName’)	通过TagName获取第一个对应元素
querySelectorAll('x')	通过x获取所有当前节点内的所有class或tag为x，id也可以（虽然id只能唯一）

getElementByxxxx只能是document对象调用,那querySelector呢？
答案是可以的，那么我们可用querySelector，在知道某个节点范围内找出在
对应的节点
另外在Selectors API Level 2规范为Element类型新增了一个方法matchesSelector().这个方法接受一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则false。
例如

由于兼容性问题，现在各个浏览器都只支持加前缀的方法。IE9+浏览器支持msMatchesSelector()方法，firefox支持mozMatchesSelector()方法，safari和chrome支持webkitMatchesSelector()方法。所以兼容写法为:

function matchesSelector(element,selector){
    if(element.matchesSelector){
        return element.matchesSelector(selector);
    }
    if(element.msMatchesSelector){
        return element.msMatchesSelector(selector);
    }
    if(element.mozMatchesSelector){
        return element.mozMatchesSelector(selector);
    }
    if(element.webkitMatchesSelector){
        return element.webkitMatchesSelector(selector);
    }            
}

二、操作节点

方法	说明
appendChild()	向节点的子节点列表的结尾添加新的子节点
cloneNode()	复制节点
hasChildNodes()	判断当前节点是否拥有子节点
insertBefore()	在指定的子节点前插入新的子节点
normalize()	合并相邻的Text节点并删除空的Text节点
removeChild()	删除(并返回)当前节点的指定节点
replaceChild()	用新的节点替换一个子节点

示例

新建一个节点4

1)appendChild()

parent.appendChild(child4)

2)cloneNode(include_all)

①include_all = false 或默认时

let child5 = child2.cloneNode()
parent.appendChild(child5)

可以看到复制的节点仅为其本身，其子节点并没有复制，复制后返回的节点副本属于文档所有，需要通过appendChild()、insertBefore()或replaceChild()方法将他添加到文档中
②include_all = true

let child5 = child2.cloneNode(true)
parent.appendChild(child5)

3)hasChildNodes()

parent.hasChildNodes() // 返回true

4）insertBefore(newNode,refNode)

parent.insertBefore(child4,child2)

5)normalize()

合并相邻的Text节点并删除空的Text节点

6)removeChild()

parent.removeChild(node)

7)replaceChild(newNode, oldNode)

parent.replaceChild(child4,child2)