資訊專欄INFORMATION COLUMN
摘要：添加節(jié)點(diǎn)后，的新增節(jié)點(diǎn)父節(jié)點(diǎn)及以前的最后一個(gè)子節(jié)點(diǎn)的關(guān)系指針都會(huì)相應(yīng)地得到更新。插入后成為最后一個(gè)子節(jié)點(diǎn)插入后成為第一個(gè)節(jié)點(diǎn)插入到最后一個(gè)子節(jié)點(diǎn)前面接受兩個(gè)參數(shù)，要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)只移除而非替換節(jié)點(diǎn)。
Node類型
nodeType
以下是一些重要的nodeType的取值：
1： 元素element
2： 屬性attr
3： 文本text
8： 注釋comments
9： 文檔document
nodeName,nodeValue
節(jié)點(diǎn)關(guān)系childNodes: 每個(gè)節(jié)點(diǎn)都有一個(gè)childNodes屬性，其中保存著一個(gè)NodeList對象
firstChild: 等同于childNodes[0]
lastChild: 等同于childNodes.length-1
同時(shí)通過使用列表中每個(gè)節(jié)點(diǎn)的previousSibling和nextSibling屬性，可以訪問同一列表中的其他節(jié)點(diǎn)。
操作節(jié)點(diǎn)appendChild()
appendChild()方法用于向childNodes列表的末尾添加一個(gè)節(jié)點(diǎn)。添加節(jié)點(diǎn)后，childNodes的新增節(jié)點(diǎn)、父節(jié)點(diǎn)及以前的最后一個(gè)子節(jié)點(diǎn)的關(guān)系指針都會(huì)相應(yīng)地得到更新。
insertBefore()
insertBefore()這個(gè)方法接受兩個(gè)參數(shù)：要插入的節(jié)點(diǎn)和作為參照的節(jié)點(diǎn)。
// 插入后成為最后一個(gè)子節(jié)點(diǎn) returnedNode = someNode.insertBefore(newNode,null); // 插入后成為第一個(gè)節(jié)點(diǎn) returnedNode = someNode.insertBefore(newNode,someNode.firstChild); // 插入到最后一個(gè)子節(jié)點(diǎn)前面 returnedNode = someNode.insertBefore(newNode,someNode.lastChild);
repaceChild()
repaceChild()接受兩個(gè)參數(shù)，要插入的節(jié)點(diǎn)和要替換的節(jié)點(diǎn)
var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);
removeChild()
只移除而非替換節(jié)點(diǎn)。
var formerFirstChild = someNode.removeChild(someNode.firstChild);
cloneNode()
var deepList = myList.cloneNode(true); console.log(deepList.length); // 3 var shallowList = myList.cloneNode(false); console.log(shallowList.childNodes.length); //0Document類型
Document節(jié)點(diǎn)具有下列特征：
nodeType的值為9；
nodeName的值為#document;
nodeValue的值為null;
parentNode的值為null;
ownerDocument的值為null;
var html = document.documentElement; // 取得對的引用 console.log(html === document.childNodes[0]); // true console.log(html === document.firstChild); // true文檔信息
// 取得文檔的標(biāo)題 var originalTitle = document.title; // 設(shè)置文檔標(biāo)題 document.title = "New page title"; // 取得完整的url var url = document.URL; // 取得域名 var domain = document.domain; // 取得來源頁面的url var referrer = document.referrer; //假設(shè)頁面來自p2p.wrox.com域 document.domain = "wrox.com"; // 成功 document.domain = "nczonline.net"; // 失敗
在IE7中調(diào)用document.getElementById("myElement");結(jié)果會(huì)返回元素，如下所示；
最好的辦法是不讓表單字段的name特性與其他元素的ID相同。
特殊集合a div
document.anchors,包含文檔中所有帶name特性的a元素;
document.forms, 包含文檔中所有form元素，與document.getElementsByTagName("form")得到的結(jié)果相同;
document.images,包含文檔中所有的img元素，與document.getElementsByTagName("img")得到的結(jié)果相同;
document.links，包含文檔中所有帶href特性的a元素;
document.write() Example 3
");
字符串不會(huì)被當(dāng)作外部script標(biāo)簽的關(guān)閉標(biāo)簽，因而頁面中也就不會(huì)出現(xiàn)多余的內(nèi)容了。
Element類型Element節(jié)點(diǎn)具有以下特征：
nodeType的值為1;
nodeName的值為元素的標(biāo)簽名;
nodeValue的值為null;
parentNode可能是Document或Element;
要訪問元素的標(biāo)簽名，可以使用nodeName屬性，也可以使用tagName屬性；
var div = document.getElementById("myDiv");
console.log(div.tagName); // DIV
console.log(div.nodeName); // DIV
if (element.tagName=="div") { // 不能這樣比較，很容易出錯(cuò)
}
if (element.tagName.toLowerCase =="div") { // 這樣最好（適用于任何文檔）
}
取得特性
操作特性的DOM方法主要有三個(gè)，分別是getAttribute()、setAttribute()、removeAttribute()；
注意，傳遞給getAttribute()的特性名與實(shí)際的特性名相同。印象要想得到class的特性值，應(yīng)該傳入"class"而不是"className"。
var div = document.getElementById("myDiv");
console.log(div.getAttribute("class")); // bd
創(chuàng)建元素
使用document.createElement()方法可以創(chuàng)建新元素。
元素的子節(jié)點(diǎn)在執(zhí)行某項(xiàng)操作以前，通常都要先檢查一下nodeType屬性，如下面的例子所示:
