javascript DOM的操作

zhyp29發表於2016-05-11

一、DOM基礎
1.節點(node)層次
Document－－最頂層的節點，所有的其他節點都是附屬於它的。
DocumentType－－DTD引用（使用<!DOCTYPE>語法）的物件表現形式，它不能包含子節點。
DocumentFragment－－可以像Document一樣來儲存其他節點。
Element－－表示起始標籤和結束標籤之間的內容，例如<tag></tab>或者<tag/>。這是唯一可以同時包含特性和子節點的節點型別。
Attr－－代表一對特性名和特性值。這個節點型別不能包含子節點。
Text－－代表XML文件中的在起始標籤和結束標籤之間，或者CDataSection內包含的普通文字。這個節點型別不能包含子節點。
CDataSection－－<![CDATA[]]>的物件表現形式。這個節點型別僅能包含文字節點Text作為子節點。
Entity－－表示在DTD中的一個實體定義，例如<!ENTITY foo"foo">。這個節點型別不能包含子節點。
EntityReference－－代表一個實體引用，例如"。這個節點型別不能包含子節點。
ProcessingInstruction－－代表一個PI。這個節點型別不能包含子節點。
Comment－－代表XML註釋。這個節點不能包含子節點。
Notation－－代表在DTD中定義的記號。這個很少用到。

Node介面定義了所有節點型別都包含的特性和方法。

表3-3 動態建立內容時所用的W3C DOM屬性和方法
屬性/方法                  描述
document.createElement(tagName) 文件物件上的createElement方法可以建立由tagName指定的元素。如果以串div作為方法引數，就會生成一個div元素
document.createTextNode(text) 文件物件的createTextNode方法會建立一個包含靜態文字的節點
<element>.appendChild(childNode) appendChild方法將指定的節點增加到當前元素的子節點列表（作為一個新的子節點）。例如，可以增加一個option元素，作為select元素的子節點
<element>.getAttribute(name)
<element>.setAttribute(name, value)這些方法分別獲得和設定元素中name屬性的值
<element>.insertBefore(newNode, targetNode)將節點newNode作為當前元素的子節點插到targetNode元素前面
<element>.removeAttribute(name) 這個方法從元素中刪除屬性name
<element>.removeChild(childNode) 這個方法從元素中刪除子元素childNode
<element>.replaceChild(newNode, oldNode) 這個方法將節點oldNode替換為節點newNode
<element>.hasChildnodes() 這個方法返回一個布林值，指示元素是否有子元素
Document－－最頂層的節點，所有的其他節點都是附屬於它的。
DocumentType－－DTD引用（使用<!DOCTYPE>語法）的物件表現形式，它不能包含子節點。
DocumentFragment－－可以像Document一樣來儲存其他節點。
Element－－表示起始標籤和結束標籤之間的內容，例如<tag></tab>或者<tag/>。這是唯一可以同時包含特性和子節點的節點型別。
Attr－－代表一對特性名和特性值。這個節點型別不能包含子節點。
Text－－代表XML文件中的在起始標籤和結束標籤之間，或者CDataSection內包含的普通文字。這個節點型別不能包含子節點。
CDataSection－－<![CDATA[]]>的物件表現形式。這個節點型別僅能包含文字節點Text作為子節點。
Entity－－表示在DTD中的一個實體定義，例如<!ENTITY foo"foo">。這個節點型別不能包含子節點。
EntityReference－－代表一個實體引用，例如"。這個節點型別不能包含子節點。
ProcessingInstruction－－代表一個PI。這個節點型別不能包含子節點。
Comment－－代表XML註釋。這個節點不能包含子節點。
Notation－－代表在DTD中定義的記號。這個很少用到。
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之前插入newnodd
除節點外，DOM還定義了一些助手物件，它們可以和節點一起使用，但不是DOM文件必有的部分。
NodeList－－節點陣列，按照數值進行索引;用來表示和一個元素的子節點。
NamedNodeMap－－同時使用數值和名字進行索引的節點表;用於表示元素特性。

2.訪問相關的節點
下面的幾節中考慮下面的HTML頁面
<html>
    <head>
        <title>DOM Example</title>
    </head>
    <body>
        <p>Hello World!</p>
        <p>Isn't this exciting?</p>
        <p>You're learning to use the DOM!</p>
    </body>
</html>
要訪問<html/>元素（你應該明白這是該檔案的document元素），你可以使用document的documentElement特性：
var oHtml = document.documentElement;
現在變數oHtml包含一個表示<html/>的HTMLElement物件。如果你想取得<head/>和<body/>元素，下面的可以實現：
var oHead = oHtml.firstChild;
var oBody = oHtml.lastChild;
也可以使用childNodes特性來完成同樣的工作。只需把它當成普通的javascript array，使用方括號標記：
var oHead = oHtml.childNodes[0];
var oBody = oHtml.childNodes[1];
注意方括號標記其實是NodeList在javascript中的簡便實現。實際上正式的從childNodes列表中獲取子節點的方法是使用item()方法：
var oHead = oHtml.childNodes.item(0);
var oBody = oHtml.childNodes.item(1);
HTML DOM頁定義了document.body作為指向<body/>元素的指標。
var oBody = ducument.body;
有了oHtml,oHead和oBody這三個變數，就可以嘗試確定它們之間的關係：
alert(oHead.parentNode==oHtml);
alert(oBody.parentNode==oHtml);
alert(oBody.previousSibling==oHead);
alert(bHead.nextSibling==oBody);
alert(oHead.ownerDocument==document);
以上均outputs "true"。

3.處理特性
正如前面所提到的，即便Node介面已具有attributes方法，且已被所有型別的節點繼承，然而，只有
Element節點才能有特性。Element節點的attributes屬性其實是NameNodeMap,它提供一些用於訪問和處理其內容的方法：
getNamedItem(name)－－返回nodename屬性值等於name的節點;
removeNamedItem(name)－－刪除nodename屬性值等於name的節點;
setNamedItem(node)－－將node新增到列表中，按其nodeName屬性進行索引;
item(pos)－－像NodeList一樣，返回在位置pos的節點;
注：請記住這些方法都是返回一個Attr節點，而非特性值。

