DOM

DOM

HTML根节点。 ##　ｄｏｍ中的自定义属性调用 data－时　调用就为　dataset

el.childNodes 子节点

获取一组元素，不能直接操作获取el下的所有元素，换行也算。包含文本节点

对应子节点：图在文件夹中 常用节点类型：

元素节点 - 1
		属性节点 - 2
		文本节点 - 3
		注释节点 - 8
		文档节点 - 9

子元素：box.children

• 获取到的是子元素(不是标准中的操作)，el下的标签。

• el.lastElementChild el的最后一个子元素

• el.firstElementChild el的第一个子元素

box.childNodes 子节点

父节点：el.parentNode el的父元素（）：

兄弟节点：

• node.nextElementSibling下一个兄弟元素（nextSibling下一个兄弟节点）

• previousElementSibling上一个兄弟元素 （previousSibling 上一个兄弟节点）

添加节点：

object element creatElement（"tagName"）

创建一个元素 元素创建完，不添加到页面中的话，看不到它

parent.appendChild(el):

在parent中追加一个子元素el（将el添加到parent的最末尾）

若操作的是一个已经存在页面中的元素，会把元素从原来的父级下 直接剪切过来。

parentNode.insertBefore(childNode1,childNode2)

往一个节点的指定子节点前边插入一个节点若在对已有元素使用就是剪切

如上：childNode1插入到childNode2前边；

删除节点：

parentNode.removeChild(childNodes):

从一个 节点中删除指定子节点

返回值：被删掉的节点。

offsetParent（定位父级）

位置是根据哪个来计算的 最外层为body。 若没有定位那么他的所有父级都为他的定位父级。

offset：

• offsetWidth/offsetHeight（可视宽高）

• offsetTop/offsetLeft（和定位父级之间的偏移）

el.getBoundingClientRect()

获取元素的盒模型信息 返回值对象

{

　　left 元素左侧相对于可视区左侧的距离

　　top 元素顶部相对于可视区顶部的距离

　　right 元素右侧相对于可视区左侧的距离

　　bottom 元素底部相对于可视区顶部的距离

　　width 可视宽度

　　height 可视高度 }

获取可视区宽高

var width =document.documentElement.clientWidth;//可视区宽度

var height =document.documentElement.clientHeight//可视区高度

client和offset的区别

console.log(box.offsetWidth,box.offsetHeight);// width + padding + border

console.log(box.clientWidth,box.clientHeight);// width + padding console.log(box.offsetLeft,box.offsetTop);

// 和定位父级之间的距离 console.log(box.clientLeft,box.clientTop); // 元素的边框

属性操作的第三种方法

node.getAttribute(attr)

获取元素指定属性名的属性值

node.setAttribute(attr,value)

设置元素指定属性名的属性值

node.removeAttribute(attr)

删除元素指定属性

特点： 可以操作行间自定义的属性 可以获取src、href等的相对地址不能获取写在css表中的属性

区别： 前两种属性操作，获取不到在行间写的自定义属性

节点操作

document.createElement(tagName)
	通过标签名的形式创建一个元素
	
parentNode.appendChild(childNode)
	往一个节点里边添加一个子节点，注意是添加在最后
	
parentNode.insertBefore(childNode1,childNode2)
	往一个节点的指定子节点前边插入一个节点
	如上：childNode1插入到childNode2前边；

parentNode.removeChild(childNodes)
	从一个节点中删除指定的子节点。

parentNode.replaceChild(node,childNode)
	node用来替换的节点，childNodes被替换的子节点
	两个参数都必须写。
	
node.cloneNode(boolean)
	克隆一个节点
	true：克隆元素和元素包含的子孙节点
	flase：克隆元素但不包含元素的子孙节点
	
node.parentNode  父节点 

node.offsetParent 定位父级

node.children 子节点

node.perviousElementSibling
上一个兄弟元素

node.nextElementSibling 下一个兄弟元素

node.firstElementChild（获取node中第一个子元素）

node.lastElementChild（获取node中最后一个子元素）