其他节点选择器,节点的操作,DOM的属性操作,样式的操作,容器尺寸类操作

一.其他节点选择器
因为其他节点得特殊性，无法单独命名，所以没有直接选择器，都是关系选择器
属性不参与关系（attributes不是关系选择器）
1.单个对象
firstChild，lastChild,previousSibling,nextSibling
2.数组
childNodes,attributes
DOM中所有得数组都是伪数组，只能使用索引+长度，不能使用数组的操作方法
二，节点的操作

1.节点的类型-nodeType
元素节点：1
文本节点：3
注释节点：8
根节点：9
属性节点：2
2.节点的名字-nodeName
元素节点：大写标签名
文本节点：#text
注释节点：#comment
根节点：#document
属性节点：属性名
3.节点的值-nodeValue
元素节点：null
文本节点：文本内容
注释节点：注释内容
根节点：null
属性节点：属性值
4.过滤空白节点
配合节点的属性和遍历，判断出所需节点
三.DOM的属性操作
1.html的属性-写在html标签内的属性、
内置：
1.可以使用对象的操作语法，进行操作
除了一些特殊的属性，都是既可以被获取又可以被设置的
2.可使用：get/set/removeAttribute系列的方法
自定义：
getAttribute() 获取
setAttribute()设置（添加或者修改）
removeAttribute()删除
2.js的属性-在js中将元素作为对象使用时的属性
内置：对象的操作语法
innerHTML
innerText
tagName
firstChild
自定义：对象的操作语法
3.style：
每个元素，默认情况下，具有所有的样式属性，只是有值或没值的区别：
console.log(obox.style);
四.样式的操作
1.获取
只能获取行内：元素.style.样式名
既能获取行内，又能获取非行内；
正常浏览器：getComputedStyle(元素, false).样式名
IE浏览器：元素.currentStyle.样式名
2.设置
元素.style.样式名
obox.style.border=“solid 10px black”;
obox.style.background=“red”;
3.元素看得见的区域包括哪些部分：内容+padding+border
五.容器尺寸类操作

1.元素.clientWidth
表示cont+padding的宽度
2.元素.offsetWidth
表示cont+padding+border
3.元素.scrollWidth
表示cont+padding+可滚动的距离
4.元素.offsetLeft
相对于包含块偏移的位置
包含块：相对于当前定位元素最近的具有定位的父级
5.元素offsetTop
相对于包含块偏移的位置
6.元素.scrollLeft-即可获取，又可设置
滚走了的距离
7.元素.offsetParent:
offsetParent() 方法返回最近的祖先定位元素。

DOM的学习路线：选择器->元素节点(元素的操作)->其他节点选择器->节点操作->属性节点->属性操作->style属性->css样式->容器尺寸类操作