JavaScript的DOM操作(節點操作)

創建節點
createElement()
var node = document.createElement(“div”);
沒什麼可說的，創建一個元素節點，但注意，這個節點不會被自動添加到文檔（document）裏。

2、創建文本節點
createTextNode()
var value = document.createTextNode(“text”);
創建一個文本節點，常用來往元素節點裏添加內容，也不會自動添加到文檔裏。
很多人知道innerHTML，不知道這個方法，這個添加的是靜態文本，如果插入的內容不帶HTML格式，用createTextNode比innerHTML安全，而innerText又有瀏覽器不兼容的問題，因此用createTextNode很好使。

3、插入節點到最後
appendChild()
node.appendChild(value);
將節點插入到最後，上面兩個創建的節點不會自動添加到文檔裏，所以就要使appendChild來插入了。
如果是新的節點是插入到最後，而如果是已經存在的節點則是移動到最後，這點很多人注意不到，理解了這點，再和下面的方法結合，可以方便的移動操作節點。

4、插入節點到目標節點的前面
insertBefore()
var node = document.createElement(“div”);
var _p = document.createElement(“p”);
var _span = document.createElement(“span”);
node.appendChild(_p);
node.insertBefore(_span, _p);
<span>節點在<p>節點前面插入，其中第二個參數是可選，如果第二個參數不寫，將默認添加到文檔的最後，相當於appendChild。
同樣，appendChild和insertBefore，如果是已存在節點，他們都會自動先刪除原節點，然後移動到你指定的地方。
將節點移動到最前面的技巧：
if (node.parentNode.firstChild)

node.parentNode.insertBefore(node, node.parentNode.firstChild);
else node.parentNode.appendChild(node);

5、複製節點
cloneNode(boolean)
node.cloneNode(true);
node.cloneNode(false);
複製上面的div節點，參數true，複製整個節點和裏面的內容；false，只複製節點不要裏面的內容，複製後的新節點，也不會被自動插入到文檔，需要用到3和4的方法去插入。

6、刪除節點
removeChild()
node.removeChild(_p);
把上面的<p>節點從<div>裏刪除。不過一般情況下，不知道要刪除的節點的父節點是什麼，因此一般這麼使：node.parentNode.removeChild(node);

7、替換節點
repalceChild(newNode, oldNode)
node.repalceChild(_p, _span);
把上面的<span>節點替換成<p>節點，注意無論是<span>還是<p>，都必須是<div>的子節點，或是一個新的節點。

8、設置節點屬性
setAttribute()
node.setAttribute("title","abc");
不解釋了，很容易明白。就說一句，用這個方法設置節點屬性兼容好，但class屬性不能這麼設置。

9、獲取節點屬性
getAttribute()
node.getAttribute("title");
同8，獲取節點屬性。

10、判斷元素是否有子節點
hasChildNodes
node.hasChildNodes;
返回boolean類型，因此將新節點插入到最前面的技巧：
var node = document.createElement(“div”);
var newNode = document.createElement(“p”);
if (node.hasChildNodes) node.insertBefore(newNode, node.firstChild);
else node.appendChild(node);

最後是DOM的屬性：

nodeName - 節點的名字；
nodeType - 返回一個整數，代表這個節點的類型，1-元素節點，2-屬性節點，3-文本節點；
nodeValue - 返回一個字符串，這個節點的值；
childNodes - 返回一個數組，數組由元素節點的子節點構成；
firstChild - 返回第一個子節點；
lastChild - 返回最後一個子節點；
nextSibling - 返回目標節點的下一個兄弟節點，如果目標節點後面沒有同屬於一個父節點的節點，返回null；
previousSibling - 返回目標節點的前一個兄弟節點，如果目標節點前面沒有同屬於一個父節點的節點，返回null；
parentNode - 返回的節點永遠是一個元素節點，因爲只有元素節點纔有可能有子節點，document節點將返回null；

javaScript操作DOM 建立增加刪除克隆訪問節點示例：

1. getElementById(id)

這是通過id來訪問某一元素，最常用的之一，例：

<html>

<body>

test

</div>

alert(document.getElementById("myid").innerHTML);

</script>

</body>

</html>

注意點：如果元素的ID不是唯一，則會取得第一個該ID名稱的元素

2. getElementsByName(name)

這是通過name來取得某一堆元素（作爲數組），看 Element後面有個小s就知道了，ID是HTML文檔中要求唯一的，name可以不是唯一，如checkbox、radio等地方會用到多個 input用同一個name來識別是否爲同黨。對了，getElementsByName(name)僅用於取得input、radio、 checkbox等元素，如<inputname="myradio" type="radio" />

3. getElementsByTagName(tagname) 看這方法就知道這也是取得某一堆元素（作爲數組），是通過TagName也就是標籤名來取得。你可以遍歷這個數組獲得每一個單獨的元素。當一個DOM結構很大時，可以通過它來有效地縮小搜查範圍。

<html>

<head>

function test()

