十二、附录 A：DOM 参考
本附录作为第 5 章中讨论的文档对象模型所提供功能的参考。
资源
DOM 功能有很多种，从最初的预指定 DOM Level 0 到 DOM Level 3。关于 DOM 需要理解的一件事是，它被认为是一种生活标准。每个级别都描述了添加的特性和行为。DOM 本身是带有节点和属性的文档的表示，这些节点和属性可以有与之相关联的事件。
如果您想了解 DOM 的一些细节，W3C 的网站是学习 DOM 应该如何工作以及 web 超文本应用技术工作组(WHATWG)的极好参考:
- HTML DOM 三级:T3【http://www.w3.org/TR/DOM-Level-3-Core/】T5】
- whatwg DOM:https://DOM . spec . whatwg . org/
此外，有许多学习 DOM 功能如何工作的优秀参考资料，但是没有一个比 Quirksmode.org(Peter-Paul Koch 经营的网站)上的资源更好。他全面考察了每一种可用的 DOM 方法，并比较了它在所有现代浏览器中的结果。这是一个非常宝贵的资源，可以帮助你判断在你开发的浏览器中什么是可能的，什么是不可能的。另一个来源也是亚历克西斯·德韦拉创造的 caniuse.com。在这里，您可以搜索想要使用的功能，并查看支持该功能的浏览器的兼容性表。
术语
在关于文档对象模型的第 5 章和本附录中，我使用通用的 XML 和 DOM 术语来描述 XML 文档的 DOM 表示的不同方面。以下单词和短语是与文档对象模型和一般 XML 文档相关的术语。所有的术语示例都与列出 A-1 的中显示的 HTML 文档样本相关。
清单 。讨论 DOM 和 XML 术语的参考点
<!doctype html>
<html>
<head>
<title>Introduction to the DOM</title>
</head>
<body>
<h1>Introduction to the DOM</h1>
<p class="test">There are a number of reasons why the DOM is awesome,
here are some:</p>
<ul>
<li id="everywhere">It can be found everywhere.</li>
<li class="test">It's easy to use.</li>
<li class="test">It can help you to find what you want, really quickly.</li>
</ul>
</body>
</html>
祖先
与系谱术语非常相似，祖先是指当前元素的父元素，以及该父元素的父元素，以及该父元素的父元素，以此类推。在清单 A-1 中，< ul >元素的祖先元素是< body >元素和< html >元素。
属性
属性是包含附加信息的元素的属性。在清单 A-1 中，< p >元素具有包含值 test 的属性 class 。
孩子
任何元素都可以包含任意数量的节点(每个节点都被认为是父元素的子节点)。在列表 A-1 中，< ul >包含七个子节点；其中三个子节点是 li 元素，另外四个子节点是每个元素之间的结束行(包含在文本节点中)。
文件
一个 XML 文档由一个元素(称为根节点或文档元素)组成，它包含文档的所有其他方面。在清单 A-1 中，< html >是包含文档其余部分的文档元素。
后裔
一个元素的后代包括它的子节点、子节点的子节点、子节点的子节点等等。在列表中，< body >元素的后代包括< h1 >、< p >、< ul >，所有的< li >元素，以及所有这些元素中包含的所有文本节点。
元素
一个元素是一个保存属性和其他节点的容器。任何 HTML 文档的主要的，也是最引人注目的组件是它的元素。在 A-1 的清单中有大量的元素；< html >、< head >、< title >、< body >、< h1 >、< p >、< ul >、< li >标签都代表元素。
节点
一个节点是 DOM 表示中的公共单元。元素、属性、注释、文档和文本节点都是节点，因此具有典型的节点属性(例如，nodeType、nodeName 和 nodeValue 存在于每个节点中)。
父
Parent 是指包含当前节点的元素。除了根节点之外，所有节点都有父节点。在清单 A-1 中，< p >元素的父元素是< body >元素。
兄弟姐妹
一个兄弟节点是同一父节点的子节点。通常这个术语用在 previousSibling 和 nextSibling 的上下文中，这两个属性在所有 DOM 节点上都可以找到。在清单 A-1 中，< p >元素的兄弟元素是< h1 >和< ul >元素(以及两个填充空格的文本节点)。
文本节点
文本节点是一个只包含文本的特殊节点；这包括可见文本和所有形式的空白。因此，当您看到元素内部的文本时(例如，<b>hello world!</b>)，实际上在元素内部有一个单独的文本节点，包含“hello world！”文字。在清单的中，第二个< li >元素中的文本“很容易使用”包含在一个文本节点中。
全局变量
全局变量存在于代码的全局范围内，但它们的存在是为了帮助您处理常见的 DOM 操作。
文件
该变量包含活动的 HTML DOM 文档，可在浏览器中查看。然而，仅仅因为这个变量存在并且有一个值，并不意味着它的内容已经被完全加载和解析。关于等待 DOM 加载的更多信息，参见第 5 章。清单 A-2 展示了一些使用文档变量来访问文档元素的例子，该变量保存了 HTML DOM 的表示。
清单 A-2 。使用文档变量访问文档元素
// Locate the element with the ID of 'body'
document.getElementById("body")
// Locate all the elements with the tag name of <div>.
document.getElementsByTagName("div")
htmlelemont
这个变量是所有 HTML DOM 元素的超类对象。扩展这个元素的原型就扩展了所有的 HTML DOM 元素。这个超类在基于 Mozilla 的浏览器和 Opera 中默认可用。可以将其添加到 Internet Explorer 和 Safari 中。清单 A-3 显示了一个将新函数绑定到全局 HTML 元素超类的例子。附加一个 hasClass 函数可以查看一个元素是否有特定的类。
清单 A-3 。将新函数绑定到全局 HTML 元素超类
// Add a new method to all HTML DOM Elements
// that can be used to see if an Element has a specific class, or not.
HTMLElement.prototype.hasClass = function( class ) {
return new RegExp("(^|\\s)" + class + "(\\s|$)").test( this.className );
};
DOM 导航
以下属性是所有 DOM 元素的一部分，可用于遍历 DOM 文档。
身体
全局 HTML DOM 文档(文档变量)的这个属性直接指向 HTML 元素(应该只有一个)。这个特殊的属性是 DOM 0 JavaScript 时代遗留下来的。清单 A-4 展示了一些从 HTML DOM 文档中访问< body >元素的例子。
清单 。访问 HTML DOM 文档中的主体元素
// Change the margins of the <body>
document.body.style.margin = "0px";
// document.body is equivalent to:
document.getElementsByTagName("body")[0]
子节点
这是所有 DOM 元素的属性，包含所有子节点的数组(包括元素、文本节点、注释等。).此属性是只读的。清单 A-5 展示了如何使用 childNodes 属性向父元素的所有子元素添加样式。
清单 A-5 。使用 childNodes 属性在< body >元素的子元素周围添加红色边框
// Add a border to all child elements of <body>
var c = document.body.childNodes;
for ( var i = 0; i < c.length; i++ ) {
// Make sure that the Node is an Element
if ( c[i].nodeType == 1 )
c[i].style.border = "1px solid red";
}
文档元素
这是所有 DOM 节点的一个属性，作为对文档根元素的引用(对于 HTML 文档，这将总是指向元素)。清单 A-6 展示了一个使用 documentElement 查找 DOM 元素的例子。
清单 A-6 。从任何 DOM 节点定位根文档元素的示例
// Find the documentElement, to find an Element by ID
someRandomNode.documentElement.getElementById("body")
第一个孩子
这是所有 DOM 元素的属性，指向该元素的第一个子节点。如果元素没有子节点，firstChild 将等于null。清单 A-7 展示了一个使用 firstChild 属性从一个元素中移除所有子节点的例子。
清单 。从元素中移除所有子节点
// Remove all child nodes from an element
var e = document.getElementById("body");
while ( e.firstChild )
e.removeChild( e.firstChild );
getElementById( elemID)
这是一个强大的功能，可以定位文档中具有指定 ID 的元素。该功能仅在文档元素上可用。此外，该函数在非 HTML DOM 文档中可能无法正常工作；通常，对于 XML DOM 文档，必须在 DTD(文档类型定义)或模式中显式指定 ID 属性。
这个函数接受一个参数:您正在搜索的 ID 的名称，如清单 A-8 中的所示。
清单 A-8 。通过 ID 属性定位 HTML 元素的两个例子
// Find the Element with an ID of body
document.getElementById("body")
// Hide the Element with an ID of notice
document.getElementById("notice").style.display = 'none';
getElementsByTagName( tagName)
此属性查找从当前元素开始的所有具有指定标记名的后代元素。这个函数在 XML DOM 和 HTML DOM 文档中的工作方式是一样的。
在所有现代浏览器中，您可以指定*作为标记名，并查找所有后代元素，这比使用纯 JavaScript 递归函数要快得多。
这个函数只有一个参数:您要搜索的元素的标记名。清单 A-9 显示了 getElementsByTagName 的例子。第一个块向文档中的所有< div >元素添加一个高亮类。第二个块查找 ID 为 body 的元素中的所有元素，并隐藏任何具有 highlight 类的元素。
清单 A-9 。演示如何使用 getElementsByTagName 的两个代码块
// Find all <div> Elements in the current HTML document
// and set their class to 'highlight'
var d = document.getElementsByTagName("div");
for ( var i = 0; i < d.length; i++ ) {
d[i].className = 'hilite';
}
// Go through all descendant elements of the element with
// an ID of body. Then find all elements that have one class
// equal to 'hilite'. Then hide all those elements that match.
var all = document.getElementById("body").getElementsByTagName("*");
for ( var i = 0; i < all.length; i++ ) {
if ( all[i].className == 'hilite' )
all[i].style.display = 'none';
}
最后一个孩子
这是一个在所有 DOM 元素上都可用的引用，指向该元素的最后一个子节点。如果不存在子节点，lastChild 将是null。列出 A-10 展示了一个使用 lastChild 属性在文档中插入元素的例子。
清单 。创建一个新的< div >元素，并将其插入到<主体>的最后一个元素之前
// Insert a new Element just before the last element in the <body>
var n = document.createElement("div");
n.innerHTML = "Thanks for visiting!";
document.body.insertBefore( n, document.body.lastChild );
下一个兄弟姐妹
这是一个在所有 DOM 节点上都可用的引用，指向下一个兄弟节点。如果该节点是最后一个兄弟节点，则 nextSibling 将是null。重要的是要记住，nextSibling 可能指向一个 DOM 元素、一个注释，甚至是一个文本节点；它不是导航 DOM 元素的唯一方式。清单 A-11 是使用 nextSibling 属性创建交互式定义列表的一个例子。
清单 A-11 。点击后，使所有< dt >元素展开它们的兄弟< dd >元素
// Find all <dt> (Defintion Term) elements
var dt = document.getElementsByTagName("dt");
for ( var i = 0; i < dt.length; i++ ) {
// Watch for when the term is clicked
dt[i].onclick = function() {
// Since each Term has an adjacent <dd> (Definition) element
// We can display it when it's clicked
// NOTE: Only works when there's no whitespace between <dd> elements
this.nextSibling.style.display = 'block';
};
}
parent node-父节点
这是所有 DOM 节点的属性。每个 DOM 节点的 parentNode 都指向包含它的元素，除了 document 元素，它指向null(因为没有任何元素包含根元素)。清单 A-12 是使用 parentNode 属性创建定制交互的一个例子。单击“取消”按钮会隐藏父元素。
清单 A-12 。使用 parentNode 属性创建自定义交互
// Watch for when a link is clicked (e.g. a Cancel link)
// and hide the parent element
document.getElementById("cancel").onclick = function(){
this.parentNode.style.display = 'none';
};
前兄弟姐妹
这是一个在所有 DOM 节点上都可用的引用，指向前一个兄弟节点。如果该节点是第一个兄弟节点，前一个兄弟节点将是null。重要的是要记住，previousSibling 可能指向一个 DOM 元素、一个注释，甚至是一个文本节点；它不是导航 DOM 元素的唯一方式。清单 A-13 展示了一个使用 previousSibling 属性隐藏元素的例子。
清单 A-13 。隐藏当前元素之前的所有元素
// Find all elements before this one and hide them
var cur = this.previousSibling;
while ( cur != null ) {
cur.style.display = 'none';
cur = this.previousSibling;
}
节点信息
这些属性存在于大多数 DOM 元素中，以便于您访问公共元素信息。
internal text(内部文字)
这是所有 DOM 元素的属性(只存在于非基于 Mozilla 的浏览器中，因为它不是 W3C 标准的一部分)。该属性返回一个包含当前元素中所有文本的字符串。因为基于 Mozilla 的浏览器不支持该属性，所以您可以利用一种变通方法(使用一个函数来收集后代文本节点的值)。清单 A-14 展示了使用来自第 5 章的 innerText 属性和 Text()函数的例子。
清单 A-14 。使用 innerText 属性从元素中提取文本信息
// Let's assume that we have an <li> element like this, stored in the variable 'li':
// <li>Please visit <a href="http://mysite.com/">my web site</a>.</li>
// Using the innerText property
li.innerText
// or the text() function described in Chapter `5`
text( li )
// The result of either the property or the function is:
"Please visit my web site."
节点名称
这是一个所有 DOM 元素都有的属性，包含元素名的大写版本。例如，如果您有一个
- Element, and you access its nodeName property, it will return LI. Listing A-15 shows an example of using the nodeName attribute to modify the class name of the parent element.
清单 A-15 。找到所有父元素 li 和 T7 并将它们的类设置为当前
// Find all the parents of this node, that are an <li> element
var cur = this.parentNode;
while ( cur != null ) {
// Once the element is found, and the name verified, add a class
if ( cur.nodeName == 'LI' )
cur.className += " current";
cur = this.parentNode;
}
节点类型
这是所有 DOM 节点的共同属性，包含一个与节点类型相对应的数字。HTML 文档中最常用的三种节点类型如下:
- 元素节点(值为 1 或文档。元素 _ 节点)
- 文本节点(值为 3 或文档。文本 _ 节点)
- 文档节点(值为 9 或文档。文档 _ 节点)
使用 nodeType 属性是一种可靠的方法，可以确保您试图访问的节点具有您认为它具有的所有属性(例如，nodeName 属性只对 DOM 元素有用；所以在访问它之前，您可以使用 nodeType 来确保它等于 1)。清单 A-16 展示了一个使用 nodeType 属性向多个元素添加一个类的例子。
清单 A-16 。定位 HTML <主体>中的第一个元素，并对其应用一个 header 类
// Find the first element in the <body>
var cur = document.body.firstChild;
while ( cur != null ) {
// If an element was found, add the header class to it
if ( cur.nodeType == 1 ) {
cur.className += " header";
cur = null;
// Otherwise, continue navigating through the child nodes
} else {
cur = cur.nextSibling;
}
}
节点值
这是文本节点的一个有用属性，可用于访问和操作它们包含的文本。使用中最好的例子是第 5 章中的文本函数，它用于检索一个元素的所有文本内容。清单 A-17 展示了一个使用 nodeValue 属性构建简单文本值函数的例子。
清单 A-17 。接受一个元素并返回该元素及其所有后代元素的文本内容的函数
function text(e) {
var t = " ";
// If an element was passed, get its children,
// otherwise assume it's an array
e = e.childNodes || e;
// Look through all child nodes
for ( var j = 0; j < e.length; j++ ) {
// If it's not an element, append its text value
// Otherwise, recurse through all the element's children
t += e[j].nodeType != 1 ?
e[j].nodeValue : text(e[j].childNodes);
}
// Return the matched text
return t;
}
属性
大多数属性都可以作为其包含元素的属性使用。例如，可以使用简单的 element.id 来访问属性 ID。这个特性是 DOM 0 days 的残余，但是由于它的简单性和流行性，它很可能不会有任何发展。
className
这个属性允许你在 DOM 元素中添加和移除类。该属性存在于所有 DOM 元素中。我特别提到这一点的原因是，它的名称 className 与预期的类的名称非常不同。奇怪的命名是由于单词类在大多数面向对象编程语言中是保留字；因此避免使用它来限制 web 浏览器的编程难度。清单 A-18 展示了一个使用 className 属性隐藏一些元素的例子。
清单 A-18 。找到所有有特殊类的 div 元素并隐藏它们
// Find all the <div> elements in the document
var div = document.getElementsByTagName("div");
for ( var i = 0; i < div.length; i++ ) {
// Find all the <div> elements that have a single class of 'special'
if ( div[i].className == "special" ) {
// And hide them
div[i].style.display = 'none';
}
}
getAttribute（ attrName ）
这是一个函数，作为访问包含在 DOM 元素中的属性值的正确方式。属性用用户在 HTML 文档中提供的值初始化。
该函数只接受一个参数:要检索的属性的名称。清单 A-19 展示了一个使用 getAttribute()函数查找特定类型的输入元素的例子。
清单 A-19 。找到名为 text 的<输入>元素，并将其值复制到一个 ID 为 preview 的元素中
// Find all the form input elements
var input = document.getElementsByTagName("input");
for ( var i = 0; i < input.length; i++ ) {
// Find the element that has a name of "text"
if ( input[i].getAttribute("name") == "text" ) {
// Copy the value into another element
document.getElementById("preview").innerHTML =
input[i].getAttribute("value");
}
}
removeAttribute（ attrName ）
这是一个可以用来从元素中完全删除属性的函数。通常，使用此函数的结果相当于使用 valueof " "(空字符串)或null执行 setAttribute 然而，在实践中，您应该确保总是清理额外的属性，以避免任何意想不到的后果。
这个函数只有一个参数:您希望删除的属性的名称。列出 A-20 展示了一个取消选中表单中一些复选框的例子。
清单 。查找文档中的所有复选框并取消选中它们
// Find all the form input elements
var input = document.getElementsByTagName("input");
for ( var i = 0; i < input.length; i++ ) {
// Find all the checkboxes
if ( input[i].getAttribute("type") == "checkbox" ) {
// Uncheck the checkbox
input[i].removeAttribute("checked");
}
}
箭头属性(attrName、attrValue)
这是一个函数，用来设置包含在 DOM 元素中的属性值。此外，还可以添加自定义属性，以后可以再次访问这些属性，同时不影响 DOM 元素的外观。setAttribute 在 Internet Explorer 中的行为往往很奇怪，使您无法设置特定的属性(如 class 或 maxlength)。这在第 5 章中有更多解释。
该函数有两个参数。第一个是属性的名称。第二个是要设置属性的值。清单 A-21 展示了一个在 DOM 元素上设置属性值的例子。
清单 A-21 。使用 setAttribute 函数创建一个到 Google 的链接
// Create a new <a> element
var a = document.createElement("a").
// Set the URL to visit to Google's web site
a.setAttribute("href","http://google.com/");
// Add the inner text, giving the user something to click
a.appendChild( document.createTextNode( "Visit Google!" ) );
// Add the link at the end of the document
document.body.appendChild( a );
DOM 修改
以下是可用于操作 DOM 的所有属性和函数。
附录子(nodetoappend)
这是一个可用于向包含元素添加子节点的函数。如果要追加的节点已经存在于文档中，它将从当前位置移动并追加到当前元素。必须在希望追加的元素上调用 appendChild 函数。
该函数接受一个参数:一个对 DOM 节点的引用(这可能是您刚刚创建的节点，也可能是对文档中其他地方存在的节点的引用)。清单 A-22 展示了一个创建新的< ul >元素并将所有< li >元素从它们在 DOM 中的原始位置移动到其中，然后将新的< ul >追加到文档主体的例子。
清单 A-22 。将一系列< li >元素附加到单个< ul >
// Create a new <ul> element
var ul = document.createElement("ul");
// Find all the first <li> elements
var li = document.getElementsByTagName("li");
for ( var i = 0; i < li.length; i++ ) {
// append each matched <li> into our new <ul> element
ul.appendChild( li[i] );
}
// Append our new <ul> element at the end of the body
document.body.appendChild( ul );
克隆代码(true|false)
这个函数是开发人员通过复制现有节点来简化代码的一种方式，然后可以将节点插入到 DOM 中。由于执行普通的 insertBefore 或 appendChild 调用会在文档中物理移动一个 DOM 节点，因此可以使用 cloneNode 函数来复制它。
该函数接受一个 true 或 false 参数。如果参数为真，则克隆节点及其内部的所有内容；如果为 false，则仅克隆节点本身。清单 A-23 展示了一个使用这个函数克隆一个元素并把它附加到自身的例子。
清单 A-23 。找到文档中的第一个< ul >元素，制作它的完整副本，并将其附加到自身
// Find the first <ul> element
var ul = document.getElementsByTagName("ul")[0];
// Clone the node and append it after the old one
ul.parentNode.appendChild( ul.cloneNode( true ) );
createElement( tagName)
这是用于在 DOM 结构中创建新元素的主要函数。该函数作为您希望在其中创建元素的文档的属性而存在。
注意如果你使用的是内容类型为 application/xhtml+xml 的 XHTML，而不是内容类型为 text/html 的普通 HTML，你应该使用 createElementNS 函数而不是 createElement 函数。
这个函数有一个参数:要创建的元素的标记名。清单 A-24 展示了一个使用这个函数创建一个元素并将其包装在其他元素周围的例子。
清单 A-24 。将一个< p >元素的内容包装在一个<强>元素中
// Create a new <strong> element
var s = document.createElement("strong");
// Find the first paragraph
var p = document.getElementsByTagName("p")[0];
// Wrap the contents of the <p> in the <strong> element
while ( p.firstChild ) {
s.appendChild( p.firstChild );
}
// Put the <strong> element (containing the old <p> contents)
// back into the <p> element
p.appendChild( s );
createelementns(命名空间，tagName)
这个函数与 createElement 函数非常相似，因为它创建一个新元素；但是，它还提供了为元素指定名称空间的能力(例如，如果您要向 XML 或 XHTML 文档中添加一个项目)。
这个函数有两个参数:要添加的元素的名称空间和元素的标记名。清单 A-25 展示了一个使用这个函数在有效的 XHTML 文档中创建 DOM 元素的例子。
清单 A-25 。创建一个新的 XHTML < p >元素，用一些文本填充它，并将它附加到文档主体
// Create a new XHTML-compliant <p>
var p = document.createElementNS("http://www.w3.org/1999/xhtml", "p");
// Add some text into the <p> element
p.appendChild( document.createTextNode( "Welcome to my site." ) );
// Add the <p> element into the document
document.body.insertBefore( p, document.body.firstChild );
createTextNode(文本字符串)
这是创建要插入 DOM 文档的新文本字符串的正确方法。因为文本节点只是文本的 DOM 包装器，所以记住不能对它们进行样式化或追加是很重要的。该函数只作为 DOM 文档的一个属性存在。
该函数接受一个参数:将成为文本节点内容的字符串。清单 A-26 展示了一个使用这个函数创建一个新的文本节点并将它附加到 HTML 页面主体的例子。
清单 。创建一个< h1 >元素并追加一个新的文本节点
// Create a new <h1> element
var h = document.createElement("h1");
// Create the header text and add it to the <h1> element
h.appendChild( document.createTextNode("Main Page") );
// Add the header to the start of the <body>
document.body.insertBefore( h, document.body.firstChild );
内部 HTML
这是一个特定于 HTML DOM 的属性，用于访问和操作 DOM 元素的 HTML 内容的字符串版本。如果您只处理 HTML 文档(而不是 XML 文档)，这种方法会非常有用，因为生成一个新的 DOM 元素所需的代码可以大大减少(更不用说它是传统 DOM 方法的一种更快的替代方法)。虽然该属性不是任何特定 W3C 标准的一部分，但它仍然存在于每个现代浏览器中。清单 A-27 展示了一个例子，每当<文本区域>的内容改变时，使用 innerHTML 属性来改变元素的内容。
清单 A-27 。观察<文本区域>的变化，并用其值更新实时预览
// Get the textarea to watch for updates
var t = document.getElementsByTagName("textarea")[0];
// Grab the current value of a <textarea> and update a live preview,
// everytime that it's changed
t.onkeypress = function() {
document.getElementById("preview").innerHTML = this.value;
};
"我不会成为一个好人，"他说。
这个函数用于在文档中的任意位置插入一个 DOM 节点。必须在要插入的节点的父元素上调用该函数。这样做是为了让您可以为 nodeToInsertBefore 指定null，并将您的节点作为最后一个子节点插入。
该函数有两个参数。第一个参数是您希望插入 DOM 的节点；第二个是之前插入的 DOM 节点。这应该是对有效节点的引用。清单 A-28 展示了一个使用这个函数在页面上的一组 URL 旁边插入一个站点的图标(你在浏览器地址栏的 URL 旁边看到的图标)。
清单 A-28 。遍历所有的< a >元素，并添加一个由网站的 Favicon 组成的图标
// Find all the <a> links within the document
var a = document.getElementsByTagName("a");
for ( var i = 0; i < a.length; i++ ) {
// Create an image of the linked-to site's favicon
var img = document.createElement("img");
img.src = a[i].href.split('/').splice(0,3).join('/') + '/favicon.ico';
// Insert the image before the link
a[i].parentNode.insertBefore( img, a[i] );
}
remove child(nodetormove)
这个函数用于从 DOM 文档中移除一个节点。必须在要移除的节点的父元素上调用 removeChild 函数。
该函数接受一个参数:对要从文档中移除的 DOM 节点的引用。清单 A-29 展示了一个遍历文档中所有< div >元素的例子，删除了所有具有单个警告类的元素。
清单 A-29 。删除具有特定类名的所有元素
// Find all <div> elements
var div = document.getElementsByTagName("div");
for ( var i = 0; i < div.length; i++ ) {
// If the <div> has one class of 'warning'
if ( div[i].className == "warning" ) {
// Remove the <div> from the document
div[i].parentNode.removeChild( div[i] );
}
}
replaceChild( nodeToInsert，nodeToReplace)
此功能是删除一个节点并在其位置插入另一个节点的过程的替代方法。该函数必须由您要替换的节点的父元素调用。
这个函数有两个参数:希望插入到 DOM 中的节点，以及要替换的节点。清单 A-30 展示了一个用包含最初链接到的 URL 的< strong >元素替换所有< a >元素的例子。
清单 A-30 。将一组链接转换成普通 URL
// Convert all links to visible URLs (good for printing
// Find all <a> links in the document
var a = document.getElementsByTagName("a");
while ( a.length ) {
// Create a <strong> element
var s = document.createElement("strong");
// Make the contents equal to the <a> link URL
s.appendChild( document.createTextNode( a[i].href ) );
// Replace the original <a> with the new <strong> element
a[i].replaceChild( s, a[i] );
}
版权属于：月萌API www.moonapi.com，转载请注明出处
