JS 之DOM对象(1)
介绍DOM1中底层的一些属性和方法。
节点操作
appendChild()
parentNode.appendChild(newNode) 在parentNode节点的最后插入newNode
insertBefore()
parentNode.insertBefore(newNode,someNode) 在parentNode节点里面的someNode节点前插入新节点newNode
replaceChild()
parentNode.replaceChild(newNode,someNode) 在parentNode节点里面把someNode节点替换成newNode
removeChild()
parentNode.removeChild(someNode) 在parentNode节点里删除指定的节点someNode
cloneNode()
someNode.cloneNode(true) 创建someNode这个节点的副本，传一个参数，布尔值，true表示深复制，复制整个节点树。false表示浅复制，只复制节点本身。节点复制后，还需要使用appendChild,insertBefore等方法额外添加文档中。
document对象
document.documentElement属性指html元素
document.body属性指body元素
document.url 页面完整的url
document.domain 页面的域名
document.referrer 链接到当前页面的之前那个页面的url
document.getElementById(id) 根据ID查找元素，页面ID需唯一
document.getElementsByClassName(name) 查找class="name"的元素列表，返回HTMLCollection对象
document.getElementsByTagName(name) 根据标签名name查找的元素列表，返回HTMLCollection对象
document.getElementsByName(name) 根据name=“name”查找的元素列表，返回HTMLCollection对象
document.forms 文档中所有的表单
document.images 文档中所有的img标签
document.links 文档中所有带href的a标签
document.write() 文档中写入内容
Element类型
eg:elem为某个元素
elem.id 元素elem在文档中的id
elem.title 元素elem的title属性
elem.className 元素elem的class名称
elem.getAttribute(name) 获得元素elem的属性名为name的值，自定义属性需要通过getAttribute()方法来获得，其他情况通过使用对象的属性来获得，比如elem.title等。
elem.setAttribute(name,'value') 给元素elem设置属性为name的值，值为value
elem.removeAttribute(name) 彻底删除元素elelm的特性name
elem.childNodes 指该元素elem的所有子节点
elem.children 指该元素elem的所有元素子节点
document.createElement(tagName) 创建标签名为tagName的新元素节点
document.createTextNode(text) 创建新的文本节点,文本内容为经过html编码的text
elem.normalize() 将相邻文本节点合并的方法
elem.splitText(index) 与normalize()方法相反，将文本节点分开的方法。index为分开的文本的索引值。
DocumentFragment类型
DocumentFragment指文档片段，在文档中没有对应的标记，不占用额外资源。
document.createDocumentFragment() 创建文档片段
内容操作
elem.innerText 指该元素的所有文本内容
elem.textContent 跟innerText一样，兼容firefox,safari,opera,chrome
elem.innerHTML 返回当前元素elem的所有子节点的html代码
在IE中，当用innerHTML插入script或style标签时，需要在前面加上标签，使其由作用域外的元素变为作用域内的元素。如：div.innerHTML = '<input type="hidden"><script defer>alert(\'aa\')</scri' + 'pt>';
在chrome，safari中，需要将style标签添加到head元素中。document.head.appendChild(div);
elem.outerText
elem.outerHTML 写入时，这两个属性会修改调用它的元素
创建table表格
eg:
//创建table
var table = document.createElement('table');
table.border = 1;
table.width = '100%';
//创建tbody
var tbody = document.createElement('tbody');
table.appendChild(tbody);
//创建第一行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[0].appendChild(document.createTextNode('cell 1.1'));
tbody.rows[0].cells[1].appendChild(document.createTextNode('cell 1.2'));
//创建第二行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[0].appendChild(document.createTextNode('cell 2.1'));
tbody.rows[1].cells[1].appendChild(document.createTextNode('cell 2.2'));
DOM操作往往是JS程序开销中最大的部分，包括查询，重排重绘等，所以应尽量避免DOM的频繁操作。
