DOM是什么
DOM(document object model)文档对象模型。
浏览器根据DOM模型，将结构化文档如（HTML和XML）解析成有结构的节点树。
可以给这些节点添加CSS来进行渲染
所有的节点都有对外的接口。Javascript通过DOM这个接口来操作网页
节点
DOM的最小组成单位，构成DOM树的最小基本单位
节点类型
Document //整个文档的顶层节点
DocumentType //doctype 标签
Element // 由HTML标签构成的节点
Atribute //标签元素的属性构成
text //由HTML标签里的文本，和标签之间的文本构成
comment //注释节点
fragment //不在节点树上，可以包含节点片段
fragment节点
//语法
document.createDocumentFragment
DocumentFragment是DOM节点，但不是主DOM树的一部分。在DOM树中，DocumentFragment会被其拥有的孩子替代，插入DocumentFragment时不会引起页面回流，会有性能优化的作用
属性
所有节点对象都是浏览器内置的NODE对象的实例，继承了Node对象的属性和方法
节点属性
以下如果没有的话，都返回null
node类：返回包括文本节点（标签之间的空格也是文本节点）注释节点
Node.nodeName 和 Node.nodeType
返回节点名称和节点类型
Node.baseURI
返回当前网址路径
node.nextSibling
node.previousSibling
node.parentNode
node.childNodes //可以通过后面加序号的方式访问子节点。node.childNodes[0]
node.firstChild
node.lastChild
Node.appendChild()//接受一个节点对象做为参数，作为最后一个子节点，将其插入到当前节点，如果参数节点是DOM中已经存在的节点，此方法会将其从原来的位置移动到新位置
Node.hasChildNodes()//不必传递参数，返回true 或 false 判断是否有子节点
Node.cloneNode()// 参数为true时，克隆元素里面的内容
Node.insertBefore()
//返回被插入的新节点
Node.removeChild()接受一个子节点作为参数，用于从当前节点移除该子节点
//回被移除的子节点
Node.replaceChild()它接受两个参数，第一个参数是用来替换的新节点，第二个参数将要被替换走的子节点
//返回被替换走的那个节点
Node.contains()//Node.contains方法接受一个节点作为参数，返回一个布尔值，表示参数节点是否为当前节点的后代节点
对应的有：
Element.nextElementSibling
Element.previousElementSibling
Element.parentElement
Element.firstElementChild
Element.lastElementChild
Element节点
document.documentElement // html元素
document.body //body元素
Element.attributes //返回属性集合的类数组对象
Element.id //可读写
Element.src
Element.href
Element.title
Element.tagName //只读
Element.innerHTML
Element.outerHTML
Element.className //返回字符串
Element.classList //返回类数组对象
Element.classList对象的方法：
add()：增加一个class。
remove()：移除一个class。
contains()：检查当前元素是否包含某个class。
toggle()：将某个class移入或移出当前元素。
item()：返回指定索引位置的class。
toString()：将class的列表转为字符串。
//生成节点
document.createElement()
document.createTextNode()
//插入节点
Node.appendChild()
Node.insertBefore()
//删除节点
Element.remove()
//操作属性
Element.getAttribute()
Element.setAttribute()
Element.hasAttribute()
Element.removeAttribute()
//style对象
ele.style.background='yellow' //等价于
ele.setAttribute('style','background:yellow')
获取Element的属性
方法一：直接用.
ele.属性名（获取class需要 .className）
方法二：
ele.getAttribute(属性名)
在容器的开头或者结尾插入元素
var ct = document.querySelector('.ct');
var li=document.createElement('li');
li.innerText='内容';
ct.insertBefore(li,ct.firstElementChild) //开头插入
// 或者
ct.insertBefore(li,ct.firstChild)
ct.appendChild(li) //结尾插入
盒状模型相关属性
- 获取滚动条距离
Element.scrollTop Element.scrollLeft
可读写 ，常用的是
document.body.scrollLeft
document.body.scrollTop
JQ写法
$(window).scrollTop()
$('body').scrollTop()
- 获取元素的宽高
clientWidth scrollWidth offsetWidth
以下三种方法都包括内容区和padding
Element.clientHeight Element.clientWidth
不包括border，margin，溢出部分
\
Element.scrollHeight Element.scrollWidth
包括溢出部分。
不包括border，margin
\
Element.offsetHeight，Element.offsetWidth
包括内容区Padding，溢出部分 Border，不包括margin
- 获取当前视窗的宽高
window.innerWidth// 浏览器视口（viewport）宽度（单位：像素），如果存在垂直滚动条则包括它
document.documentElement.clientWidth // 不包括滚动条
document.documentElement.clientHeight // 不包括滚动条
JQ写法
$(window).height()
- 获取网页的总宽高
// 网页总高度
document.documentElement.offsetHeight
document.documentElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight
\
// 网页总宽度
document.documentElement.offsetWidth
document.documentElement.scrollWidth
document.body.offsetWidth
document.body.scrollWidth
- 获取元素的坐标
// 网页元素左上角的网页横坐标
Element.getBoundingClientRect().left + document.documentElement.scrollLeft
\
// 网页元素左上角的网页纵坐标
Element.getBoundingClientRect().top + document.documentElement.scrollTop
