JavaScript 常用 dom 操作
<div id="div1"> <p id="p1"> 我是第一個P</p> <p id="p2"> 我是第二個P</p> </div> window.onload = function () { var str = document.getElementById("p1").innerHTML; alert(str); //彈出 我是第一個P }
二、document.getElementsByName() 根據name獲取元素節點
<div id="div1"> <p id="p1"> 我是第一個P</p> <p id="p2"> 我是第二個P</p> <input type="text" value="請輸入值" name="userName" /> <input type="button" value="確定" onclick="fun1()"> </div> function fun1() { var username = document.getElementsByName("userName")[0].value; alert(username); //輸出userName裡輸入的值 }
三、document.getElementsByTagName() 根據HTML標籤名獲取元素節點，注意getElements***的選擇器返回的是一個NodeList物件，能根據索引號選擇其中1個，可以遍歷輸出。
<div id="div1"> <p id="p1"> 我是第一個P</p> <p id="p2"> 我是第二個P</p> </div> window.onload = function () { var str = document.getElementsByTagName("p")[1].innerHTML; alert(str); //輸出 我是第二個P，因為獲取的是索引為1的P，索引從0開始 } window.onload = function () { var arr = document.getElementsByTagName("p"); for (var i = 0; i < arr.length; i++) { alert(arr[i].innerHTML); } } window.onload = function () { var node = document.getElementById("div1"); var node1 = document.getElementsByTagName("p")[1]; //從獲取到的元素再獲取 alert(node1.innerHTML); }
四、document.getElementsByClassName() 根據class獲取元素節點
<div id="div1"> <p id="p1" class="class1"> 我是第一個P</p> <p id="p2"> 我是第二個P</p> </div> window.onload = function () { var node = document.getElementsByClassName("class1")[0]; alert(node.innerHTML); }
五、javascript中的CSS選擇器
document.querySelector() //根據CSS選擇器的規則，返回第一個匹配到的元素 document.querySelectorAll() //根據CSS選擇器的規則，返回所有匹配到的元素 <div id="div1"> <p id="p1" class="class1"> 我是第一個P</p> <p id="p2" class="class2"> 我是第二個P</p> </div> window.onload = function () { var node = document.querySelector("#div1 > p"); alert(node.innerHTML); //輸出 我是第一個P var node1 = document.querySelector(".class2"); alert(node1.innerHTML); //輸出 我是第二個P var nodelist = document.querySelectorAll("p"); alert(nodelist[0].innerHTML + " - " + nodelist[1].innerHTML); //輸出 我是第一個P - 我是第二個P }
六、文件結構和遍歷
(1)作為節點數的文件
1、parentNode 獲取該節點的父節點
2、childNodes 獲取該節點的子節點陣列
3、firstChild 獲取該節點的第一個子節點
4、lastChild 獲取該節點的最後一個子節點
5、nextSibling 獲取該節點的下一個兄弟元素
6、previoursSibling 獲取該節點的上一個兄弟元素
7、nodeType 節點的型別，9代表Document節點，1代表Element節點，3代表Text節點，8代表Comment節點，11代表DocumentFragment節點
8、nodeVlue Text節點或Comment節點的文字內容
9、nodeName 元素的標籤名(如P,SPAN,#text(文字節點),DIV)，以大寫形式表示
注意，以上6個方法連元素節點也算一個節點。
<div id="div1"> <p id="p1" class="class1"> 我是第一個P</p> <p id="p2" class="class2"> 我是第二個P</p> </div> window.onload = function () { var node1 = document.querySelector(".class2"); alert(node1.parentNode.innerHTML); //輸出 <p id="p1" class="class1">我是第一個P</p><p id="p2" class="class2">我是第二個P</p> var nodelist = document.getElementById("div1"); var arr = nodelist.childNodes; alert(arr[1].innerHTML + " - " + arr[3].innerHTML); //輸出 我是第一個P - 我是第二個P 為什麼是1，3呢？因為本方法文字節點也會獲取， 也就是說0,2,4是文字節點 } <div id="div1"> 文字1 <p id="p1" class="class1"> 我是第一個P</p> 文字2 <p id="p2" class="class2"> 我是第二個P</p> 文字3 </div> window.onload = function () { //依次輸出，文字1，我是第一個P，文字2，我是第二個P，文字3 var node = document.getElementById("div1"); for (var i = 0; i < node.childNodes.length; i++) { if (node.childNodes[i].nodeType == 1) { alert(node.childNodes[i].innerHTML); } else if (node.childNodes[i].nodeType == 3) { alert(node.childNodes[i].nodeValue); } } }
(2)作為元素樹的文件
1、firstElementChild 第一個子元素節點
2、lastElementChild 最後一個子元素節點
3、nextElementSibling 下一個兄弟元素節點
4、previousElementSibling 前一個兄弟元素節點
5、childElementCount 子元素節點個數量
注意，此5個方法文字節點不算進去
<div id="div1"> <p id="p1" class="class1"> 我是第一個P</p> <p id="p2" class="class2"> 我是第二個P</p> </div> window.onload = function () { var node = document.getElementById("div1"); var node1 = node.firstElementChild; var node2 = node.lastElementChild; alert(node.childElementCount); //輸出2，div1一共有兩個非文件子元素節點 alert(node1.innerHTML); //輸出 我是第一個P alert(node2.innerHTML); //輸出 我是第二個P alert(node2.previousElementSibling.innerHTML); //輸出 我是第一個P(第二個元素節點的上一個非文字元素節點是P1) alert(node1.nextElementSibling.innerHTML); //輸出 我是第二個P(第一個元素節點的下一個兄弟非文字節點是P2) }
七、javascript操作HTML屬性
1、屬性的讀取，此處要注意的是，某些HTML屬性名稱在javascript之中是保留字，因此會有些許不同，如class,lable中的for在javascript中變為htmlFor,className。
<div id="div1"> <p id="p1" class="class1"> 我是第一個P</p> <img src="123.jpg" alt="我是一張圖片" id="img1" /> <input type="text" value="我是一個文字框" id="input1" /> </div> window.onload = function () { var nodeText = document.getElementById("input1"); alert(nodeText.value); //輸出 我是一個文字框 var nodeImg = document.getElementById("img1"); alert(nodeImg.alt); //輸出 我是一張圖片 var nodeP = document.getElementById("p1"); alert(nodeP.className); //輸出 class1 注意獲取class是className，如果寫成nodeP.class則輸出undefined }
2、屬性的設定，此處同樣要注意的是保留字
<div id="div1"> <img src="1big.jpg" alt="我是一張圖片" id="img1" onclick="fun1()" /> </div> function fun1() { document.getElementById("img1").src = "1small.jpg"; //改變圖片的路徑屬性。實現的效果為，當點選圖片時，大圖變小圖。 }
3、非標準HTML屬性
getAttribute(); //注意這兩個方法是不必理會javascript保留字的，HTML屬性是什麼就怎麼寫。
setAttribute();
<div id="div1"> <img src="1big.jpg" alt="我是一張圖片" class="imgClass" id="img1" onclick="fun1()" /> </div> function fun1() { document.getElementById("img1").setAttribute("src", "1small.jpg"); alert(document.getElementById("img1").getAttribute("class")); }
4、Attr節點的屬性
attributes屬性 非Element物件返回null，Element一半返回Attr物件。Attr物件是一個特殊的Node,通過name與value獲取屬性名稱與值。
如:document.getElementById("img1")[0];
document.getElementById("img1").src;
<div id="div1"> <img src="1big.jpg" alt="我是一張圖片" class="imgClass" id="img1" onclick="fun1()" /> </div> function fun1() { alert(document.getElementById("img1").attributes[0].name); //輸出 onclick 注意，通過索引器訪問是寫在右面在排前面，從0開始 alert(document.getElementById("img1").attributes.src.value); //輸出1big.jpg document.getElementById("img1").attributes.src.value = "1small.jpg"; //點選後改變src屬性，實現了點選大圖變小圖效果 }
八、元素的內容
1、innerText、textContent innerText與textContent的區別，當文字為空時，innerText是""，而textContent是undefined
2、innerHTML
<div id="div1"> <p id="p1">我是第一個P</p> <p id="p2">我是第<b>二</b>個P</p> </div> window.onload = function () { alert(document.getElementById("p1").innerText); //注意火狐瀏覽器不支援innerText alert(document.getElementById("p1").textContent); //基本都支援textContent document.getElementById("p1").textContent = "我是p1，javascript改變了我"; //設定文件Text alert(document.getElementById("p2").textContent); alert(document.getElementById("p2").innerHTML); //innerHTML與innerText的區別，就是對HTML程式碼的輸出方式Text不會輸出HTML程式碼 }
九、建立，插入，刪除節點
1、document.createTextNode() 建立一個文字節點
<div id="div1"> <p id="p1">我是第一個P</p> <p id="p2">我是第二個P</p> </div> window.onload = function () { var textNode = document.createTextNode("<p>我是一個javascript新建的節點</p>"); document.getElementById("div1").appendChild(textNode); }
完成後HTML變為：
div id="div1">
<p id="p1">我是第一個P</p>
<p id="p2">我是第二個P</p>
我是一個javascript新建的節點
</div>
2、document.createElement() 建立一個元素節點
<div id="div1"> <p id="p1">我是第一個P</p> <p id="p2">我是第二個P</p> </div> window.onload = function () { var pNode = document.createElement("p"); pNode.textContent = "新建一個P節點"; document.getElementById("div1").appendChild(pNode); }
執行之後HTML程式碼變為：
<div id="div1">
<p id="p1">我是第一個P</p>
<p id="p2">我是第二個P</p>
<p>新建一個P節點</p>
</div>
3、插入節點
appendChild() //將一個節點插入到呼叫節點的最後面
insertBefore() //接受兩個引數，第一個為待插入的節點，第二個指明在哪個節點前面，如果不傳入第二個引數，則跟appendChild一樣，放在最後。
<div id="div1"> <p id="p1">我是第一個P</p> </div> window.onload = function () { var pNode1 = document.createElement("p"); pNode1.textContent = "insertBefore插入的節點"; var pNode2 = document.createElement("p"); pNode2.textContent = "appendChild插入的節點"; document.getElementById("div1").appendChild(pNode2); document.getElementById("div1").insertBefore(pNode1,document.getElementById("p1")); }
執行之後HTML程式碼為：
<div id="div1">
<p>insertBefore插入的節點</p>
<p id="p1">我是第一個P</p>
<p>appendChild插入的節點</p>
</div>
十、刪除和替換節點。
1、removeChild(); 由父元素呼叫，刪除一個子節點。注意是直接父元素呼叫，刪除直接子元素才有效，刪除孫子元素就沒有效果了。
<div id="div1"> <p id="p1">我是第一個P</p> <p id="p2">我是第二個P</p> </div> window.onload = function () { var div1 = document.getElementById("div1"); div1.removeChild(document.getElementById("p2")); }
執行之後程式碼變為：
<div id="div1">
<p id="p1">我是第一個P</p> //注意到第二個P元素已經被移除了
</div>
2、replaceChild() //刪除一個子節點，並用一個新節點代替它，第一個引數為新建的節點，第二個節點為被替換的節點
<div id="div1"> <p id="p1">我是第一個P</p> <p id="p2">我是第二個P</p> </div> window.onload = function () { var div1 = document.getElementById("div1"); var span1 = document.createElement("span"); span1.textContent = "我是一個新建的span"; div1.replaceChild(span1,document.getElementById("p2")); }
執行完成後HTML程式碼變為：
<div id="div1">
<p id="p1">我是第一個P</p>
<span>我是一個新建的span</span> //留意到p2節點已經被替換為span1節點了
</div>
十一、javascript操作元素CSS
通過元素的style屬性可以隨意讀取和設定元素的CSS樣式，例子：
<head> <title></title> <script type="text/javascript"> window.onload = function () { alert(document.getElementById("div1").style.backgroundColor); document.getElementById("div1").style.backgroundColor = "yellow"; } </script> </head> <body> <div id="div1" style="width:100px; height:100px; background-color:red"></div> </body>