DAY11JS学习--DOM节点对象、操作节点

一、dom节点对象

1、从dom角度，整个html文档就是一个对象（documentwe文档对象），文档中每个标签元素、元素内容、属性都是节点对象

2、节点对象分类

元素节点、文本节点、属性节点、document文档节点、注释节点

3、节点结构

树形结构

4、节点关系

父子关系、兄弟关系

二、获取节点

1、getElement系列   querySelector系列

2、innerHTML

3、层次结构

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

（1）父节点

所有子节点 childNodes

第一个子节点  firstChild 

最后一个子节点 lastChild

元素子节点 children

第一个元素节点 firstElementChild

（2）兄弟

下一个子节点  nextSibling

上一个子节点 previousSibling

（3）非常规节点获取

获取html节点

document.documentElement

获取body节点

document.body

获取head节点

document.head

四、节点属性

五、动态操作Dom节点

1、创建节点

document.creatElement('div')----<div></div>

document.creatTextNode('元素一')

2、添加dom节点

父节点.appendChild(子节点)

父节点.insertBefore(x新节点,原节点)-----在节点前面添加节点

3、删除节点

父节点.removeChild(要删除的子节点)

当前节点.remove()

4、替换节点

父节点.replaceChild(新节点,原节点)

5、复制节点

节点.cloneNode(true)  返回克隆新节点  true---克隆节点里面嵌套节点

6、获取元素偏移量

（1）元素无定位，获取元素边框外侧到页面内测距离

（2）元素有定位，获取元素边框外侧到父级边框内测的距离

标签.offsetLeft

标签.offsetTop

7、获取元素尺寸/宽高

（1）内容宽高

window.getComputedStyle(标签).width/height

（2）内容+内边距宽高

标签.clienWidth/clienHeight

（3）内容+内边距+border

标签.offsetWidth/offsetHeight