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的频繁操作。