学习js的第十一天【DOM节点对象】

一、DOM节点对象

1.<h2 id="title">元素一</h2>就是一个节点对象：从dom角度，整个html文档就是一个对象（document文档对象），文档中每个标签元素，以及元素的内容属性，样式都是节点对象。

2.节点对象分类：元素节点、文档节点、属性节点、document文档节点、注释节点

3.节点结构：树形结构

4.节点关系：父子关系    兄弟关系

5.获取元素节点：

获取元素节点：getElement系列/querySelector系列

层次关系获取节点：

prentNode:返回节点的父节点

childNodes:返回子节点集合，chileNodes[i]

firstChild:返回节点的第一个子节点

lastchild:返回节点的最后一个子节点

nextSibling:下一个节点

previousSibling:上一个节点

children:获取某一节点下所有的子一级 元素节点

层次关系获取元素节点：

firstElementChild:返回节点的第一个子节点

lastElementChild:返回节点的最后一个子节点

nextElementSibling:下一个节点

previousElementSibling:上一个节点

获取元素节点的所有属性节点: attributes

 非常规节点获取：

获取html根节点：document.documentElement

获取body节点：document.body

获取head：document.head

节点属性：判断当前节点是什么类型

动态操作dom节点：

1.创建dom节点：

创建节点（标签）：document.createElement('div')

添加文本节点：document.createTexNode('元素一')

2.添加dom节点：父节点.appendchild(子节点)

<div class="root"></div>
function test(){
var pEle = document.createElement('p')   //创建p这个标签
var textNode = document.createTexNode('元素一')    //创建要向p标签里添加内容
pEle.appendchild(textNode)    //向p标签里添加内容
var divEle = document.querySelector('root')
divEle.appendChild(pEle)    //向div中追加刚刚创建的p标签

 3.插入：父节点.insertBefore(新子节点，原子节点)

var oldEle = document.firstElementChild  //创建第一个子节点
divEle.insertBefore(pEle.oldEle)

4.删除节点：父节点.removeChild(子节点)/节点.remove()

divEle.removechild(oldEle)

5.替换节点：父节点.replacechild(新节点，旧节点)

6.复制节点：节点.cloneNode(ture/false)

ture会把要复制的元素的所有东西复制过来

false返回复制的新节点

获取元素的偏移量：相对于浏览器窗口

1.离顶偏移量：元素.offsetTop

2.距离左边偏移量：元素.offsetleft

如果给元素设置了定位，偏移量是相对于父元素的偏移量

获取元素的宽高：

offset.width=内容width+padding+border

client.width=内容width+padding

window.getComputedStyle(divEle).width=内容width