DOM操作简单总结

tech
,

节点关系(以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>