| 方法 | 返回類型 | 說明 |
| nodeName | String | 節點的名字 |
| nodeValue | String | 節點的值 |
| nodeType | Number | 節點的類型常量值 |
| 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 |
１ getElementById()
說明：
1、 查詢給定ID屬性值的元素，返回該元素的元素節點。也稱為元素對象。
2、 因為在一個html頁面中id的值是唯一的，所以返回值也是唯一的。所以方法的名稱為getElementById()而不是getElementsById()
3、 該方法隻能用於document對象，類似與java的static關鍵字。
案例：
var inputDom=document.getElementById("uname")
//當前dom對象的屬性值
alert(inputDom.type+inputDom.value+inputDom.id);
//元素節點 名稱 標簽的名稱 value值為空 元素節點類型值 1
alert(inputDom.nodeName+inputDom.nodeType+inputDom.nodeValue);
2．getElementsByName()
2.1說明：
1、查找給定name屬性的所有元素，這個方法將返回一個節點集合，也可以稱為對象集合。
2、這個集合可以作為數組來對待，length屬性的值表示集合的個數。
3、因為在html頁面中，name不能唯一確定一個元素，所以方法的名稱為getElementsByName而不是getElementByName
舉例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>getElementsByName.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!–<link rel="stylesheet" type="text/css" href="./styles.css">–>
</head>
<body>
<p align="center">
<p id="head">
用戶名
<input type="text" name="uname" id="uname" value="ee"/>
</p>
<p id="spr">
你喜歡的春節節目有哪些</br>
<hr color="red"/>
<input type="checkbox" name="fav" value="111"/>111
<input type="checkbox" name="fav" value="222"/>222
<input type="checkbox" name="fav" value="333"/>333
<input type="checkbox" name="fav" value="444"/>444
<input type="checkbox" name="fav" value="555"/>555
<input type="checkbox" name="fav" value="666"/>666
</p>
<p>
</p>
</p>
</body>
</html>
<script type="text/javascript" charset="utf-8">
window.onload=function(){
//查找給定name屬性值的所有元素
var favs=document.getElementsByName("fav");
var msg="";
//alert(favs.length);
//writer
for(var i=0;i<favs.length;i++){
//get
var fav=favs[i];
//alert(fav.value);
//action
fav.onclick=function(){
//作業：彈出所有你選中的節目
msg+=" "+this.value;
alert("you like it "+msg);
}
}
}
</script>
3。getElementsByTagName()
3.1說明
1、查詢給定標簽名的所有元素
2、因為在html頁面中，標簽名不是唯一的，所以返回值為節點的集合。
3、這個集合可以當做數組來處理,length屬性為集合裡所有元素的個數
4、可以有兩種形式來執行這個方法：
1、var elements =document.getElementsByTagName(tagName);
2、var elements = element.getElementsByTagName(tagName);
5、從這兩種方法可以看出持有這個方法的對象並不一定是整個文檔對象
(document).也可以是某一個元素節點。
舉例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>getElementsByName.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!–<link rel="stylesheet" type="text/css" href="./styles.css">–>
</head>
<body>
<p align="center">
<p id="head">
用戶名
<input type="text" name="uname" id="uname" value="ee"/>
</p>
<p id="spr">
你喜歡的春節節目有哪些</br>
<hr color="red"/>
<input type="checkbox" name="fav" value="111"/>111
<input type="checkbox" name="fav" value="222"/>222
<input type="checkbox" name="fav" value="333"/>333
<input type="checkbox" name="fav" value="444"/>444
<input type="checkbox" name="fav" value="555"/>555
<input type="checkbox" name="fav" value="666"/>666
</p>
<p>
<input type="button" value="提交"/>
</p>
</p>
</body>
</html>
<script type="text/javascript" charset="utf-8">
window.onload=function(){
//根據標簽名稱獲取該標簽名稱的所有的節點對象
var inputnodes=document.getElementsByTagName("input");
//獲取指定節點www.aiwalls.com
//alert(inputnodes.length);
var sprNode=document.getElementById("spr");
if(sprNode.nodeType==1){
var sprinputNode=sprNode.getElementsByTagName("input");
//alert(sprinputNode.length);
//spr 節點中的所有的input節點對象 並且要求 type=“checkbok”
//遍歷所有spr下的節點
for(var i=0;i<sprinputNode.length;i++){
//獲取指定的節點
var inputNode=sprinputNode[i];
if(inputNode.type=="checkbox"){
alert(inputNode.value);
}
}
}
var d=document.getElementsByTagName("*");
}
</script>
4hasChildNodes()
4.1說明
1、該方法用來判斷一個元素是否有子節點
2、返回值為true或者false
3、文本節點和屬性節點不可能再包含子節點，所以對於這兩類節點使用 ChildNodes()方法 返回值永遠為false.
4、如果hasChildNodes()返回值為false,則childNodes,firstChild,lastChild將為空數組或者空字符串。
舉例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>zuoye.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!–<link rel="stylesheet" type="text/css" href="./styles.css">–>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
<script type="text/javascript" charset="utf-8">
window.onload=function(){
//開始的節點
var rootNode=document.documentElement;
iteratorNodes(rootNode);
document.write(msg);
}
function iteratorNodes(node){
//遍歷此文檔
//第一步：是否是元素節點—屬性–子節點
if(node.nodeType==1){
//打印此節點
display(node);
//元素節點的屬性節點
for(var i=0;i<node.attributes.length;i++){
//獲取屬性值
var attr=node.attributes[i];
//打印出屬性節點
if(attr.specified){
display(attr);
}
}
//元素節點子節點
//判斷是否有孩子節點
if(node.hasChildNodes){
var sonNodes=node.childNodes;
for(var j=0;j<sonNodes.length;j++){
var sonNode=sonNodes[j];
iteratorNodes(sonNode);
}
//遞歸
}
}else{
display(node);
}
}
var msg="";
function display(node){
msg+="<br/>節點名稱："+node.nodeName+node.nodeValue+node.nodeType;
}
</script>
摘自 張曉叢的專欄