JavaScript - 节点

节点操作

对于页面上标签的操作

获取节点

第一类: 获取元素节点
=> 获取非常规元素节点
-> html: document.documentElement
-> head: document.head
-> body: document.body
=> 获取常规元素节点
-> document.getElementById()
-> document.getElementsByClassName()
-> document.getElementsByTagName()
-> document.querySelector()
-> document.querySelectorAll()

第二类: 获取节点(包括但不限于元素节点)
=> 注意: 全都是属性, 没有方法

1、childNodes
语法：父节点.childNodes
得到：该父节点下的所有子一级节点
2、children
语法：父节点.children
得到：该父节点下的所有子一级元素节点
3、firstChild
语法：父节点.firstChild
得到：该父节点下的第一个子节点
4、firstElementChild
语法：父节点.firstElementChild
得到：该父节点下的第一个字元素节点
5、lastChild
语法：父节点.lastChild
得到：该父节点下的最后一个子节点
6、lastElementChild
语法：父节点.lastElementChild
得到：该父节点下的最后一个字元素节点
7、previousSibling
语法：节点.previousSibling
得到：该节点的上一个兄弟节点(上一个哥哥节点)
8、previousElementSibling
语法：节点.previouesElementSibling
得到：该节点的上一个兄弟元素节点(上一个哥哥元素)
9、nextSibling
语法：节点.nextSibling
得到：该节点的下一个兄弟节点(下一个弟弟节点)
10、nextElementSibling
语法：节点.nextElementSibling
得到：该节点的下一个兄弟元素节点(下一个弟弟元素)
11、parentNode
语法：节点.parentNode
得到：该节点的父节点
12、parentElement
语法：节点.parentElement
得到：该节点的父元素节点
13、attributes
语法：节点.attributes
得到：该节点的所有属性节点

创建节点

指用 js 创建出一个节点名，但是没有插入到页面

• 创建元素节点
  document.createElement()
  返回值：一个被创建出来的标签
  注意：可以自定义标签名

• 创建文本节点
  document.createTextNode()
  返回值：一个文本节点

• 文档碎片(‘筐’)
  document.createDocumentFragment()

插入节点

指把一个节点放在另一个节点内当作子节点使用

• appendChild
  语法：父节点.appendChild(子节点)
  作用：把子节点插入到父节点内部，并且排列在最后一个的位置

• insert Before()
  语法：父节点.insertBeofre(要插入的子节点, 谁的前面)

删除节点

• remove Child()
  语法：父节点.removeChild(子节点)
  作用：把子节点从父节点内移除

• remove()
  语法：节点.remove()
  作用：把该节点自己干点(自杀)

替换节点

• replaceChild()
  语法：父节点.replaceChild(换上节点, 换下节点)
  作用：在父节点内使用 换上节点 替换掉 换下节点

克隆节点

把某一个节点赋值一份一摸一样的出来
语法：节点.cloneNode(参数)
=> 参数默认是 false, 不克隆后代节点
=> 参数选填是 true, 克隆后代节点
作用：把该节点赋值一份一摸一样的出来