JavaScript——Dom編程（1）
阿新 • • 發佈：2018-01-27
cli -c his close 屬性設置 utf-8 裏的 點名 oct 
DOM：Document Object Model(文本對象模型)
D：文檔 – html 文檔 或 xml 文檔
O：對象 – document 對象的屬性和方法
M：模型
- DOM 是針對xml(html)的基於樹的API。
- DOM樹:節點（node）的層次。
- DOM 把一個文檔表示為一棵家譜樹（父，子，兄弟）
一、節點及其類型:
1). 元素節點
2). 屬性節點: 元素的屬性, 可以直接通過屬性的方式來操作.
3). 文本節點: 是元素節點的子節點, 其內容為文本.
<p title="a gentle reminder">Don`t forget to buy this stuff.</p>
①、獲取元素節點
<!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"> <titleView Code>Untitled Document</title> <script type="text/javascript"> //獲取指定的元素節點. window.onload = function(){ //1. 獲取 id 為 bj 的那個節點. //在編寫 HTML 文檔時, 需確保 id 屬性值是唯一的. //該方法為 document 對象的方法var bjNode = document.getElementById("bj"); alert(bjNode); //2. 獲取所有的 li 節點. //使用標簽名獲取指定節點的集合. //該方法為 Node 接口的方法, 即任何一個節點都有這個方法. var liNodes = document.getElementsByTagName("li"); alert(liNodes.length); var cityNode = document.getElementById("city"); var cityLiNodes = cityNode.getElementsByTagName("li"); alert(cityLiNodes.length); //3. 根據 HTML 文檔元素的 name 屬性名來獲取指定的節點的集合. var genderNodes = document.getElementsByName("gender"); alert(genderNodes.length); //若 HTML 元素自身沒有定義 name 屬性, 則 getElementsByName() //方法對於 IE 無效. 所以使用該方法時需謹慎. var bjNode2 = document.getElementsByName("BeiJing"); alert(bjNode2.length); } </script> </head> <body> <p>你喜歡哪個城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>東京</li> <li>首爾</li> </ul> <br><br> <p>你喜歡哪款單機遊戲?</p> <ul id="game"> <li id="rl">紅警</li> <li>實況</li> <li>極品飛車</li> <li>魔獸</li> </ul> <br><br> gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female </body> </html>
1) document.getElementById:
根據 id 屬性獲取對應的單個節點,如果不存在這樣的元素，它返回 null。
var element = document.getElementById(ID);
該方法只能用於 document 對象
2) document.getElementsByTagName:
根據標簽名獲取指定節點名字的數組, 數組對象 length 屬性可以獲取數組的長度，該方法為 Node 接口的方法, 即任何一個節點都有這個方法.，任何一個節點都可以使用該方法獲取其子節點。
3) document.getElementsByName:
根據節點的 name 屬性獲取符合條件的節點數組, 但 ie 的實現方式和 W3C 標準有差別: 在 html 文檔中若某節點(li)沒有 name 屬性, ie 使用 getElementsByName 不能獲取到節點數組, 但Chrome可以。
②、讀寫屬性節點
<!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"> //讀寫屬性節點: 通過元素節點 . 的方式來獲取屬性值和設置屬性值. window.onload = function(){ //屬性節點即為某一指定的元素節點的屬性. //1. 先獲取指定的那個元素節點 var nameNode = document.getElementById("name"); //2. 再讀取指定屬性的值 alert(nameNode.value); //3. 設置指定的屬性的值. nameNode.value = "edu"; //var nameAttr = nameNode.getAttributeNode("value"); //alert(nameAttr); //alert("--" + nameAttr.nodeValue); //nameAttr.nodeValue = "edu"; } </script> </head> <body> <p>你喜歡哪個城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>東京</li> <li>首爾</li> </ul> <br><br> <p>你喜歡哪款單機遊戲?</p> <ul id="game"> <li id="rl">紅警</li> <li>實況</li> <li>極品飛車</li> <li>魔獸</li> </ul> <br><br> name: <input type="text" name="username" id="name" value="nchu"/> </body> </html>View Code
1) 可以直接通過 cityNode.id 這樣的方式來獲取和設置屬性節點的值
2) 通過元素節點的 getAttributeNode 方法來獲取屬性節點,然後在通過 nodeValue 來讀寫屬性值
③、獲取元素節點的子節點
1). childNodes 屬性獲取全部的子節點, 但該方法不實用. 因為如果要獲取指定的節點的指定子節點的集合, 可以直接調用元素節點的 getElementsByTagName() 方法來獲取.
2). firstChild 屬性獲取第一個子節點，常用來獲取節點的文本節點
3). lastChild 屬性獲取最後一個子節點
④、獲取文本節點
<!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"> //獲取文本節點 window.onload = function(){ //文本節點一定是元素節點的子節點. //1. 獲取文本節點所在的元素節點 var bjNode = document.getElementById("bj"); //2. 通過 firstChild 定義為到文本節點 var bjTextNode = bjNode.firstChild; //3. 通過操作文本節點的 nodeValue 屬性來讀寫文本節點的值. alert(bjTextNode.nodeValue); bjTextNode.nodeValue = "nchu"; //alert(bjTextNode); } </script> </head> <body> <p>你喜歡哪個城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>東京</li> <li>首爾</li> </ul> <br><br> <p>你喜歡哪款單機遊戲?</p> <ul id="game"> <li id="rl">紅警</li> <li>實況</li> <li>極品飛車</li> <li>魔獸</li> </ul> <br><br> </body> </html>View Code
二、Dom屬性
文檔裏的每個節點都有以下屬性。
nodeName:
代表當前節點的名字
var name = node.nodeName;
- 如果當前節點是一個元素節點或屬性節點，nodeName 屬性將返回這個元素和屬性的名字。
- 如果當前節點是一個文本節點，nodeName 屬性將返回內容為 #text 的字符串。
- nodeName 是一個只讀屬性。
nodeType：
返回一個整數，這個數值代表著當前節點的類型。
1 -- 元素節點
2 -- 屬性節點
3 -- 文本節點
nodeType 是個只讀屬性
nodeValue：
返回給定節點的當前值（字符串）
- 如果當前節點是一個屬性節點，返回值是這個屬性的值。
- 如果當前節點是一個文本節點，返回值是這個文本節點的內容。
- 如果當前節點是一個元素節點，返回值是 null
- nodeValue 是一個 讀/寫 屬性，但不能對元素節點的 nodeValue 屬性設置值，但可以為文本節點的 nodeValue屬性設置一個值。
<!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"> //關於節點的屬性: nodeType, nodeName, nodeValue //在文檔中, 任何一個節點都有這 3 個屬性 //而 id, name, value 是具體節點的屬性. window.onload = function(){ //1. 元素節點的這 3 個屬性 var bjNode = document.getElementById("bj"); alert(bjNode.nodeType); //元素節點: 1 alert(bjNode.nodeName); //節點名: li alert(bjNode.nodeValue); //元素節點沒有 nodeValue 屬性值: null //2. 屬性節點 var nameAttr = document.getElementById("name") .getAttributeNode("name"); alert(nameAttr.nodeType); //屬性節點: 2 alert(nameAttr.nodeName); //屬性節點的節點名: 屬性名 alert(nameAttr.nodeValue); //屬性節點的 nodeValue 屬性值: 屬性值 //3. 文本節點: var textNode = bjNode.firstChild; alert(textNode.nodeType); //文本節點: 0 alert(textNode.nodeName); //節點名: #text alert(textNode.nodeValue); //文本節點的 nodeValue 屬性值: 文本值本身. //nodeType、nodeName 是只讀的. //而 nodeValue 是可以被改變的。 //以上三個屬性, 只有在文本節點中使用 nodeValue 讀寫文本值時使用最多. } </script> </head> <body> <p>你喜歡哪個城市?</p> <ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li>東京</li> <li>首爾</li> </ul> <br><br> <p>你喜歡哪款單機遊戲?</p> <ul id="game"> <li id="rl">紅警</li> <li>實況</li> <li>極品飛車</li> <li>魔獸</li> </ul> <br><br> name: <input type="text" name="username" id="name" value="nchu"/> </body> </html>View Code
註意：以上三個屬性, 只有在文本節點中使用 nodeValue 讀寫文本值時使用最多.
JavaScript——Dom編程（1）