操作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。
例如
<body id="test">
<script>
//Uncaught TypeError: document.body.matchesSelector is not a function
console.log(document.body.matchesSelector('#test'));
</script>
</body>
由于兼容性问题，现在各个浏览器都只支持加前缀的方法。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);
}
}
<body id="test">
<script>
console.log(matchesSelector(document.body,'#test'));//true
</script>
</body>
二、操作节点
| 方法 | 说明 |
|---|---|
| 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)
