JS之DOM篇节点操作

DOM节点操作方法包括创建节点、插入节点、删除节点、替换节点、查看节点（指的是查看节点间的关系）、复制节点。

创建节点

document.createElement(tagName)方法可以创建新的元素，该方法接受一个元素的标签名作为参数

var div = document.createElement('div')
console.log(div) // <div></div>

所有节点都有一个ownerDocument属性，指向文档节点document，新创建的节点默认也有这个属性

var div = document.createElement('div')
console.log(div.ownerDocument) // #document

插入节点

appendChild()

appendChild()方法可以向childNodes列表的末尾添加一个节点，并返回这个新增节点。添加新节点后，childNodes中的节点关系也会相应的更新

<div id="box"></div>
<script>
  var ulNode = document.createElement('ul')
  var ret = box.appendChild(ulNode)
  console.log(ret.nodeName) // UL
  console.log(ret === box.lastChild) // true
</script>

如果插入的节点已经是文档的一部分，那么就会将该节点从原来的位置移动到新位置

<div id="one">one</div>
<div id="two">two</div>
<button id="btn">click</button>
<script>
btn.onclick = function() {
  document.body.appendChild(two)
}
 
</script>

insertBefore()

insertBefore(newNode, referenceNode)接受两个参数：要插入的节点和作为参照的节点。如果参照节点是null，则该方法和appendChild()方法执行相同的操作。如果要插入的节点已经是文档的一部分，则把该节点移动到新位置

referenceNode.parentNode.insertBefore(newNode, referenceNode)

<ul id="list">
  <li id="one">one</li>
  <li id="two">two</li>
</ul>
<button id="btn1">新节点插入到two前</button>
<button id="btn2">two移动到one前</button>
<script>
  var li = document.createElement('li')
  li.innerHTML = 'three'
  btn1.onclick = function() {
    list.insertBefore(li, two)
  }
  btn2.onclick = function() {
    list.insertBefore(two, one)
  }
</script>

insertAfter()

由于不存在insertAfter()方法，如果要把当前节点插入到某个节点的后面，可以用insertBefore()和appendChild()封装方法

function insertAfter(newElement, targetElement){
  var parent = targetElement.parentNode
  if(parent.lastChild == targetElement){
    parent.appendChild(newElement)
    }else{
    parent.insertBefore(newElement,targetElement.nextSibling)
  }
}

<ul id="list">
  <li id="one">one</li>
  <li id="two">two</li>
</ul>
<button id="btn1">新节点插入到one后</button>
<button id="btn2">新节点移动到list后</button>
<script>
  var li = document.createElement('li')
  li.innerHTML = 'three'
  btn1.onclick = function() {
    insertAfter(li, one)
  }
  btn2.onclick = function() {
    insertAfter(li, list)
  }

  function insertAfter(newElement, targetElement){
     var parent = targetElement.parentNode
     if(parent.lastChild == targetElement){
       parent.appendChild(newElement)
       }else{
       parent.insertBefore(newElement,targetElement.nextSibling)
     }
    }
</script>

insertAdjacentHTML()

insertAdjacentHTML()相当于前面三个方法的综合，该方法接受两个参数：插入的位置、要插入的HTML文本

第一个参数必须是下列值之一：

"beforebegin"：在当前元素之前插入一个紧邻的同级元素
"afterbegin" ：在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素
"beforeend"：在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素
"afterend" ：在当前元素之后插入一个紧邻的同级元素

<div id='target' style="border: 1px solid black;">This is the element content</div>
<button>beforebegin</button>
<button>afterbegin</button>
<button>beforeend</button>
<button>afterend</button>
<script>
var btns = document.getElementsByTagName('button')
for(var i = 0 ; i < 4; i++){
  btns[i].onclick = function(){
    var that = this;
    target.insertAdjacentHTML(that.innerHTML,'<span id="test">测试</span>')    
  }
}
</script> 

移除节点

removeChild()

removeChild()方法接收一个参数，即要移除的节点，该方法返回被移除的节点

<div id="box">等待移除的节点</div>
<button id="btn">移除节点</button>
<script>
  btn.onclick = function(){
    document.body.removeChild(box);
  }
</script>

替换节点

replaceChild()

replaceChild()方法接收的两个参数：要插入的节点和要被替换的节点，该方法返回被替换的节点

oldChild.parentNode.replaceChild(newChild, oldChild)

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<button id="btn1">新增节点4替换2</button>
<button id="btn2">原有节点3替换1</button>
<script>
btn1.onclick = function(){
  var div4 = document.createElement('div');
  div4.innerHTML = '4';
  document.body.replaceChild(div4,div2);
}
btn2.onclick = function(){
  document.body.replaceChild(div3,div1);
}
</script>

复制节点

cloneNode()

cloneNode方法用于克隆一个节点。它接受一个布尔值作为参数，表示是否执行深复制。在参数为true时，执行深复制，也就是复制节点及整个子节点树。在参数为false的情况下，执行浅复制，即复制节点本身。若参数为空，相当于false

注意： cloneNode()方法不会复制添加到DOM节点中的JavaScript属性，例如事件处理程序等

<ul id="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
<script>
  var list = document.getElementById('list')

  var deepList = list.cloneNode(true)
  console.log(deepList.children.length) // 3

  var shallowList = list.cloneNode()
  console.log(shallowList.children.length) // 0
</script>