陈童的博客 » Archivers » 前端技术 » DOM — 修改DOM

From everyinch on 2013-12-06 18:01:50

DOM — 修改DOM

使用DOM创建节点
createElement函数可以用来创建新元素，它以标记名称为参数，并返回该元素的实际DOM引用，没有默认的属性和样式。同时创建的元素必须使用正确的XML命名空间。例如：

[code lang="js"]
function create( elem ) {
return document.createElementNS ?
document.createElementNS( 'http://www.w3.org/1999/xhtml', elem ) :
document.createElement( elem );
}
[/code]

例如，使用这个函数创建一个简单的<div>元素，并添加一些属性：

[code lang="js"]
var div = create("div");
div.className = "items";
div.id = "all";
[/code]

插入元素
第一个函数是 insertBefore，可以在一个子元素前插入一个元素，函数的用法类似于：
parentOfBeforeNode.insertBefore( nodeToInsert, beforeNode);
即：insert第一个元素，before第二个。

第二个函数是 appendChild，用来在父节点中追加子节点，用法：
parentElement.appendChild(nodeToInsert);

在一个元素之前插入元素的函数
[code lang="js"]
function before( parent, before, elem ) {
// 检查是否传入 parent 参数
if ( elem == null ) {
elem = before;
before = parent;
parent = before.parentNode;
}
parent.insertBefore( checkElem( elem ), before );
}
[/code]

为一个元素追加一个子元素的函数
[code lang="js"]
function append( parent, elem ) {
parent.appendChild( checkElem( elem ) );
}
[/code]

before 和 append 的辅助函数
[code lang="js"]
function checkElem( elem ) {
// 如果参数是字符串，则把它转化成文本节点
return elem && elem.constructor == String ?
document.createTextNode( elem ) : elem;
}
[/code]

使用 before 和 append 函数
[code lang="js"]
// 创建一个新的

元素
var li = create("li");
attr( li, "class", "new" );

// 创建文本内容，并添加到

中
append( li, "Thanks for visiting!" );

// 把

元素插入到有序列表的顶端
before( first( tag("ol")[0] ), li );
[/code]
一旦把元素插入到DOM中，就会渲染它。

注入HTML到DOM
直接向文档注入HTML最简便的方法就是innerHTML，假设有个一个空的<ol>元素并需要往里加入<li>，那么代码大致如下：
[code lang="js"]
tag("ol")[0].innerHTML = "

Cats.

Dogs.

Mice.

";
[/code]
这种方法虽然简单，但也有一些问题：
1. XML DOM 中并不存在 innerHTML 方法
2. 使用客户端 XSLT 创建的 XHTML 文档也不存在 innerHTML 方法
3. innerHTML 完全删除了元素内的任何节点，意味着没有像 DOM 方法一样追加或者插入的简便方法
为了弥补第3个问题，需要重写之前的before和append函数，在重写之前，需要建立一个checkElem函数，它可以处理HTML字符串，DOM元素以及DOM元素数组。
[code lang="js"]
function checkElem(a) {
var r = [];
// 如果参数不是数组，则转换为数组
if ( a.constructor != Array ) a = [ a ];

for ( var i = 0; i < a.length; i++ ) {
// 如果是字符串
if ( a[i].constructor == String ) {
// 用一个临时元素来存放HTML
var div = document.createElement("div");

// 注入HTML,转换成DOM结构
div.innerHTML = a[i];

// 提取DOM结构到临时的 div 中
for ( var j = 0; j < div.childNodes.length; j++ )
r[r.length] = div.childNodes[j];
} else if ( a[i].length ) { // 如果是数组
// 假定是DOM节点数组
for ( var j = 0; j < a[i].length; j++ )
r[r.length] = a[i][j];
} else { // 否则，假定它是DOM节点
r[r.length] = a[i];
}
}
return r;
}
[/code]
重写的 before 和 append 函数
[code lang="js"]
function before( parent, before, elem ) {
// 检查是否提供 parent 参数
if ( elem == null ) {
elem = before;
before = parent;
parent = before.parentNode;
}

// 获取元素数组
var elems = checkElem( elem );

// 从后遍历数组
for ( var i = elems.length - 1; i >= 0; i-- ) {
parent.insertBefore( elems[i], before );
}
}

function append( parent, elem ) {
// 获取元素数组
var elems = checkElem( elem );

// 把它们都追加到元素中
for ( var i = 0; i

查看完整版本： DOM — 修改DOM

查看完整版本： DOM — 修改DOM