节点：每个html标签、标签属性、内容、注释等都可以被看做dom节点，dom就是html结构中一个一个节点构成
dom节点分类：
1.整个文档是一个文档节点
2.每个HTML元素是元素节点
3.HTML元素内的文本是文本节点
4.每个HTML属性是属性节点
5.注释是注释节点
dom节点树形结构：
dom节点关系：
根节点 ： 在HTML文档中，html就是根节点。
父节点 ： 一个节点之上的节点就是该节点的父节点，例如ul的父节点就是body, body的父节点就是html。
子节点 ： 一个节之下的节点就是该节点的子节点，例如uI就是body的子节点。
兄弟节点：如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。
例如所有Ii是兄弟节点，因为他们拥有相同的父节点ul
获取元素节点：getElement系列 和 querySelector系列
层次关系获取节点：
children:获取某一节点下所有子一级元素节点，（伪数组）
层次关系获取元素节点：
获取元素节点的所有属性节点：attributes
层次图：
非常规节点获取：
获取html根节点：document.documentElement
获取body节点：document.body
获取head节点：document.head
节点属性：
操作dom节点：
创建元素节点：createElement
创建文本节点：createTextNode
创建属性节点：createAttribute
给元素节点设置属性节点：setAttributeNode
向元素节点的末尾追加一个节点：appendChild
向某一节点前插入一个节点：insertBefore
移除某一节点的子节点：removeChild
移除当前节点：remove
将某一节点替换掉：replaceChild
语法：父节点.replaceChild(新节点，旧节点)
复制节点：cloneNode
语法：节点.cloneNode(true|false)
true:复制节点包含节点下所有子节点
false:复制当前节点
获取元素的非行内样式：getComputedStyle(非IE使用)
currentStyle(IE使用)
<style>
div{
width:100px;
}
</style>
<body>
<div>
</div>
</body>
<script>
let divEle=document.querySelector('div')//获取div
console.log(divEle.getComputedStyle.width)//获取div样式
</script>获取元素偏移量：
offsetLeft和offsetTop:
●获取的是元左边的偏移量和，上边的偏移量
●没有定位的情况下
。获取元素边框外侧到页面内侧的距离
●有定位的情况下
。获取元素边框外侧到定位父级边框内侧的距离(其实就是我们写的left和top值)
offsetWidth和offsetHeight:
●获取元素[内容宽高+ padding宽高+ border宽高]的和
获取元素尺寸（宽高）三种方式：
offsetWidth = 内容width + padding + border
clientWidth = 内容width + padding
window.getComputedStyle(divEle).width = 内容width
坑点：
document.getElementByClassName会更新旧的查询结果
document.querySelector则不会
比如: document.querySelectorAll('.li1')
=> 获取所有类名为li1的元素，长度为3
=> 动态添加一个类名li1元素，长度还是为3
861
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
