JavaScript操作dom总结

最近一直忙于新项目，真的挺费心的 从产品原型、ui、接口、真心挺费心的。好多地方都不完善！（i want say F word!!）
基础的东西又需要重新看看了！

Node

Node.NodeType 节点的类型

1 // element 元素节点
2 // attribute 属性节点
3 // text 文本节点
8 // comment 注释节点
9 // document文档节点
10 // DocumentType节点
11 // DocumentFragment节点

Node.nodeName 元素标签名

P SCRIPT BUTTON 如果是标签都是大写，如果是文字返回#text

Node.tagName 标签名

P BUTTON SCRIPT 如果是文字返回undefined

Node.nodeValue 属性设置或返回指定节点的节点值

用标签包裹的返回null

Node.parentNode 形式返回指定节点的父节点

Element类型

Element提供了对元素标签名，子节点和特性的访问，我们常用HTML元素比如div，span，a等标签就是element中的一种。Element有下面几条特性：
（1）nodeType为1
（2）nodeName为元素标签名，tagName也是返回标签名
（3）nodeValue为null
（4）parentNode可能是Document或Element
（5）子节点可能是Element，Text，Comment，Processing_Instruction，CDATASection或EntityReference

Text类型

Text表示文本节点，它包含的是纯文本内容，不能包含html代码，但可以包含转义后的html代码。Text有下面的特性：
（1）nodeType为3
（2）nodeName为#text
（3）nodeValue为文本内容
（4）parentNode是一个Element
（5）没有子节点

Attr类型

Attr类型表示元素的特性，相当于元素的attributes属性中的节点，它有下面的特性：
（1）nodeType值为2
（2）nodeName是特性的名称
（3）nodeValue是特性的值
（4）parentNode为null

Comment类型

Comment表示HTML文档中的注释，它有下面的几种特征：
（1）nodeType为8
（2）nodeName为#comment
（3）nodeValue为注释的内容
（4）parentNode可能是Document或Element
（5）没有子节点

Document

Document表示文档，在浏览器中，document对象是HTMLDocument的一个实例，表示整个页面，它同时也是window对象的一个属性。Document有下面的特性：
（1）nodeType为9
（2）nodeName为#document
（3）nodeValue为null
（4）parentNode为null
（5）子节点可能是一个DocumentType或Element

Node.NodeList

NodeList 对象都是个实时集合, 如果节点数发生变化，对象NodeList也可能变化
NodeList不是数组

var childNodes = document.body.childNodes;
console.log(childNodes.length); // 如果假设结果是“2”
document.body.appendChild(document.createElement('div'));
console.log(childNodes.length); // 此时的输出是“3”

节点的查找

document.getElementById('demo')

根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个

document.getElementsByClassName('red blue')

根据类名查找元素，多个类名用空格分隔，返回一个HTMLCollection

document.getElementsByTagName('span')

根据标签查找元素，*表示查询所有标签，返回一个HTMLCollection

document.getElementsByName('name')

根据元素的name属性查找，返回一个NodeList

document.querySelector('.class')

根据css选择器 匹配到多个的时候返回第一个

document.querySelectorAll('.class')

根据css选择器 匹配到返回NodeList

document.forms

返回当前文档中的

元素的一个集合，返回一个HTMLCollection

节点的创建

document.createElement('div')

创建元素,它只是创建出来，并未添加到html文档中，要调用appendChild或insertBefore等方法将其添加到HTML文档中。

document.createTextNode('我是文本')

创建文本节点

var node = document.createTextNode('我是文本')
document.body.appendChild(node)

cloneNode 克隆一个节点

克隆一个节点：node.cloneNode(true/false)，它接收一个bool参数，用来表示是否复制子元素。
克隆节点并不会克隆事件，除非事件是用<div onclick="test()"></div>这种方式绑定的，用addEventListener和node.onclick=xxx;方式绑定的都不会复制。

var from = document.getElementById("test");
var clone = from.cloneNode(true);
clone.id = "test2";
document.body.appendChild(clone);

createDocumentFragment

本方法用来创建一个DocumentFragment，也就是文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，大量操作DOM时用它可以大大提升性能

修改节点

appendChild

parent.appendChild(child) 

child追加parent的子节点到最后面

insertBefore

parentNode.insertBefore(newNode, refNode) // refNode 是必传， 如果refNode是undefined 或 null, 则会将节点添加到末尾

将某个节点插入到另外一个节点的前面

removeChild

删除指定的子节点并返回子节点

var delete = parent.removeChild(node) // 指向被删除的节点，存在内存中，可以对齐进行下一步操作

replaceChild 用于将一个节点替换成另一个节点

parent.replaceChild(newChild, oldChild)

节点关系

父关系

parentNode 每个节点都有一个parentNode属性，表示元素的父节点

parentElement 返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element元素，如果不是返回null

子关系

children 返回一个实时的HTMLCollection, 子节点都是Element

childNode 返回一个实时的NodeList, 表示元素的子节点列表，子节点会包含文本节点、注释节点

firstChild 返回第一个子节点，不存在返回null,

lastChild 返回最后一个子节点，不存在返回null

兄弟关系

previousSibling 节点的前一个节点，不存在返回null,可能拿到文本节点或者注释节点

nextSibling 节点的后一个节点，如果不存在返回null, 也可能拿到文本节点或者注释节点

previousElementSibling 返回前一个元素节点，前一个节点必须是Element

nextElementSibling 返回后一个元素节点，后一个节点必须是Element

元素属性

element.setAttribute(name, value) 给元素设置属性

getAttribute 返回特定名相应的特性值，不存在返回null

var value = element.getAttribute('id')

样式相关的

直接修改

elem.style.color = 'red'
elem.style.setProperty('font-size': '16px')
elem.style.removeProperty('color')

动态添加样式规则

var style = document.createElement('style')
style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}'
document.head.appendChild(style)

window.getComputedStyle

通过element.style.xxx只能获取到内联样式，借助window.getComputedStyle可以获取应用傲元素上的所有样式

var style = window.getComputedStyle(element, [pseudoElt])
var style = window.getComputedStyle(elem,null).getPropertyValue("height")

getBoundingClientRect

getBoundingClientRect用来返回元素的大小以及相对于浏览器可视窗口的位置

var clientRect = element.getBoundingClientRect();