NamedNodeMap物件也有一個length屬性來指示它所包含的節點的數量。
當NamedNodeMap用於表示特性時，其中每個節點都是Attr節點，這的nodeName屬性被設定為特性名稱，而nodeValue屬性被設定為特性的值。例如，假設有這樣一個元素：
<p style="color:red" id="p1">Hello world!</p>
同時，假設變數oP包含指向這個元素的一個引用。於是可以這樣訪問id特性的值:
var sId = oP.attributes.getNamedItem("id").nodeValue;
當然，還可以用數值方式訪問id特性，但這樣稍微有些不直觀：
var sId = oP.attributes.item(1).nodeValue;
還可以通過給nodeValue屬性賦新值來改變id特性：
oP.attributes.getNamedItem("id").nodeValue="newId";
Attr節點也有一個完全等同於(同時也完全同步於)nodeValue屬性的value屬性，並且有name屬性和nodeName屬性保持同步。我們可以隨意使用這些屬性來修改或變更特性。
因為這個方法有些累贅，DOM又定義了三個元素方法來幫助訪問特性：
getAttribute(name)－－等於attributes.getNamedItem(name).value;
setAttribute(name,newvalue)－－等於attribute.getNamedItem(name).value=newvalue;
removeAttribute(name)－－等於attribute.removeNamedItem(name)。

4.訪問指定節點
(1)getElementsByTagName()
核心(XML) DOM定義了getElementsByTagName()方法，用來返回一個包含所有的tagName(標籤名)特性等於某個指定值的元素的 NodeList。在Element物件中，tagName特性總是等於小於號之後緊跟隨的名稱－－例如，<img />的tagName是"img"。下一行程式碼返回文件中所有<img />元素的列表：
var oImgs = document.getElementsByTagName("img");
把所有圖形都存於oImgs後，只需使用方括號或者Item()方法（getElementsByTagName()返回一個和childNodes一樣的NodeList），就可以像訪問子節點那樣逐個訪問這些節點了：
alert(oImgs[0].tagName);       //outputs "IMG"
假如只想獲取在某個頁面第一個段落的所有影象，可以通過對第一個段落元素呼叫getElementsByTagName()來完成，像這樣：
var oPs = document.getElementByTagName("p");
var oImgsInp = oPs[0].getElementByTagName("img");
可以使用一個星號的方法來獲取document中的所有元素：
var oAllElements = document.getElementsByTagName("*");
當引數是一個星號的時候，IE6.0並不返回所有的元素。必須使用document.all來替代它。
(2)getElementsByName()
HTML DOM 定義了getElementsByName()，這用來獲取所有name特性等於指定值的元素的。
(3)getElementById()
這是HTML DOM定義的第二種方法，它將返回id特性等於指定值的元素。在HTML中，id特性是唯一的－－這意味著沒有兩個元素可以共享同一個id。毫無疑問這是從文件樹中獲取單個指定元素最快的方法。
注：如果給定的ID匹配某個元素的name特性，IE6.0還會返回這個元素。這是一個bug，也是必須非常小心的一個問題。

5.建立新節點
最常用到的幾個方法是
createDocumentFragment()－－建立文件碎片節點
createElement(tagname)－－建立標籤名為tagname的元素
createTextNode(text)－－建立包含文字text的文字節點

createElement()、createTextNode()、appendChild()
<html>
    <head>
        <title>createElement() Example</title>
        <script type="text/javascript">
            function createMessage() {
                var oP = document.createElement("p");
                var oText = document.createTextNode("Hello World!");
                 oP.appendChild(oText);
                 document.body.appendChild(oP);
             }
        </script>
    </head>
    <body onload="createMessage()">
    </body>
</html>

removeChild()、replaceChild()、insertBefore()
刪除節點
<html>
    <head>
        <title>removeChild() Example</title>
        <script type="text/javascript">
            function removeMessage() {
                var oP = document.body.getElementsByTagName("p")[0];
                 oP.parentNode.removeChild(oP);
             }
        </script>
    </head>
    <body onload="removeMessage()">
        <p>Hello World!</p>
    </body>
</html>
替換
<html>
    <head>
        <title>replaceChild() Example</title>
        <script type="text/javascript">
            function replaceMessage() {
                var oNewP = document.createElement("p");
                var oText = document.createTextNode("Hello Universe!");
                 oNewP.appendChild(oText);
                var oOldP = document.body.getElementsByTagName("p")[0];
                 oOldP.parentNode.replaceChild(oNewP, oOldP);
             }
        </script>
    </head>
    <body onload="replaceMessage()">
        <p>Hello World!</p>
    </body>
</html>
新訊息新增到舊訊息之前
<html>
    <head>
        <title>insertBefore() Example</title>
        <script type="text/javascript">
            function insertMessage() {
                var oNewP = document.createElement("p");
                var oText = document.createTextNode("Hello Universe!");
                 oNewP.appendChild(oText);
                var oOldP = document.getElementsByTagName("p")[0];
                 document.body.insertBefore(oNewP, oOldP);
             }
        </script>
    </head>
    <body onload="insertMessage()">
        <p>Hello World!</p>
    </body>
</html>

