DOM操作简单总结

节点关系(以someNode为例)

父节点:someNode.parentNode

子节点:someNode.childNodes[0] 或 someNode.firstChild //第一个子节点

​ someNode.lastChild //最后一个子节点

​ someNode.childNodes.length //子节点个数

相邻节点:someNode.previousSibling //前一个节点

​ someNode.nextSibling //后一个节点

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
tips:浏览器(IE9之前除外)会为空白符创建节点,例如
<ul id="father">
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
<script>
var node = document.querySelector("#father")
console.log(node.childNodes.length) // 7
</script>

如果去掉回车 那么:
<ul id="father"><li>a</li><li>b</li><li>c</li></ul>
<script>
var node = document.querySelector("#father")
console.log(node.childNodes.length) // 3
</script>

​ 不包括文本节点和注释的方法:

​ childElementCount

​ firstElementChild

​ lastElementChild

​ previousElementSibling

​ nextElementSibiling

​ 专有扩展:

​ children // 子节点,但不返回文本节点

​ contains() // 判断某个节点是不是另一个节点的后代

​ compareDocumentPosition() //该方法其实是标准,因为和contains()相似放在这里,不常用,具体属性可以查看MDN有关这个方法的介绍

操作节点(新节点newNode为例)

添加节点:someNode.appendChild(newNode) //此时newNode是someNode最后一个子节点

​ someNode.insertBefore(newNode, someNode.firstChild)

​ //此时newNode是someNode第一个子节点

替换节点:someNode.replaceChild(newNode, someNode.firstChild)

删除节点:someNode.removeChild(someNode.lastChild)

复制节点:someNode.cloneNode()

​ //接受一个布尔型参数,参数为ture时执行深复制,也就是复制节点及其整个子节点数,参数为false时执行浅复制,即只复制节点本身。复制后返回的节点副本属于文档所有,但并没有为它指定父节点。

查找节点

document.getElementById() //按元素ID查找

document.getElementsByName() //按元素的name属性查找

document.getElementsByClassName() //按元素类名查找

​document.getElementsByTagName() //按标签名查找

document.querySelector() // 参数为CSS选择符例如:div(标签名) #mydiv(ID) .title(类),返回匹配的第一个元素

document.querySelectorAll() //参数同上,不同的是返回所有匹配的元素

document.matchesSelector() //参数同上,如果调用元素与选择符匹配则返回ture,否则返回false

创建节点

document.createElement() //创建一个HTML元素,参数为tagName

document.createTextNode() //创建一个文本节点

其他

标准属性:innerHTML和outerHTML

非标准属性:innerText和outerText

其中 inner都是将节点内部(不包括外部标签)替换成相应的HTML和Text,而outer将整个节点替换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="div1">text</div>
<div id="div2">text</div>
<div id="div3">text</div>
<div id="div4">text</div>
<script>
function getDiv(id) {
return document.querySelector('#'+id)
}
getDiv('div1').innerHTML = '<p>1</p>'
getDiv('div2').outerHTML = '<p>2</p>'
getDiv('div3').innerText = '3'
getDiv('div4').outerText = '4'
/*
<div id="div1"><p>1</p></div>
<p>2</p>
<div id="div3">3</div>
"4"
*/
</script>