{

testall=document.getElementsByTagName("body");

testbody=testall.item(0);

//獲得所有tagName是body的元素（當然每個頁面只有一個）

testall=testbody.getElementsByTagName("p");

// 獲得body子元素種的所有P元素

testnode=testall.item(1);

// 獲得第二個P元素

alert(testnode.firstChild.nodeValue);

//顯示這個元素的文本

}

</script>

</head>

<body>

<p>hello</p>

test();

</script>

</body>

</html>

4. appendChild(node)

向當前的元素（應該叫對象比較恰當）追加節點。

<html>

<body>

<head>

</head>

varnewdiv=document.createElement("div")

varnewtext=document.createTextNode("A newdiv")

newdiv.appendChild(newtext)

document.getElementById("test").appendChild(newdiv)

</script>

</body>

</html>

剛纔我在第一個例子中爲了顯示出內容，用了innerHTML，剛纔看到文章才得知innerHTMl不屬於DOM。

5. removeChild(childreference)

刪除當前節點的子節點，返回被刪除的節點。
這個被刪除的節點可以被插入到別的地方

<html>

<body>

<div id="parent"><div id="child">Achild</div></div>

varchildnode=document.getElementById("child")

varremovednode=document.getElementById("parent").removeChild(childnode)

</script>

</body>

</html>

6. cloneNode(deepBoolean)

複製並返回當前節點的複製節點，複製節點是一個孤立節點，它複製了原節點的屬性，在把這個新節點加入到document前，根據需要修改ID屬性確保其ID的唯一。

這個方法支持一個布爾參數，當deepBoolean設置true時，複製當前節點的所有子節點，包括該節點內的文本。

<html>

<body>

p=document.getElementById("mynode")

pclone =p.cloneNode(true);

p.parentNode.appendChild(pclone);

</script>

</body>

</html>

7. replaceChild(newChild, oldChild)

把當前節點的一個子節點換成另一個節點

<html>

<body>

</div>

var orinode=document.getElementById("orispan");

var newnode=document.createElement("p");

var text=document.createTextNode("test ppp ");

newnode.appendChild(text);

document.getElementById("mynode2").replaceChild(newnode,orinode);

</script>

</body>

</html>

javaScript操作DOM 建立增加刪除克隆訪問節點示例：

1. getElementById(id) 這是通過id來訪問某一元素，最常用的之一，例：

<html>

<body>

test

</div>

alert(document.getElementById("myid").innerHTML);

</script>

</body>

</html>

注意點：如果元素的ID不是唯一，則會取得第一個該ID名稱的元素

2. getElementsByName(name) 這是通過name來取得某一堆元素（作爲數組），看 Element後面有個小s就知道了，ID是HTML文檔中要求唯一的，name可以不是唯一，如checkbox、radio等地方會用到多個 input用同一個name來識別是否爲同黨。對了，getElementsByName(name)僅用於取得input、radio、 checkbox等元素，如<input name="myradio" type="radio" />

function test() {

testall=document.getElementsByTagName("body");

testbody=testall.item(0); //獲得所有tagName是body的元素（當然每個頁面只有一個）

testall=testbody.getElementsByTagName("p");// 獲得body子元素種的所有P元素

testnode=testall.item(1); // 獲得第二個P元素 alert(testnode.firstChild.nodeValue); //顯示這個元素的文本 }

</script>

</head>

<body>

<p>hello</p>

test();

</script>

</body>

</html>

4. appendChild(node)
向當前的元素（應該叫對象比較恰當）追加節點。

<html>

<body>

<head>

</head>

var newdiv=document.createElement("div")

var newtext=document.createTextNode("A new div") newdiv.appendChild(newtext)

document.getElementById("test").appendChild(newdiv)

</script>

</body>

</html>

剛纔我在第一個例子中爲了顯示出內容，用了innerHTML，剛纔看到文章才得知innerHTMl不屬於DOM。

5. removeChild(childreference)

刪除當前節點的子節點，返回被刪除的節點。
這個被刪除的節點可以被插入到別的地方

<html>

<body>

<div id="parent"><div id="child">A child</div></div>

var childnode=document.getElementById("child")

var removednode=document.getElementById("parent").removeChild(childnode)

</script>

</body>

</html>

6. cloneNode(deepBoolean)

這個方法支持一個布爾參數，當deepBoolean設置true時，複製當前節點的所有子節點，包括該節點內的文本。

<html>

<body>

p=document.getElementById("mynode")

pclone = p.cloneNode(true);

p.parentNode.appendChild(pclone);

</script>

</body>

</html>

7. replaceChild(newChild, oldChild)

把當前節點的一個子節點換成另一個節點

<html>

<body>

</div>

var orinode=document.getElementById("orispan");

var newnode=document.createElement("p");

var text=document.createTextNode("test ppp ");

newnode.appendChild(text);

document.getElementById("mynode2").replaceChild(newnode, orinode);

</script>

</body>

</html>

JavaScript的DOM操作(節點操作)

關於 IE的文檔模式的指定

JavaScript的DOM操作(節點操作)

nodejs調試的幾種方法，node-inspector可以着重看看

linux常用命令大全

強大的原型和原型鏈

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結