javascript dom 操作詳解 js加強
1 、文件裡的每個節點都有屬性 nodeName 、 nodeValue 、 nodeType
nodeName 文字節點的的節點名是 #text , nodeName 是隻讀屬性
nodeValue 1 元素節點 2 屬性節點 3 文字節點只讀屬性
nodeType 不能用於元素節點返回 null
2 、 getElementsByTagName 返回一個節點集合
3 、 firstChild 、 lastChild 第一個元素節點，最後一個元素節點
4 、 childNodes 返回所有子節點列表
5 、 previousSibling 前一個兄弟節點 nextSibling 後一個兄弟節點 parentNode 返回父節點
6 、 hasChildNodes 文字節點可以作為元素節點的子節點，文字節點和屬性節點不可能再包含任何子節點
7 、 appendChild(node) 追加節點
8 、 removeChild() 移除一個節點
可以借用子節點的得到父節點，然後移除子節點。
9 、 replaceChild() 替換方法，有兩個引數，把第一個引數的內容替換掉第二個引數的內容
如果兩個都存在在 dom 中，第一個會出現在第二個的位置，而第二個將消失。
10 、 insertBefore(newnode,refnode) 在 refnode 之前插入 newnode
11 、建立節點
setAttribute() 為一個元素節點增加屬性
createElement() 建立一個元素節點
createTextNode() 建立一個文字節點
用這三個方法可以新增任何節點。
12 、 innerHTML 內部的 html 既可以得到，也可以設定
這裡有一個例子，聯動選擇地市，地市資訊在 xml 中
13 、呼叫函式時
1 、
node.onclick = xxx(); 得到函式的返回值，也就是執行了該函式
2 、
node.onclick = function(){
xxx();
}
得到了該函式的引用，只有觸發該事件時才執行。
14 、動態陣列的刪除：即陣列中的某個元素刪除後後面的元素會自動向前一格。
[“ 山東 ”, “ 山西 ”, “ 廣東 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
如果用 for(int i = 0 ;i<xx.length; i++) 會是
[“ 山西 ”, “ 廣東 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 四川 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 河南 ”, “ 河北 ”]
[“ 山西 ”, “ 廣西 ”, “ 河南 ”]
陣列越界
結論：動態陣列需要從後向前刪除
For(int i = xx.length ; i>0 ; i--)
記錄一個聯動選擇的例子

選擇一個省以後，會有相應的地市出現在另一個 select 中

City.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="cities.js"></script>
</head>
<body>
<select id="province">
<option value=""> 請選擇 ...</option>
<option value=" 河北省 "> 河北省 </option>
<option value=" 遼寧省 "> 遼寧省 </option>
<option value=" 山東省 "> 山東省 </option>
</select>
<select id="city"><option value="..."> 請選擇 ...</option></select>
</body>
</html>

cities.js

window.onload = function(){
// 解析 XML 文件 , 得到 xml 文件的 china 根節點
var xmlDocument = parseXml("cities.xml");
var chinaNode = xmlDocument.childNodes[1];
// 為 id="province" 的 select 節點新增 onchange 事件 , 獲取選擇的省的 value
var provinceNode = document.getElementById("province");
provinceNode.onchange = function(){
// ** 清空 provice 節點出 <option value="..."> 請選擇 ...</option> 的所有子節點 **
var cityNode = document.getElementById("city");
// cityNodeOptionNodes 陣列時活動的 , 所以需要從後向前清
var cityNodeOptionNodes = cityNode.getElementsByTagName("option");
var length = cityNodeOptionNodes.length;
for(var i = length - 1; i > 0; i--){
cityNode.removeChild(cityNodeOptionNodes[i]);
}
var provinceValue = this.value;
// 用 provinceValue 去 xml 文件中獲取對應的 province 節點
var provinceNodeInXmlFile = xmlDocument.selectSingleNode("china/province[@name='" + provinceValue + "']");
// 獲取 3 provinceNodeInXmlFile 的所有 city 子節點的文字值 : cityValue
var cityNodesInXmlFile = provinceNodeInXmlFile.getElementsByTagName("city");
for (var i = 0; i < cityNodesInXmlFile.length; i++) {
var cityNodeInXmlFile = cityNodesInXmlFile[i];
var cityValue = cityNodeInXmlFile.firstChild.nodeValue;
// 利用得到的文字值建立 option 節點 : <option value='cityValue'>cityValue</option>
var optionNode = document.createElement("option");
optionNode.setAttribute("value", cityValue);
var optionNodeTextNode = document.createTextNode(cityValue);
optionNode.appendChild(optionNodeTextNode);
// 把建立好的 option 節點新增到 id="city" 的 select 節點中
cityNode.appendChild(optionNode);
}
};
// 解析 xml 檔案的函式
function parseXml(fileName){
//IE 核心的瀏覽器
if (window.ActiveXObject) {
// 建立 DOM 解析器
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
// 載入 XML 文件 , 獲取 XML 文件物件
doc.load(fileName);
return doc;
}
//Mozilla 瀏覽器
else
if (window.DOMParser) {
// 建立 DOM 解析器
var p = new DOMParser();
// 建立 DOM 解析器
return p.parseFromString(fileName, "text/xml");
}
else {
return false;
}
}
}

cities.xml

<?xml version="1.0" encoding="GB2312"?>
<china>
<province name=" 河北省 ">
<city> 石家莊 </city>
<city> 邯鄲 </city>
<city> 唐山 </city>
<city> 張家口 </city>
<city> 廊坊 </city>
</province>
<province name=" 遼寧省 ">
<city> 瀋陽 </city>
<city> 大連 </city>
<city> 鞍山 </city>
<city> 撫順 </city>
<city> 鐵嶺 </city>
</province>
<province name=" 山東省 ">
<city> 濟南 </city>
<city> 青島 </city>
<city> 威海 </city>
<city> 煙臺 </city>
<city> 濰坊 </city>
</province>
</china>

table方法
為了協助建立表格，HTML DOM給<table/>,<tbody/>和<tr/>等元素新增了一些特性和方法。
給<table/>元素新增了以下內容：
特性/方法說明
caption 指向<caption/>元素並將其放入表格
tBodies <tbody/>元素的集合
tFoot 指向<tfoot/>元素（如果存在）
tHead 指向<thead/>元素（如果存在）
rows 表格中所有行的集合
createTHead() 建立<thead/>元素並將其放入表格
createTFood() 建立<tfoot/>元素並將其放入表格
createCpation() 建立<caption/>元素並將其放入表格
deleteTHead() 刪除<thead/>元素
deleteTFood() 刪除<tfoot/>元素
deleteCaption() 刪除<caption/>元素
deleteRow(position) 刪除指定位置上的行
insertRow(position) 在rows集合中的指定位置上插入一個新行

<tbody/>元素新增了以下內容
特性/方法說明
rows <tbody/>中所有行的集合
deleteRow(position) 刪除指定位置上的行
insertRow(position) 在rows集合中的指定位置上插入一個新行

<tr/>元素新增了以下內容
特性/方法說明
cells <tr/>元素中所有的單元格的集合
deleteCell(postion) 刪除給定位置上的單元格
insertCell(postion) 在cells集合的給點位置上插入一個新的單元格

8.遍歷DOM
NodeIterator，TreeWalker
DOM Level2的功能，這些功能只有在Mozilla和Konqueror/Safari中才有，這裡就不介紹了

這些DOM方法同樣適用於XML。所有全面支援DOM 1.0的瀏覽器都能很好地執行本篇的例項，比如IE5，Firefox等。
概況－ Sample1.html
　　這篇文章通過例項程式碼介紹DOM。請從嘗試下面的HTML例子開始。它使用DOM 1的方法由JavaScript動態建立一個HTML表格。它建立一個由四個包含文字內容的單元格組成的小表格。單元格的文字內容是：“單元格是第y行第x列”，表示單元格在表格中的行數和列數。

<html>
<head>
<title>例項程式碼 - 使用JavaScript和DOM建立HTML表格</title>
<script>
function start() {
//獲取body標籤
var mybody = document.getElementsByTagName("body")[0];

// 建立一個<table>元素和一個<tbody>元素
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");

//建立所有的單元格
for(var j = 0; j < 2; j++) {
// 建立一個<tr>元素
mycurrent_row = document.createElement("tr");
for(var i = 0; i < 2; i++) {
// 建立一個<td>元素
mycurrent_cell = document.createElement("td");
//建立一個文字節點
currenttext = document.createTextNode("單元格是第"+j+"行，第"+i+"列");
// 將建立的文字節點新增到<td>裡
mycurrent_cell.appendChild(currenttext);
// 將列<td>新增到行<tr>
mycurrent_row.appendChild(mycurrent_cell);
}
// 將行<tr>新增到<tbody>
mytablebody.appendChild(mycurrent_row);
}
// 將<tbody>新增到<table>
mytable.appendChild(mytablebody);
//將<table>新增到<body>
mybody.appendChild(mytable);
// 將表格mytable的border屬性設定為2
mytable.setAttribute("border", "2");
}
</script>
</head>
<body onload="start()">
</body>
</html>

注意我們建立各元素和文位元組點的順序：
1.建立< table >元素
2.建立< table >的子元素< tbody >
3.使用一個迴圈來建立< tbody >的子元素< tr >
4.分別使用迴圈為每一個< tr >建立子元素< tb >
5.為每一個< tb >建立文字節點
建立完< table >,< tbody >,< tr >,< td >元素和文字節點，我們使用相反的順序把它們分別新增到自己的父節點。
1.將建立的文字節點新增到< td >裡
mycurrent_cell.appendChild(currenttext);
2.將列< td >新增到行< tr >
mycurrent_row.appendChild(mycurrent_cell);
3.將行< tr >新增到< tbody >
mytablebody.appendChild(mycurrent_row);
4.將< tbody >新增到< table >
mytable.appendChild(mytablebody);
5.將< table >新增到< body >
mybody.appendChild(mytable);
記住這個方法。當你使用W3C DOM時會經常用到它。首先，你從上向下建立元素；然後從下向上把它們新增到父節點。
這是JavaScript程式碼生成的HTML：
...
<table border=5>
<tr><td>單元格是第0行，第0列</td><td>單元格是第0行，第1列</td></tr>
<tr><td>單元格是第1行，第0列</td><td>單元格是第1行，第1列</td></tr>
</table>
...
這是程式碼生成的表格元素和它的子元素的DOM物件樹：

　　你只需使用少量的DOM方法就可以構造這樣一個表格和他的子元素。記住要時刻謹記你將建立的構造的模型樹；這樣會使編寫程式碼更加簡單。在圖中的< table >樹裡，< table >有一個子元素< tbody >。< tbody >有兩個子元素。< tbody >的每個子元素（< tr >）都有兩個子元素< td >。最後，每個< td >有一個子元素：一個文字節點。　　
基本的DOM方法－ Sample2.html
　　getElementByTagName方法適用於文件和元素，所以文件根物件和所有的元素物件一樣有 getElementByTagName 方法。你可以使用 element.getElementsByTagName(tagname) 來獲取某個元素所有子元素的列表，使用標籤名選擇它們。
　　element.getElementsByTagName 返回一個有特定標籤名的子元素的列表。你可以通過呼叫一個item方法（傳遞一個index引數給它）來從這個子元素列表中獲取一個元素。請注意列表第一個子元素的index為0。下一個主題繼續前面的Table例子。下面這個例項更加簡單，顯示了一些基本的方法：

<html>
<head>
<title>例項程式碼 - 使用JavaScript和DOM建立HTML表格</title>
<script>
function start() {
// 獲取一個包含所有body元素的列表（將只有一個）
// 然後選擇列表裡的第一個元素
myBody = document.getElementsByTagName("body")[0];

// 獲取body字元素中所有的p元素
myBodyElements = myBody.getElementsByTagName("p");

//獲取p元素列表的第二個元素（索引從0開始）
myP = myBodyElements[1];
}
</script>
</head>
<body onload="start()">
<p>hi</p>
<p>hello</p>
</body>
</html>

在這個例子裡，我們設定myP變數為表示body裡第二個p元素的DOM物件。
1.獲取一個包含所有body元素的列表
myBody = document.getElementsByTagName("body")[0];
因為一個有效的html文件只有一個body元素，這個列表講只有一項。我們通過使用 [0] 選取列表的第一個元素來得到它。
2.獲取blog子元素裡所有的p元素
myBodyElements = myBody.getElementsByTagName("p");
3.選取p元素列表的第二項
myP = myBodyElements[1];

一旦獲得一個html元素的DOM物件，你就可以設定它的屬性。比如，你想設定style background color屬性，只需要新增：
myP.style.background = "rgb(255,0,0)";
使用document.createTextNode(”..”)建立文字節點
使用文件物件呼叫createTextNode方法建立你的文字節點。你只需要輸入文字內容。返回值是一個表示這個文字節點的物件。
myTextNode = document.createTextNode("world");
以上程式碼建立一個文字資料是“word”的TEXT_NODE型別（文字塊）節點，變數myTextNode指向這個節點物件。你需要設定這個文字節點為其他節點元素的位元組點來插入這個文字到你的html頁面裡。
使用appendChild(..)插入元素
所以，通過呼叫myP.appendChild([node_element])，你設定這個文字節點為第二個p元素的位元組點。
myP.appendChild(myTextNode);
測試這個例子，注意“hello”和“world”兩個詞是連在一起的：“helloworld”。所以在當你看到html頁面時兩個文字節點hello和world看起來好像是一個節點，而實際上在這個文件模型裡有兩個節點。第二個節點是一個新的TEXT_NODE型別節點，並且是第二個p標籤的第二個位元組點。下圖在文件樹裡顯示了剛建立的文字節點。

createTextNode和appendChild是在hello和world之間新增空格的一種簡單的方法。需要特別注意的是appendChild方法將新增在最後一個子節點後面，就像world被新增到hello後面。所以如果你想在hello和world之間新增一個文字節點需要使用insertBefore方法而不是appendChild。
使用文件物件和createElement(..)方法建立新元素
　　你可以使用createElement方法建立新的HTML元素或者其他任何你想要的其他元素。例如，如果你想為< body >元素新增一個位元組點< p >元素，可以使用前例中的myBody新增一個新的元素節點。建立一個節點只需要呼叫document.createElement(”tagname”)。例如：
myNewPTAGnode = document.createElement("p");
myBody.appendChild(myNewPTAGnode);

使用removeChild(..)方法刪除節點
　　每個節點都可以刪除。下面這行程式碼刪除myP（第二個< p >元素）裡包含單詞world的文字節點。
myP.removeChild(myTextNode);
　　最後你可以把包含單詞world的文字節點myTextNode新增到新建立的< p >元素裡：
myNewPTAGnode.appendChild(myTextNode);
　　修正的物件樹最後像這樣：

動態建立一個表格（回到Sample1.html）
　　文章的剩餘部分將回到Sample1.html。下圖顯示了例子中建立的表格的物件樹結構。
回顧HTML表格結構

建立元素節點並把它們新增到文件樹
建立sample1.html裡的表格的基本步驟：
獲取body物件（文件物件的第一項）建立所有的元素最後，按照上圖的表格結構新增每一個位元組點下面的原始碼是sample1.html的註釋
start函式的最後有一行新程式碼，使用另一個DOM方法setAttribute設定了表格的border屬性。setAttribute方法有兩個引數：屬性名和屬性值。你可以使用setAttribute方法設定任何元素的任何屬性。

<head>
<title>例項程式碼 - 使用JavaScript和DOM建立HTML表格</title>
<script>
function start() {
// 獲取body
var mybody = document.getElementsByTagName("body")[0];

// 建立<table>和<tbody>元素
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");

//建立所有的單元格
for(var j = 0; j < 2; j++) {
// 建立一個 <tr> 元素
mycurrent_row = document.createElement("tr");

for(var i = 0; i < 2; i++) {
// 建立一個<td> 元素
mycurrent_cell = document.createElement("td");
// 建立一個文字節點
currenttext = document.createTextNode("單元格是第" + j + "行，第" + i + "列");
// 把建立的文字節點新增到<td>元素
mycurrent_cell.appendChild(currenttext);
// 把<td>新增到<tr>行
mycurrent_row.appendChild(mycurrent_cell);
}
// 把<tr>行新增到<tbody>
mytablebody.appendChild(mycurrent_row);
}

// 把 <tbody> 新增到 <table>
mytable.appendChild(mytablebody);
// 把 <table> 新增到 <body>
mybody.appendChild(mytable);
// 把mytable的border屬性設定為2;
mytable.setAttribute("border","2");
}
</script>
</head>
<body onload="start()">
</body>
</html>

使用DOM和CSS處理表格
從表格中獲取一個文字節點
　　這個例子介紹兩個新的DOM屬性。首先使用childNodes屬性獲取mycel的位元組點列表。這個childNodes列表包含所有的位元組點，不管它們的名稱和型別是什麼。像getElementsByTagName方法一樣，它返回一個位元組點列表，使用 [ x ] 來獲取想要的位元組點項。這個例子將myceltext儲存為表格第二行第二個單元格的文字節點。最後，它建立一個新的包含myceltext 的data 屬性的文字節點，並使它成為< body >元素的子節點，來顯示這個例子的最後結果。
如果你的物件是文字節點，你可以使用data屬性來獲取它的內容

mybody = document.getElementsByTagName("body")[0];
mytable = mybody.getElementsByTagName("table")[0];
mytablebody = mytable.getElementsByTagName("tbody")[0];
myrow = mytablebody.getElementsByTagName("tr")[1];
mycel = myrow.getElementsByTagName("td")[1];

// mycel的位元組點列表的第一項
myceltext=mycel.childNodes[0];

// currenttext的內容是myceltext的data
currenttext=document.createTextNode(myceltext.data);
mybody.appendChild(currenttext);

獲取一個屬性值
　　在sample1的最後有一個單元格使用了mytable物件的setAttribute方法。這個單元格用來設定這個表格的border屬性。使用getAttribute方法來獲取這個屬性：
mytable.getAttribute("border");
通過改變style屬性隱藏列
　　當你使用一個JavaScript變數指向物件，你可以立即設定它的style屬性。下面的程式碼是sample1.html的修改，第二列的單元格都被隱藏，第一列的單元格背景改為紅色。注意style屬性是直接設定的。

<html>
<body onload="start()">
</body>
<script>
function start() {
var mybody =document.getElementsByTagName("body")[0];
mytable = document.createElement("table");
mytablebody = document.createElement("tbody");

for(var j = 0; j < 2; j++) {
mycurrent_row=document.createElement("tr");
for(var i = 0; i < 2; i++) {
mycurrent_cell = document.createElement("td");
currenttext = document.createTextNode("單元格是:" + i + j);
mycurrent_cell.appendChild(currenttext);
mycurrent_row.appendChild(mycurrent_cell);
// 如果在第0列設定單元格背景色
// 如果在第1列隱藏單元格
if (i == 0) {
mycurrent_cell.style.background = "rgb(255,0,0)";
} else {
mycurrent_cell.style.display = "none";
}
}
mytablebody.appendChild(mycurrent_row);
}
mytable.appendChild(mytablebody);
mybody.appendChild(mytable);
}
</script>
</html>

利用js來動態建立表格有兩種格式，appendChild()和insertRow、insertCell()。但第一種有可能在IE上有問題，所以推薦使用第二種。
1、insertRow(index)：index從0開始
這個函式將新行新增到index的那一行前，比如insertRow(0),是將新行新增到第一行之前。預設的insertRow()函式相當於 insertRow(-1)，將新行新增到表的最後。一般我們在使用的時候都是：
objTable.insertRow (objTable.rows.length)就是為表格objTable在最後新增一行。
insertCell()和insertRow的用法相同。
2、deleteRow(index)：index從0開始
刪除指定位置的行，要傳入的引數：Index是行在表格中的位置，可以下面的方法取得然後去刪除：
var row = document.getElementById("行的Id");
var index = row.rowIndex; //有這個屬性
objTable.deleteRow(index);
在使用過程中，刪除表格的行的時候，如果刪除了某一行，那麼表格行數是馬上就變化的，rows.length總是在變小，所以如果你要刪除表格的所有行：

function removeAllRow() {
var objTable = document.getElementById("myTable");
var length = objTable.rows.length;
for (var i = 1; i < length; i++) {
objTable.deleteRow(i);
}
}

3、setAttribute()方法,動態設定單元格與行的屬性
格式如下：setAttribute(屬性，屬性值)
var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border", 1); //為表格設定邊框為1
在使用的時候遇到一個設定樣式的問題，不能用
setAttribute("class","inputbox1");而應該使用
setAttribute("className","inputbox1")，
4、建立表格
瞭解了行<tr>與單元格<td>的增刪那就可以建立表格了。
第一步：你需要有一個你去動態變化的表格，這裡講的是已經存在頁面的表格,我們設定一個id：myTable
　　var objMyTable = document.getElementById("myTable");
第二步：建立行與列的物件

var index = objMyTable.rows.length;
var nextRow = objMyTable.insertRow(index); //在最後的行
//var nextRow = objMyTable.insertRow(0); //在最前的行

下面是示例程式碼

<script type="text/javascript">
var Count = false; //控制交替換行
var NO = 1; //行號
function addRow() {
Count = !Count;
//新增一行
var newTr = table.insertRow(table.rows.length); //在最後新增一行
//var newTr = table.insertRow(0); //在最前面新增一行
//新增兩列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//設定列內容和屬性
if (Count) {
newTr.style.background = "#FFE1FF";
}
else {
newTr.style.background = "#FFEFD5";
}
NO++;
newTd0.innerHTML = '<input type=checkbox id="box' + NO + '" />';
newTd1.innerText = "第" + NO + "行";
newTd2.innerHTML = '<input type="text" id="Text' + NO + '" />';
}
</script>
<body>
<form id="form1" runat="server">
<input type="button" value="插入行" onclick="addRow()" />
<table width="399" border="0" cellspacing="1" id="table" style="font-size: 14px;">
<tr bgcolor="#FFEFD5">
<td width="6%">
<input type="checkbox" id="box1" />
</td>
<td>
第1行
</td>
<td>
<input id="Text1" type="text" />
</td>
</tr>
</table>
</form>
</body>

所以推薦大家使用第二種方法，看下面的解決和使用方法
1、inserRow()和insertCell()函式
insertRow()函式可以帶引數，形式如下：
insertRow(index)：index從0開始
這個函式將新行新增到index的那一行前，比如insertRow(0),是將新行新增到第一行之前。預設的insertRow()函式相當於insertRow(-1)，將新行新增到表的最後。一般我們在使用的時候都是：objTable.insertRow(objTable.rows.length).就是為表格objTable在最後新增一行。
insertCell()和insertRow的用法相同，這裡就不再說了。
2、deleteRow()和deleteCell()方法
deleteRow()函式可以帶引數，形式如下：deleteRow(index)：index從0開始
和上面兩個方法差不多的意思，就是刪除指定位置的行和單元格。要傳入的引數：Index是行在表格中的位置，可以下面的方法取得然後去刪除：

var row=document.getElementById("行的Id");
var index=row.rowIndex;//有這個屬性，嘿嘿
objTable.deleteRow(index);
在使用過程中我碰到的一個問題跟大家說一下，就是刪除表格的行的時候，如果你刪除了某一行，那麼表格行數是馬上就變化的，所以如果你要刪除表格的所有行，下面的程式碼是錯誤的：

function clearRow(){
   objTable= document.getElementById("myTable");

   for( var i=1; i<objTable.rows.length ; i++ )
   {
   tblObj.deleteRow(i);
      }
}
這段程式碼要刪除原來的表格的表體，有兩個問題。首先不能是deleteRow(i)，應該是deleteRow(1)。因為在刪除表格行的時候，表格的行數在變化，這就是問題的關鍵，rows.length總是在變小，刪除的行數總是會比預想的要少一半，所以正確的刪除表格的行的程式碼應該這樣：

function clearRow(){
   objTable= document.getElementById("myTable");
   var length= objTable.rows.length ;
   for( var i=1; i<length; i++ )
   {
       objTable.deleteRow(i);
      }
}
3、動態設定單元格與行的屬性
A、採用setAttribute()方法，格式如下：setAttribute(屬性，屬性值)
說明：這個方法幾乎所有的DOM物件都可以使用，第一個引數是屬性的名稱，比如說：border，第二個就是你要為border設定的值了，比如：1

var objMyTable = document.getElementById("myTable");
objMyTable.setAttribute("border",1);//為表格設定邊框為1
其他的比如你要為一個TD設定高度，同樣先取得這個TD物件，然後使用setAttribute()方法

var objCell = document.getElementById("myCell");
objCell.setAttribute("height",24);//為單元格設定高度為24
在使用的時候遇到一個設定樣式的問題，不能用setAttribute("class","inputbox2");而應該使用setAttribute("className","inputbox2")，呵呵，其他我估計也有同樣的問題，有些屬性和我們在DW裡面的不一致，呵呵，大家自己摸索吧。
B、直接賦值

var objMyTable = document.getElementById("myTable");
objMyTable.border=1;//為表格設定邊框為1
這個方法也全部適用，呵呵。
4、建立表格
瞭解了行<tr>與單元格<td>的增刪那就可以建立表格了。
第一步：你需要有一個你去動態變化的表格，我這裡講的是已經存在頁面的表格，我們要設定一個id:myTable

var objMyTable = document.getElementById("myTable");
第二步：建立行與列的物件

var index = objMyTable.rows.length-1;
var nextRow = objMyTable.insertRow(index);//要新增的行，我這裡是從倒數第二行開始新增的
//單元格箱號
var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = " <input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
newCellCartonNo.setAttribute("className","tablerdd");
這樣就搞定了，可以簡單的建立一個行和列了。具體的程式碼我貼在下面。只是很簡單的例子，不過方法就大概是上面的了，呵呵，慢慢摸索吧~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>藍光-BlueShine</title>
<script language="JavaScript">
var Count=false,NO=1;
function addRow(){
Count=!Count;
//新增一行
var newTr = testTbl.insertRow(testTbl.rows.length);
//新增兩列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//設定列內容和屬性
if(Count){newTr.style.background="#FFE1FF";}
else {newTr.style.background="#FFEFD5";}
newTd0.innerHTML = '<input type=checkbox id="box4">';
NO++
newTd1.innerText="第"+ NO+"行";
}
</script>
</head>
<body>
<table width="399" border=0 cellspacing="1" id="testTbl" style="font-size:14px;" >
<tr bgcolor="#FFEFD5">
<td width=6%><input type=checkbox id="box1"></td>
<td >第1行</td>
<td > </td>
</tr>
</table>
<label>
<input type="button" value="插入行" onclick="addRow()" />
</label>
</body>
</html>
5、appendChild()方法

<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
<p>
    <input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" />
    <input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>
<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">

</script>
<style type="text/css">

</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
<p>
    <input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" />
    <input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>

本文例項總結了JavaScript節點及列表操作的方法。分享給大家供大家參考。具體如下：
（1）建立新節點
createDocumentFragment() //建立一個DOM片段
createElement() //建立一個具體的元素
createTextNode() //建立一個文字節點

（2）新增、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore()

（3）查詢
getElementsByTagName() //通過標籤名稱
getElementsByName() //通過元素的Name屬性的值
getElementById() //通過元素Id，唯一性

本節要用到的html例子
<ul id="myList">
<li>專案一</li>
<li>專案二</li>
<li>專案三</li>
</ul>

1.建立元素節點
document.createElement() 方法用於建立元素，接受一個引數，即要建立元素的標籤名，返回建立的元素節點
var div = document.createElement("div"); //建立一個div元素
div.id = "myDiv"; //設定div的id
div.className = "box"; //設定div的class
建立元素後還要把元素新增到文件樹中
2.新增元素節點
appendChild() 方法用於向childNodes列表的末尾新增一個節點，返回要新增的元素節點
var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //建立li
li.innerHTML = "專案四"; //向li內新增文字
ul.appendChild(li); //把li 新增到ul子節點的末尾
新增後:
<ul id="myList">
<li>專案一</li>
<li>專案二</li>
<li>專案三</li>
<li>專案四</li>
</ul>

appendChild() 方法還可以新增已經存在的元素，會將元素從原來的位置移到新的位置
var ul = document.getElementById("myList"); //獲得ul
ul.appendChild(ul.firstChild); //把ul的第一個元素節點移到ul子節點的末尾
執行後(IE)：
<ul id="myList">
<li>專案二</li>
<li>專案三</li>
<li>專案一</li>
</ul>

insertBefore() 方法，如果不是在末尾插入節點，而是想放在特定的位置上，用這個方法，該方法接受2個引數，第一個是要插入的節點，第二個是參照節點，返回要新增的元素節點
var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //建立li
li.innerHTML= "專案四"; //向li內新增文字
ul.insertBefore(li,ul.firstChild); //把li新增到ul的第一個子節點前

新增後:
<ul id="myList">
<li>專案四</li>
<li>專案一</li>
<li>專案二</li>
<li>專案三</li>
</ul>

var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //建立li
li.innerHTML= "專案四"; //向li內新增文字
ul.insertBefore(li,ul.lastChild); //把li新增到ul的子節點末尾

新增後:
<ul id="myList">
<li>專案一</li>
<li>專案二</li>
<li>專案三</li>
<li>專案四</li>
</ul>

var ul = document.getElementById("myList"); //獲得ul
var li = document.createElement("li"); //建立li
li.innerHTML= "專案四"; //向li內新增文字
var lis = ul.getElementsByTagName("li") //獲取ul中所有li的集合
ul.insertBefore(li,lis[1]); //把li新增到ul中的第二個li節點前

新增後:
<ul id="myList">
<li>專案一</li>
<li>專案四</li>
<li>專案二</li>
<li>專案三</li>
</ul>

3.移除元素節點
removeChild() 方法，用於移除節點，接受一個引數，即要移除的節點，返回被移除的節點，注意被移除的節點仍然在文件中，不過文件中已沒有其位置了
var ul = document.getElementById("myList"); //獲得ul
var fromFirstChild = ul.removeChild(ul.firstChild); //移除ul第一個子節點
var ul = document.getElementById("myList"); //獲得ul
var lis = ul.getElementsByTagName("li") //獲取ul中所有li的集合
ul.removeChild(lis[0]); //移除第一個li，與上面不同，要考慮瀏覽器之間的差異

4.替換元素節點
replaceChild() 方法，用於替換節點，接受兩個引數，第一引數是要插入的節點，第二個是要替換的節點，返回被替換的節點
var ul = document.getElementById("myList"); //獲得ul
var fromFirstChild = ul.replaceChild(ul.firstChild); //替換ul第一個子節點
var ul = document.getElementById("myList"); //獲得ul;
var li = document.createElement("li"); //建立li
li.innerHTML= "專案四"; //向li內新增文字
var lis = ul.getElementsByTagName("li") //獲取ul中所有li的集合
var returnNode = ul.replaceChild(li,lis[1]); //用建立的li替換原來的第二個li

5.複製節點
cloneNode() 方法，用於複製節點，接受一個布林值引數， true 表示深複製（複製節點及其所有子節點）， false 表示淺複製（複製節點本身，不復制子節點）
var ul = document.getElementById("myList"); //獲得ul
var deepList = ul.cloneNode(true); //深複製
var shallowList = ul.cloneNode(false); //淺複製

下面再給大家一個JavaScript建立列表專案，複製子節點的完整例項：
這段JavaScript程式碼顯示和建立列表專案，複製子節點、複製節點樹，是相當有用的一個例子，在建立樹形選單的時候尤其有用處。
執行效果如下圖所示：

具體程式碼如下：
<html>
<head>
<title>建立列表專案</title>
<script language="JavaScript">
function printChilds(objNode) {
var strMsg = "節點名稱 =" + objNode.nodeName + "\n";
if (objNode.hasChildNodes()){
var nodeCount = objNode.childNodes.length;
strMsg += "子節點數 = " + objNode.childNodes.length + "\n";
for(var i = 0; i < nodeCount; i++)
strMsg += "標記名稱 = " + objNode.childNodes[i].nodeName + "\n";
alert(strMsg);
}
}
function copyNode(objNode, objDupNode, deep){
var tempNode = objDupNode.cloneNode(deep);
objNode.appendChild(tempNode);
}
</script>
</haed>
<body id="myBody">
<h2>建立列表專案</h2>
<hr>
<ul id="myUL">
<li>專案1
<li>專案2
<ol id="myOL">
<li>次專案1
<li>次專案2
</ol>
<li>專案3
</ul>
<form>
<input type="button" value="顯示列表的子節點" onclick="printChilds(myUL)">
<input type="button" value="複製節點" onclick="copyNode(myUL, myUL.childNodes[1], false)">
<input type="button" value="複製節點樹" onclick="copyNode(myUL.lastChild, myOL, true)">
</form>
</body>
</html>

JavaScript DOM、BOM操作
2020-12-14
JavaScript
JavaScript 操作 DOM 的那些坑
2016-09-26
JavaScript
JavaScript操作DOM常用的API
2018-05-10
JavaScriptAPI
使用原生 JavaScript 操作 DOM
2017-10-21
JavaScript
JavaScript ----- 操作DOM物件的屬性
2018-06-18
JavaScript物件
【JavaScript】DOM之樣式操作
2018-08-31
JavaScript
JavaScript基礎之DOM操作
2018-11-11
JavaScript
JavaScript5：常用DOM操作
2018-11-14
JavaScript
JavaScript 操作DOM效能優化
2018-12-27
JavaScript優化
JavaScript入門⑦-DOM操作大全
2022-12-07
JavaScript
[譯]13 種有用的 JavaScript DOM 操作
2019-06-04
JavaScript
JavaScript dom操作程式碼例項
2017-04-15
JavaScript
【面試必備】javascript操作DOM元素
2013-12-27
面試JavaScript
JavaScript 操作 DOM 常用 API 總結
2016-01-05
JavaScriptAPI
Javascript操作DOM常用API總結
2015-12-01
JavaScriptAPI
JavaScript的字串、陣列以及DOM操作總結
2018-12-30
JavaScript字串陣列
僅100行的JavaScript DOM操作類庫
2014-04-11
JavaScript
為什麼說JavaScript中的DOM操作很慢
2016-03-31
JavaScript
1.14 JavaScript5：常用DOM操作
2018-11-09
JavaScript
Javascript-DOM基本操作總結(1)
2016-05-04
JavaScript
瀏覽器中的JavaScript：文件物件模型與 DOM 操作
2019-04-30
瀏覽器JavaScript物件模型
js的dom操作
2018-12-09
JS
jQuery的DOM操作、
2017-03-09
jQuery
JQuery的DOM操作
2024-09-07
jQuery
javascript DOM元素節點操作簡單介紹
2017-04-14
JavaScript
JavaScript入門篇--你也有控制權（DOM操作）
2017-09-21
JavaScript
JavaScript學習9：DOM操作表格及樣式
2015-05-31
JavaScript
DOM 操作
2018-07-28
DOM操作
2018-05-07
前端新手必看的JavaScript常用DOM操作方法和函式
2017-05-10
前端JavaScript函式
JavaScript中的DOM和Timer(簡單易用的基本操作)
2024-10-13
JavaScript
BOM與DOM之DOM操作
2022-02-10
【零基礎上手JavaWeb】快速上手 JavaScript DOM操作
2020-12-05
WebJavaScript
jQuery中的DOM操作
2018-09-06
jQuery
jquery 中的dom操作
2018-12-15
jQuery
常見的DOM操作
2018-07-19
angular中的dom操作
2017-03-31
Angular
react中的DOM操作
2018-04-04
React

javascript DOM的操作

相關文章