DOM

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

DOM