JS 节点对象

1.DOM节点对象

1.dom角度:
整个html文档看作一个文档对象document,每个html标签元素看作dom节点对象，
每个html标签元素的内容、属性也被看作是dom节点对象=> html文档中所有元素都被看作是dom节点对象

2.dom节点对象分类

• html标签元素
  元素节点
• 标签内容
  文本节点
• 标签属性
  属性节点

3.层次结构

元素节点之间有空白的文本节点

lastchild：最后一个子节点
frstchild：第一个子节点
parentNode：父节点
nextSibling：下一个兄弟节点
previoussibling：上一个兄弟节点
childNodes:所有的子节点

父元素节点：parentElement
所有子元素节点：children
下一个兄弟元素节点：nextElementsibling
上一个兄弟元素节点：previousElementsibling
父节点的第一个子元素节点：firstElementChild
父节点的最后一个子元素节点lastElementchildi

非常规节点

获取根节点

document.documentElement//获取html根节点
document.body//获取body节点
document.head//获取head

4.操作DOM节点

1.创建节点

createElement :用于创建一个元素节点
//创建—个div元素节点
var oDiv = document.createElement( 'div ')
console.log(oDiv) //<div></ div>
。创建出来的就是一个可以使用的div元素
createTextNode :用于创建─个文本节点
//创建—个文本节点
var oText = document.createTextNode( '我是一个文本')
console.log(oText) //“我是—个文本”

2.加入节点

appendChild：是向一个元素节点的末尾追加一个节点
insertBefore：向某一个节点前插入一个节点

3.删除节点

1.removeChild：移除某一节点下的某一个节点
语法︰父节点.removeChild(要移除的字节点)
var oDiv = document.querySelector( 'div ')
var oP= oDiv.querySelector("p")
//移除div 下面的p标签
oDiv.removeChild(oP)
console.log(oDiv)//<div></div>
2.remove: 移除当前节点
语法：Div.remove() 移除Div节点

3.替换节点

replaceChild：将页面中的某一个节点替换掉
语法∶父节点.replaceChild(新节点，旧节点)

4.复制节点

语法： 节点.cloneNode(true|false)
          true: 复制节点包含节点下所有子节点
          false: 复制当前节点