dom那些事儿

一、dom常识
1、style属性
style对象的属性值都是字符串，设置时必须包括单位，但是不含规则结尾的分号。比如，elem.style.width不能写为100，而要写为100px。

2、getComputedStyle
获取元素的高度。

var elem = document.getElementById('container');
var hValue = window.getComputedStyle(elem, null).getPropertyValue('height');
上面代码得到的height属性，是浏览器最终渲染出来的高度，比其他方法得到的高度有更大的可靠性。
window.getComputedStyle(test, ':before').content;

3、createTextNode和innerHTML区别

var p=document.createElement("p");
p.className="message";
p.innerHTML="<b>I love js</b>";
document.body.appendChild(p);

innerHTML属于HTML Dom，会将文本中包含的HTML代码实现效果。

var p=document.createElement("p");
p.className="message";
var textnode=document.createTextNode("<b>I love js</b>");
p.appendChild(textnode);
document.body.appendChild(p);

createTextNode属于XML Dom，只是纯粹创造了文本节点，所以返回的效果也就是纯文本内容。

4、innerHTML，outerHTML，innerText，outerText的区别

//innerHTML
设置或获取位于对象起始和结束标签内的HTML，输出<div id="div"></div>之间的内容；
//outerHTML
设置或获取对象及其内容的HTML形式，连同<div id="div"></div>和它们之间的内容一起输出；
//innerText
设置或获取位于对象起始和结束标签内的文本，输出的内容都是网页上应该正常输出的；
//outerText
设置(包括标签)或获取(不包括标签)对象的文本，输出的内容都是网页上应该正常输出的。

二、dom操作
1、创建新节点

createDocumentFragment()    //创建一个DOM片段
createElement()   //创建一个具体元素
createTextNode()   //创建一个文本节点

2、添加节点

appendChild()

3、插入节点

insertBefore()

4、复制节点

cloneNode() 

5、移除节点

removeChild()

6、替换节点

replaceChild()

7、查找节点

getElementsByTagName()    //通过标签名称
getElementsByName()    //通过元素的Name属性的值
getElementById()    //通过元素Id，唯一性