首頁>網頁設計教程>Javascript教程

整理JavaScript對DOM中各種類型的元素的常用操作

作者：Eve Cole 更新時間：2025-08-31 14:48:01

節點類型

nodeType

以下是一些重要的nodeType的取值：

1： 元素element

2： 屬性attr

3： 文本text

8： 註釋comments

9： 文檔document

nodeName,nodeValue

節點關係

childNodes: 每個節點都有一個childNodes屬性，其中保存著一個NodeList對象

firstChild: 等同於childNodes[0]

lastChild: 等同於childNodes.length-1

同時通過使用列表中每個節點的previousSibling和nextSibling屬性，可以訪問同一列表中的其他節點。

操作節點

appendChild()

appendChild()方法用於向childNodes列表的末尾添加一個節點。添加節點後，childNodes的新增節點、父節點及以前的最後一個子節點的關係指針都會相應地得到更新。

insertBefore()

insertBefore()這個方法接受兩個參數：要插入的節點和作為參照的節點。

 // 插入後成為最後一個子節點returnedNode = someNode.insertBefore(newNode,null);// 插入後成為第一個節點returnedNode = someNode.insertBefore(newNode,someNode.firstChild);// 插入到最後一個子節點前面returnedNode = someNode.insertBefore(newNode,someNode.lastChild);

repaceChild()

repaceChild()接受兩個參數，要插入的節點和要替換的節點

var returnedNode = someNode.replaceChild(newNode,someNode.firstChild);

removeChild()

只移除而非替換節點。

 var formerFirstChild = someNode.removeChild(someNode.firstChild);

cloneNode()

item 1

item 2

item 3

 var deepList = myList.cloneNode(true);console.log(deepList.length); // 3var shallowList = myList.cloneNode(false);console.log(shallowList.childNodes.length); //0

Document類型

Document節點具有下列特徵：

  • nodeType的值為9；
  • nodeName的值為#document;
  • nodeValue的值為null;
  • parentNode的值為null;
  • ownerDocument的值為null;

文檔的子節點

var html = document.documentElement; // 取得對<html>的引用console.log(html === document.childNodes[0]); // trueconsole.log(html === document.firstChild); // true

文檔信息

// 取得文檔的標題var originalTitle = document.title; // 設置文檔標題document.title = "New page title";// 取得完整的urlvar url = document.URL;// 取得域名var domain = document.domain;// 取得來源頁面的urlvar referrer = document.referrer;//假設頁面來自p2p.wrox.com域document.domain = "wrox.com"; // 成功document.domain = "nczonline.net"; // 失敗

在IE7中調用document.getElementById("myElement");結果會返回<input>元素，如下所示；

最好的辦法是不讓表單字段的name特性與其他元素的ID相同。

 <input type="text" name="myElement" value="text field"><div id="myElement">a div</div>

特殊集合

  • document.anchors,包含文檔中所有帶name特性的a元素;
  • document.forms, 包含文檔中所有form元素，與document.getElementsByTagName("form")得到的結果相同;
  • document.images,包含文檔中所有的img元素，與document.getElementsByTagName("img")得到的結果相同;
  • document.links，包含文檔中所有帶href特性的a元素;

文檔寫入

<html><head> <title>document.write() Example 3</title></head><body> <script type="text/javascript"> document.write("<script type=/"text/javascript/" src=/"file.js/">") + "<//script>"); </script></body></html>

字符串<//script>不會被當作外部script標籤的關閉標籤，因而頁面中也就不會出現多餘的內容了。

Element類型

Element節點具有以下特徵：

  • nodeType的值為1;
  • nodeName的值為元素的標籤名;
  • nodeValue的值為null;
  • parentNode可能是Document或Element;

要訪問元素的標籤名，可以使用nodeName屬性，也可以使用tagName屬性；

 <div id="myDiv"></div>var div = document.getElementById("myDiv");console.log(div.tagName); // DIVconsole.log(div.nodeName); // DIVif (element.tagName=="div") { // 不能這樣比較，很容易出錯}if (element.tagName.toLowerCase =="div") { // 這樣最好（適用於任何文檔）}

