DOM是Document Object Model文檔對象模型的縮寫。根據W3C DOM規范,DOM是一種與瀏覽器,平臺,語言無關的接口,使得你可以訪問頁面其他的標準組件。
Node接口的特性和方法
特性/方法 | 類型/放回類型 | 說明 |
---|---|---|
nodeName | String | 節點的名字;根據節點的類型而定義 |
nodeValue | String | 節點的值;根據節點的類型而定義 |
nodeType | Number | 節點的類型常量值之一 |
ownerDocument | Document | 指向這個節點所屬的文檔 |
firstChild | Node | 指向在childNodes列表中的第一個節點 |
lastChild | Node | 指向在childNodes列表中的最后一個節點 |
childNodes | NodeList | 所有子節點的列表 |
previousSibling | Node | 指向前一個兄弟節點;如果這個節點就是第一個兄弟節點,那么該值為null |
nextSibling | Node | 指向后一個兄弟節點;如果這個節點就是最后一個兄弟節點,那么該值為null |
hasChildNodes() | Boolean | 當childNodes包含一個或多個節點時,返回真 |
attributes | NamedNodeMap | 包含了代表一個元素的特性的Attr對象;僅用于Element節點 |
appendChild(node) | Node | 將node添加到childNodes的末尾 |
removeChild(node) | Node | 從childNodes中刪除node |
replaceChild (newnode, oldnode) | Node | 將childNodes中的oldnode替換成newnode |
insertBefore (newnode, refnode) | Node | 在childNodes中的refnode之前插入newnode |
hasChildNodes()?-- 查看是否存在子節點
該方法用來檢查一個元素是否有子節點,返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本節點和屬性節點不可能再包含任何子節點,所以對這兩類節點使用 hasChildNodes 方法的返回值永遠是 false.
replaceChild() -- 節點替換
把一個給定父元素里的一個子節點替換為另外一個子節點
var reference = element.replaceChild(newChild,oldChild);
返回值是一個指向已被替換的那個子節點的引用指針。
如果被插入的子節點還有子節點,則那些子節點也被插入到目標節點中
getAttribute() ? -- 查找屬性節點
返回一個給定元素的一個給定屬性節點的值
var attributeValue = element.getAttribute(attributeName);
給定屬性的名字必須以字符串的形式傳遞給該方法。
給定屬性的值將以字符串的形式返回,如果給定屬性不存在,getAttribute() 將返回一個空字符串.
setAttribute() -- 設置屬性節點
將給定元素節點添加一個新的屬性值或改變它的現有屬性的值。
element.setAttribute(attributeName,attributeValue);
屬性的名字和值必須以字符串的形式傳遞給此方法
如果這個屬性已經存在,它的值將被刷新;
如果不存在,setAttribute()方法將先創建它再為其賦值。
createElement() -- 創建新元素節點
按照給定的標簽名創建一個新的元素節點。方法只有一個參數:將被創建的元素的名字,是一個字符串.
var reference = document.createElement(element);
方法的返回值:是一個指向新建節點的引用指針。返回值是一個元素節點,所以它的 nodeType 屬性值等于 1。
新元素節點不會自動添加到文檔里,新節點沒有 nodeParent 屬性,它只是一個存在于 JavaScript 上下文的對象.
var pElement = document.createElement("p");
createTextNode() -- 創建新文本節點
創建一個包含著給定文本的新文本節點。這個方法的返回值是一個指向新建文本節點引用指針。
? var textNode = document.createTextNode(text);
方法只有一個參數:新建文本節點所包含的文本字符串
方法的返回值:是一個指向新建節點的引用指針。它是一個文本節點,所以它的 nodeType 屬性等于 3.
新元素節點不會自動添加到文檔里,新節點沒有 nodeParent 屬性
var pElementText=document.createElement("li");
var textElement=document.createTextNode("南京");
pElementText.appendChild(textElement);
appendChild() -- 插入節點(1)
為給定元素增加一個子節點: ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ?var newreference = element.appendChild(newChild). ? ? ? ? ? ? ?
? ?給定子節點 newChild 將成為給定元素節點 element 的最后一個子節點。
方法的返回值是一個指向新增子節點的引用指針。
該方法通常與 createElement() createTextNode() 配合使用
新節點可以被追加給文檔中的任何一個元素
var newliElement=document.createElement("li");var textNode=document.createTextNode("北京");newliElement.appendChild(textNode);document.body.appendChild(newliElement);var liElement=document.getElementsByTagName("li");var textValue=liElement[0].firstChild.nodeValue;alert(textValue);
把一個給定節點插入到一個給定元素節點的給定子節點的前面
var reference = element.insertBefore(newNode,targetNode);
節點 newNode 將被插入到元素節點 element 中并出現在節點 targetNode 的前面.
節點 targetNode 必須是 element 元素的一個子節點。
該方法通常與 createElement() 和 createTextNode() 配合使用
<ul id="city"> <li value="beijing^" id="beijing">北京</li> </ul>
<ul id="city01"> <li value="shanghai^" id="shanghai">上海</li> </ul>//獲取父節點var parentCityNode=document.getElementById("city");//獲取子節點var beijingNode=document.getElementById("beijing");var shanghaiNode=document.getElementById("shanghai");//插入parentCityNode.insertBefore(shanghaiNode,beijingNode);
從一個給定元素里刪除一個子節點
var reference = element.removeChild(node);
返回值是一個指向已被刪除的子節點的引用指針。
某個節點被removeChild()方法刪除時,這個節點所包含的所有子節點將同時被刪除。
<ul id="city"> <li value="beijing^" id="beijing">北京</li> </ul>
var ulElement=document.getElementById("city");
var liElement=document.getElementById("beijing");
ulElement.removeChild(liElement);
如果想刪除某個節點,但不知道它的父節點是哪一個,parentNode 屬性可以幫忙。
<ul id="city"> <li value="beijing^" id="beijing">北京</li> </ul>
var liElement=document.getElementById("beijing");
var parentElement=liElement.parentNode;
parentElement.removeChild(liElement);
ChildNodes -- 遍歷節點樹
ChildNodes:返回一個數組,這個數組由給定元素節點的子節點構成:
var nodeList = node.childNodes;
文本節點和屬性節點都不可能再包含任何子節點,所以它們的 ChildNodes 屬性永遠會返回一個空數組。
如果想知道某個元素有沒有子節點,可以用 hasChildNodes 方法。
如果想知道某個元素有多少個子節點,可以用 childNodes 數組的 length 屬性。
childNodes 屬性是一個只讀屬性。
firstChild -- 獲取第一個子節點
firstChild:該屬性返回一個給定元素節點的第一個子節點,返回這個節點對象的指針。
var reference = node.firstChild;
文本節點和屬性節點都不可能包含任何子節點,所以它們的 firstChild 屬性永遠會返回 null。
某個元素的 firstChild 屬性等價于這個元素的 childNodes 節點集合中的第一個節點,即:
var reference = node.ChildNodes[0];
firstChild 屬性是一個只讀屬性。
lastChild:獲取最后一個子節點。
nextSibling: 返回一個給定節點的下一個兄弟節點。
previousSibling:返回一個給定節點的上一個兄弟節點。
parentNode:返回一個給定節點的父節點。
parentNode 屬性返回的節點永遠是一個元素節點,因為只有元素節點才有可能包含子節點。
document 節點的沒有父節點。
Document 對象的集合
集合 | 描述 |
---|---|
all[] | 提供對文檔中所有 HTML 元素的訪問。 |
anchors[] | 返回對文檔中所有 Anchor 對象的引用。 |
applets | 返回對文檔中所有 Applet 對象的引用。 |
forms[] | 返回對文檔中所有 Form 對象引用。 |
images[] | 返回對文檔中所有 Image 對象引用。 |
links[] | 返回對文檔中所有 Area 和 Link 對象引用。 |
Document 對象的屬性
屬性 | 描述 |
---|---|
body | 提供對 <body> 元素的直接訪問。對于定義了框架集的文檔,該屬性引用最外層的 <frameset>。 |
cookie | 設置或返回與當前文檔有關的所有 cookie。 |
domain | 返回當前文檔的域名。 |
lastModified | 返回文檔被最后修改的日期和時間。 |
referrer | 返回載入當前文檔的文檔的 URL。 |
title | 返回當前文檔的標題。 |
URL | 返回當前文檔的 URL。 |
Document 對象的方法
方法 | 描述 |
---|---|
close() | 關閉用 document.open() 方法打開的輸出流,并顯示選定的數據。 |
getElementById() | 返回對擁有指定 id 的第一個對象的引用。 |
getElementsByName() | 返回帶有指定名稱的對象集合。 |
getElementsByTagName() | 返回帶有指定標簽名的對象集合。 |
open() | 打開一個流,以收集來自任何 document.write() 或 document.writeln() 方法的輸出。 |
write() | 向文檔寫 HTML 表達式 或 JavaScript 代碼。 |
writeln() | 等同于 write() 方法,不同的是在每個表達式之后寫一個換行符。 |