一.节点属性
1.通用属性
节点.nodeName 查看节点名称
元素节点返回标签名 文本节点返回#text
节点.nodeType 查看节点类型 元素节点返回1 文本节点返回3 属性节点返回2
节点.nodeValue 查看节点的值
元素节点返回null 文本节点返回文本内容 属性节点返回属性值
2.标准属性
DOM对象集合了HTML标签可解析的标准属性座位节点对象的属性
标准属性可以直接通过节点对象直接操作 (节点对象.标准属性)
3.盒子属性
元素离父级的左侧距离
节点对象.offsetLeft
元素离父级的顶部距离
节点对象.offsetTop
元素在页面中的宽度(含边框)
节点对象.offsetWidth
元素在页面中的高度(含边框)
节点对象.offsetHeight
元素在页面中的宽度(不含边框)
节点对象.clientWidth
元素在页面中的高度(不含边框)
节点对象.clientHeight
容器水平滚动的距0离
节点对象.scrollLeft
容器垂直方向滚动的距离
节点对象.scrollTop
页面视口区域大小
1.window.innerWidth,window.innerHight
2.document.documentElement.clientHeight,document.documentElement.clientWidth
4.节点内容
节点对象.innerHTML 在所有父级节点下的所有子节点
节点对象.innerText 在父级节点下的所有文本节点
5.自定义属性
节点.getAttribute() 读取节点属性
节点.setAttribute(属性) 设置节点属性
节点.removeAttribute(属性) 删除节点的属性
节点.hasAttribute(属性) 检测节点是否存在某属性
二.节点方法
1.查询接口
节点对象.getElementsByTagName(标签名) 查询节点对象下面所有(标签名)标签的元素集合
节点对象.getElementsByClassName(标签名) 查询node下面所有类名为(标签名)的元素集合
node.querySelector(选择器) 按CSS样式查询，返回第一个节点
node.querySelectorAll(选择器) 按CSS样式查询，返回所有节点集合
2.节点插入
节点对象.appendChild(node) 往节点对象中最后一个位置加node节点
节点对象.insertBefore(node, 子节点对象) 往节点对象的子节点对象前插入node节点
3.节点删除
节点对象.removeChild(node) 删除节点对象中的node节点
4.节点替换
父节点对象.replaceChild(新子节点,旧子节点) 将节点对象的旧子节点替换成一个新子节点
5.节点克隆
节点对象.cloneNode() 克隆一个节点,只克隆直接子级节点对象,里面的内容不复制
节点对象.cloneNode(true) （深度）克隆一个节点,子级节点对象的内容也复制
6.检测节点
节点对象.hasChildNodes(子节点) 检测节点是否含有子节点，包括空白节点
三.关联查找
节点对象.parentNode 节点对象的父节点
节点对象.childNodes 节点对象所有子节点
节点对象.children 节点对象所有子元素
节点对象.firstChild 节点对象的第一个子节点
节点对象.firstElementChild 节点对象的第一个子元素
节点对象.lastChild 节点对象的最后一个节点
节点对象.lastElementChild 节点对象的最后一个元素
节点对象.nextSibling 节点对象的下一个兄弟节点
节点对象.nextElementSibling 节点对象的下一个兄弟元素
节点对象.previousSibling 节点对象的前一个兄弟节点
四.写入style样式
html标签中集合了style的标准属性因此可以使用 DOM.style访问样式，注意它只能访问使用style定义的内联样式，而不能访问内部和外链样式，且访问样式需要使用驼峰替代"-"
当CSS样式较多时，可以使用with
with (标签名.style) {属性1="属性值";属性2="属性值"}
或者用节点对象.cssText方法,以CSS样式的方式写入,用分号分割
节点对象.cssText= "属性1:属性值1;属性2:属性值2"
五.获取CSS的计算样式
正常只能获取到内部样式，通过 getComputedStyle函数可以获取到CSS样式
getComputedStyle(标签名)
想要输出标签中的某个属性直接
getComputedStyle(标签名,"属性")
