node1.parentNode.insertBefore(node2, node1);
或
node1.parentNode.insertBefore(node1.nextSibling, node1);
还可以使用 DOM 做什么？
Web 页面中大量应用了 DOM。若访问 bookmarklets 站点（参阅 参考资料），您会发现很多有创意的简短脚本，它们可以重新编排页面，提取链接，隐藏图片或 Flash 广告，等等。
但是，因为 Internet Explorer 没有定义 Node 接口常量（可以用于识别节点类型），所以您必须确保在遗漏接口常量时，首先为 Web 在 DOM 脚本中定义接口常量。
清单 3. 确保节点被定义
if (!window['Node']) {
window.Node = new Object();
Node.ELEMENT_NODE = 1;
Node.ATTRIBUTE_NODE = 2;
Node.TEXT_NODE = 3;
Node.CDATA_SECTION_NODE = 4;
Node.ENTITY_REFERENCE_NODE = 5;
Node.ENTITY_NODE = 6;
Node.PROCESSING_INSTRUCTION_NODE = 7;
Node.COMMENT_NODE = 8;
Node.DOCUMENT_NODE = 9;
Node.DOCUMENT_TYPE_NODE = 10;
Node.DOCUMENT_FRAGMENT_NODE = 11;
Node.NOTATION_NODE = 12;
}
清单 4 展示如何提取包含在节点中的所有文本节点：
清单 4. 内部文本
function innerText(node) {
// is this a text or CDATA node?
if (node.nodeType == 3 || node.nodeType == 4) {
return node.data;
}
var i;
var returnValue = [];
for (i = 0; i < node.childNodes.length; i ) {
returnValue.push(innerText(node.childNodes[i]));
}
return returnValue.join('');
}
快捷方式
人们经常抱怨 DOM 太过冗长，并且简单的功能也需要编写大量代码。例如，假如您想创建一个包含文本并响应点击按钮的 <div> 元素，代码可能类似于：
清单 5. 创建 <div> 的“漫长之路”
function handle_button() {
var parent = document.getElementById('myContainer');
var div = document.createElement('div');
div.className = 'myDivCSSClass';
div.id = 'myDivId';
div.style.position = 'absolute';
div.style.left = '300px';
div.style.top = '200px';
var text = "This is the first text of the rest of this code";
var textNode = document.createTextNode(text);
div.appendChild(textNode);
parent.appendChild(div);
}
若频繁按照这种方式创建节点，键入所有这些代码会使您很快疲惫不堪。必须有更好的解决方案 —— 确实有这样的解决方案！下面这个实用工具可以帮助您创建元素、设置元素属性和风格，并添加文本子节点。除了 name 参数，其他参数都是可选的。
清单 6. 函数 elem() 快捷方式
function elem(name, attrs, style, text) {
var e = document.createElement(name);
if (attrs) {
for (key in attrs) {
if (key == 'class') {
e.className = attrs[key];
} else if (key == 'id') {
e.id = attrs[key];
} else {
e.setAttribute(key, attrs[key]);
}
}
}
if (style) {
for (key in style) {
e.style[key] = style[key];
评论加载中…
 |