1.dom节点
每个html标签，标签属性，内容，注释...都被看做dom节点
2.节点分类
元素节点 我们通过getElementBy... 获取到的都是元素节点
属性节点 我们通过getattribute获取的就是元素的属性节点
文本节点 我们通过innerText 获取到的就是元素的文本节点
3.DOM节点类型
1.整个文档是一个文档节点
2.每个 HTML 元素是元素节点
3.HTML 元素内的文本是文本节点
4.每个 HTML 属性是属性节点
5.注释是注释节点
4.节点树形结构
document
html
head body
- getElement系列
- queryselector系列
- 层次结
在HTML文档中，html就是根节点。
parentElement 父节点 一个节点之上的节点就是该节点的父节点，例如ul的父节点就是body，body的父节点就是html。
children 子元素节点 一个节点之下的节点就是该节点的子节点，例如ul就是body的子节点。
firstElementChild
lastElementChild
nextElementSibling
previousElementSibling
- 非常规节点获取
document.body
使用js代码操作节点
创建节点
var div1 = document.createElement('div') //创建元素节点
var text1 = document.createTextNode('teat') //创建文本节点
var attr1 = document.createAttribute('id') //创建属性节点
添加节点
appendChild：是向一个元素节点的末尾追加一个节点
父元素.appendChild.(要插入的子节点)
insertBefore：向某一个节点前插入一个节点
父元素.insertBefore.(要插入的子节点,插入在哪一节点之前)
移除节点
父节点.removeChild(子节点)
节点.remove()
替换节点
父节点.replaceChild(新节点，旧节点)
复制节点
语法：
节点.cloneNode(true|false)
true: 复制节点包含节点下所有子节点
false: 复制当前节点
获取元素的样式
var divEle = document.querySelector('div')
console.log(divEle.style.width); //获取行内样式
var divEle = document.querySelector('div')
console.log(window.getComputedStyle(divEle).width)//获取非行内样式，非IE使用
获取元素尺寸（ 宽高 ）
function testSize() {
var divEle = document.querySelector('div') //获得这个节点
console.log('内容宽', window.getComputedStyle(divEle).width);
console.log('内容宽+padding', divEle.clientWidth);
console.log('内容宽+padding+border', divEle.offsetWidth);
}
testSize()
