DOM节点和节点的操作

1、DOM节点

什么叫节点：w3c，页面上所有的内容都可以称为节点，DOM的最小单元就是节点

DOM节点的种类：节点包含一共有12种，本节课就认识5种节点DOM节点

• 标签：元素节点：nodeType 1

• 属性：属性节点：nodeType 2

• 文本：文本节点：nodeType 3

• 注释：注释节点：nodeType 8

• 文档：文档节点：nodeType 9

DOM节点的获取 父节点.childNodes 获取父节点中所有的子节点 父节点.firstChild 获取父节点中第一个子节点 父节点.lastChild 获取父节点中最后一个子节点 节点.previousSibling 获取节点的下一个兄弟节点 节点.nextSibling 获取节点的上一个兄弟节点 节点.parentNode 获取节点的父节点

父节点.children      获取父节点中所有的子元素节点 
节点.firstElementChild 获取父节点中第一个子元素节点
节点.lastElementChild  获取父节点中最后一个子元素节点
节点.previousElementSibling 获取节点的上一个兄弟元素节点
节点.nextElementSibling     获取节点的下一个兄弟元素节点
节点.parentElementNode      获取节点的父元素节点

2、节点的操作

• 创建节点

  • 语法：document.createElement（'标签名'）

  • 返回值：创建好的元素节点

• 追加节点

  • 语法：父节点.appendChild（子节点）

  • 含义：将子节点追加到父节点尾部

• 插入节点

  • 父节点.insertBefore（新节点，旧节点）

• 替换节点

  • 语法：父节点.replaceChild（新节点，旧节点）

• 删除节点

  • 节点.remove（）

  • 父节点.removeChild（）

• 克隆节点

  • 语法：节点.cloneNode（true/false）

  • 作用：克隆出来一个节点

    • true：代表克隆元素本身和元素的子元素及后台

    • false：代表克隆元素本身

<button>追加节点</button>
<button>删除最后一个节点</button>
<button>替换节点(创建一个节点，把最后一个替换掉)</button>
<button>插入节点(插入到3之前)</button>
<button>克隆节点(克隆全部ul，再追加到页面)</button>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
var ul = document.querySelector('ul')
var oBtns = document.querySelectorAll('button')
oBtns[0].onclick = function(){
  // 创建 + 内容 + 追加
  var li = document.createElement('li')
  // ul.children 所以的子元素
  // ul.children.length 所以子元素的长度
  li.innerHTML = ul.children.length + 1;
  ul.appendChild(li)
}
​
oBtns[1].onclick = function(){
  // ul.removeChild(ul.lastElementChild)
  ul.lastElementChild.remove()
}
​
oBtns[2].onclick = function(){
  var li = document.createElement('li')
  li.innerHTML = '替换节点'
  ul.replaceChild(li,ul.children[4])
}
​
oBtns[3].onclick = function(){
  var li = document.createElement('li')
  li.innerHTML = '插入节点'
  ul.insertBefore(li,ul.children[2])
}
​
oBtns[4].onclick = function(){
  var newul = ul.cloneNode(true)
  document.body.appendChild(newul)
}