JavaScript的DOM操作（01）
阿新 • • 發佈：2018-12-05
JavaScript的DOM操作（01）
簡介
<script type="text/javascript"> //1. 當整個 HTML 文件完全載入成功後觸發 window.onload 事件. //事件觸發時, 執行後面 function 裡邊的函式體. window.onload = function(){ //2. 獲取所有的 button 節點. 並取得第一個元素 var btn = document.getElementsByTagName("button")[0]; //3. 為 button 的 onclick 事件賦值: 當點選 button 時, 執行函式體 btn.onclick = function(){ //4. 彈出 helloworld alert("helloworld"); } } </script> <body> <button>ClickMe</button> </body>
1.如何獲取元素
<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> <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>
2.獲取屬性節點
<script type="text/javascript"> //讀寫屬性節點: 通過元素節點 . 的方式來獲取屬性值和設定屬性值. window.onload = function(){ //屬性節點即為某一指定的元素節點的屬性. //1. 先獲取指定的那個元素節點 var nameNode = document.getElementById("name"); //2. 再讀取指定屬性的值 alert(nameNode.value); //3. 設定指定的屬性的值. nameNode.value = "xxx"; //var nameAttr = nameNode.getAttributeNode("value"); //alert(nameAttr); //alert("--" + nameAttr.nodeValue); //nameAttr.nodeValue = "xxx"; } </script> <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="xxx"/> </body>
3.獲取元素節點
<script type="text/javascript">
//獲取元素節點的子節點
window.onload = function(){
//1. 獲取 #city 節點的所有子節點.
var cityNode = document.getElementById("city");
//2. 利用元素節點的 childNodes 方法可以獲取指定元素節點的所有子節點.
//但該方法不實用.
alert(cityNode.childNodes.length);
//3. 獲取 #city 節點的所有 li 子節點.
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
//4. 獲取指定節點的第一個子節點和最後一個子節點.
alert(cityNode.firstChild);
alert(cityNode.lastChild);
}
</script>
<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="atguigu"/>
</body>
4.獲取文字節點
<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 = "xxx";
//alert(bjTextNode);
}
</script>
<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="xxx"/>
</body>
5.關於節點的屬性: nodeType, nodeName, nodeValue
<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>
<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="xxx"/>
</body>
6.回顧一下
<script type="text/javascript">
//1. 節點的型別: 元素節點、屬性節點、文字節點
//通常情況下, 操作屬性節點直接通過 "元素節點.屬性名" 的方式來讀寫屬性值
//而不是獲取屬性節點.
//2. 寫 JS 程式碼的位置
//2.1 具體位置在哪
//2.2 window.onload 事件被觸發的時間,
//以及如何為該事件賦值一個相應函式
//3. 獲取獲取元素節點
//3.1 根據 id 獲取
//3.2 根據 標籤名 獲取: 該方法並非 document 物件所獨有, 任何元素節點
//都可以呼叫該方法, 以獲取指定的子節點.
//3.3 根據 name 屬性名來獲取: 若 HTML 元素本身沒有 name 屬性,
//我們硬新增一個 name 屬性, 使用 getElementsByName(name)
//對於 ie 是不好用的。
//4. 獲取子節點
//4.1 childNodes 屬性: 獲取指定元素的所有子節點, 但不怎麼常用.
//4.2 firstChild、lastChild 屬性: 獲取元素節點的文字節點(如果一個元素
// 節點只有一個文字子節點).
//4.3 使用元素節點的 getElementsByTagName("方法");
//5. 讀寫文字節點:
//5.1 文字節點一定是元素節點的子節點
//5.2 步驟: 獲取文字節點所在的元素節點 -> 利用 firstChild 獲取文字節點
// -> 利用節點的 nodeValue 屬性來讀寫文字值.
//6. 節點的屬性: 所有節點都有的屬性(按元素節點, 屬性節點, 文字節點來說明)
//6.1 nodeType: 1, 2, 3 只讀屬性
//6.2 nodeName: 返回對應的節點的名字 只讀屬性
//6.3 nodeValue: null, 屬性值, 文字值 可讀寫的屬性.
//7. 屬性節點:
//7.1 一般情況下不單獨獲取屬性節點,
//而是通過 元素節點.屬性名 的方式來讀寫屬性值
window.onload = function(){
//彈出對話方塊.
//alert("helloworld");
//var bjNode = document.getElementById("bj");
//alert(bjNode);
//var liNodes = document.getElementsByTagName("li");
//alert(liNodes.length);
//var genderNodes = document.getElementsByName("gender");
//alert(genderNodes.length);
//var bjNodes = document.getElementsByName("BeiJing");
//alert(bjNodes.length);
//var cityNode = document.getElementById("city");
//var cityLiNodes = cityNode.getElementsByTagName("li");
//alert(cityLiNodes.length);
//var liChildren = cityNode.childNodes;
//alert(liChildren.length);
//var cityFirstChild = cityNode.firstChild;
//alert(cityFirstChild);
//var bjNode = document.getElementById("bj");
//alert(bjNode.firstChild.nodeValue);
//bjNode.firstChild.nodeValue = "xxx";
var nameNode = document.getElementsByName("username")[0];
alert(nameNode.value);
nameNode.value = "xxx";
}
</script>
<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
<br><br>
name: <input type="text" name="username" value="xxx"/>
</body>