取得特性

操作特性的DOM方法主要有三個，分別是getAttribute()、setAttribute()、removeAttribute()；

注意，傳遞給getAttribute()的特性名與實際的特性名相同。印像要想得到class的特性值，應該傳入"class"而不是"className"。

 var div = document.getElementById("myDiv");console.log(div.getAttribute("class")); // bd

創建元素

使用document.createElement()方法可以創建新元素。

元素的子節點

在執行某項操作以前，通常都要先檢查一下nodeType屬性，如下面的例子所示:

 for (var i=0; len = element.childNodes.length; i<len; i++){ if (element.childNodes[i].nodeType ==1) { // 執行某些操作}}

Text類型

Text節點具有以下特徵：

  • nodeType的值為3；
  • nodeName的值為"#text";
  • nodeValue的值為節點所包含的文本；
  • parentNode是一個Element；

創建文本節點

可以使用document.createTextNode()創建新文本節點。

規範化文本節點

normalize()

分割文本節點

splitText()

Comment類型

comment節點具有下列特徵：

  • nodeType的值為8;
  • nodeName的值為"#comment";
  • nodeValue的值是註釋的內容；
  • parentNode可能是Document或Element；
  • 不支持（沒有）子幾點；

DOM操作技術

操作表格

// 創建tablevar table = document.createElement("table");table.border = 1;table.width = "100%";// 創建tbodyvar tbody = document.createElement("tbody");table.appendChild(tbody);// 創建第一行tbody.insertRow(0);tbody.rows[0].insertCell(0);tbody.rows[0].cells[0].appendChild(document.createTextNode("cell 1,1"));tbody.rows[0].insertCell(1);tbody.rows[0].cells[1].appendChild(document.createTextNode("cell 2,1"));// 創建第二行tbody.insertRow(01);tbody.rows[1].insertCell(0);tbody.rows[1].cells[0].appendChild(document.createTextNode("cell 1,2"));tbody.rows[1].insertCell(1);tbody.rows[1].cells[1].appendChild(document.createTextNode("cell 2,2"));document.body.appendChild(table);

選擇符API

querySelector()方法

// 取得body元素var tbody = document.querySelector('body');// 取得ID為"myDIV"的元素var myDIV = document.querySelector("#myDiv");// 取得類為"selected"的第一個元素var selected = document.querySelector(".selected");// 取得類為"button"的第一個圖像元素var img = document.body.querySelector("img.button");

querySelectorAll()方法

// 取得某<div>中的所有<em>元素(類似於getElementsByTagName("em"))var ems = document.getElementById("myDiv").querySelectorAll("em");// 取得類為"selected"的所有元素var selecteds = document.querySelectorAll(".selected");// 取得所有<p>元素中的所有<strong>元素var strongs = document.querySelectorAll("p strong");

HTML5

與類相關的擴充

getElementsByClassName()方法：

該方法可以通過document對象及所有HTML元素調用該方法。

 // 取得所有類中包含"username"和"current"的元素。類名的先後順序無所謂var allCurrentUsernames = document.getElementsByClassName("username current");// 取得ID為"myDiv"的元素中帶有類名"selected"的所有元素var selected = document.getElementById("myDiv").getElementsByClassName("selected");

焦點管理

HTML5也添加了輔助管理DOM焦點的功能。首先就是document.activeElement屬性，這個屬性始終會引用DOM中當前獲得了焦點的元素。

 var button = document.getElementById("myButton");button.focus();alert(document.activeElement === button); // true

默認情況下，文檔剛剛加載完成時，document.activeElement中保存的是document.body元素的引用。文檔加載期間，docuemnt.activeElement的值為null。

另外就是新增了document.hasFocus()方法，這個方法用於確定文檔是否獲得了焦點。

 var button = document.getElementById("myButton");botton.focus();alert(document.hasFocus()); // true
相關文章