一、document.getElementById() 根據(jù)Id獲取元素節(jié)點(diǎn)
<div id="div1"> <p id="p1"> 我是第一個(gè)P</p> <p id="p2"> 我是第二個(gè)P</p> </div> window.onload = function () { var str = document.getElementById("p1").innerHTML; alert(str); //彈出 我是第一個(gè)P }
二、document.getElementsByName() 根據(jù)name獲取元素節(jié)點(diǎn)
<div id="div1"> <p id="p1"> 我是第一個(gè)P</p> <p id="p2"> 我是第二個(gè)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() 根據(jù)HTML標(biāo)簽名獲取元素節(jié)點(diǎn)，注意getElements***的選擇器返回的是一個(gè)NodeList對象，能根據(jù)索引號(hào)選擇其中1個(gè)，可以遍歷輸出。
<div id="div1"> <p id="p1"> 我是第一個(gè)P</p> <p id="p2"> 我是第二個(gè)P</p> </div> window.onload = function () { var str = document.getElementsByTagName("p")[1].innerHTML; alert(str); //輸出 我是第二個(gè)P，因?yàn)楂@取的是索引為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() 根據(jù)class獲取元素節(jié)點(diǎn)
<div id="div1"> <p id="p1" class="class1"> 我是第一個(gè)P</p> <p id="p2"> 我是第二個(gè)P</p> </div> window.onload = function () { var node = document.getElementsByClassName("class1")[0]; alert(node.innerHTML); }
五、javascript中的CSS選擇器
document.querySelector() //根據(jù)CSS選擇器的規(guī)則，返回第一個(gè)匹配到的元素 document.querySelectorAll() //根據(jù)CSS選擇器的規(guī)則，返回所有匹配到的元素 <div id="div1"> <p id="p1" class="class1"> 我是第一個(gè)P</p> <p id="p2" class="class2"> 我是第二個(gè)P</p> </div> window.onload = function () { var node = document.querySelector("#div1 > p"); alert(node.innerHTML); //輸出 我是第一個(gè)P var node1 = document.querySelector(".class2"); alert(node1.innerHTML); //輸出 我是第二個(gè)P var nodelist = document.querySelectorAll("p"); alert(nodelist[0].innerHTML + " - " + nodelist[1].innerHTML); //輸出 我是第一個(gè)P - 我是第二個(gè)P }
六、文檔結(jié)構(gòu)和遍歷
(1)作為節(jié)點(diǎn)數(shù)的文檔
1、parentNode 獲取該節(jié)點(diǎn)的父節(jié)點(diǎn)
2、childNodes 獲取該節(jié)點(diǎn)的子節(jié)點(diǎn)數(shù)組
3、firstChild 獲取該節(jié)點(diǎn)的第一個(gè)子節(jié)點(diǎn)
4、lastChild 獲取該節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)
5、nextSibling 獲取該節(jié)點(diǎn)的下一個(gè)兄弟元素
6、previoursSibling 獲取該節(jié)點(diǎn)的上一個(gè)兄弟元素
7、nodeType 節(jié)點(diǎn)的類型，9代表Document節(jié)點(diǎn)，1代表Element節(jié)點(diǎn)，3代表Text節(jié)點(diǎn)，8代表Comment節(jié)點(diǎn)，11代表DocumentFragment節(jié)點(diǎn)
8、nodeVlue Text節(jié)點(diǎn)或Comment節(jié)點(diǎn)的文本內(nèi)容
9、nodeName 元素的標(biāo)簽名(如P,SPAN,#text(文本節(jié)點(diǎn)),DIV)，以大寫形式表示
注意，以上6個(gè)方法連元素節(jié)點(diǎn)也算一個(gè)節(jié)點(diǎn)。
<div id="div1"> <p id="p1" class="class1"> 我是第一個(gè)P</p> <p id="p2" class="class2"> 我是第二個(gè)P</p> </div> window.onload = function () { var node1 = document.querySelector(".class2"); alert(node1.parentNode.innerHTML); //輸出 <p id="p1" class="class1">我是第一個(gè)P</p><p id="p2" class="class2">我是第二個(gè)P</p> var nodelist = document.getElementById("div1"); var arr = nodelist.childNodes; alert(arr[1].innerHTML + " - " + arr[3].innerHTML); //輸出 我是第一個(gè)P - 我是第二個(gè)P 為什么是1，3呢？因?yàn)楸痉椒ㄎ谋竟?jié)點(diǎn)也會(huì)獲取，
也就是說0,2,4是文本節(jié)點(diǎn) } <div id="div1"> 文本1 <p id="p1" class="class1"> 我是第一個(gè)P</p> 文本2 <p id="p2" class="class2"> 我是第二個(gè)P</p> 文本3 </div> window.onload = function () { //依次輸出，文本1，我是第一個(gè)P，文本2，我是第二個(gè)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 第一個(gè)子元素節(jié)點(diǎn)
2、lastElementChild 最后一個(gè)子元素節(jié)點(diǎn)
3、nextElementSibling 下一個(gè)兄弟元素節(jié)點(diǎn)
4、previousElementSibling 前一個(gè)兄弟元素節(jié)點(diǎn)
5、childElementCount 子元素節(jié)點(diǎn)個(gè)數(shù)量
注意，此5個(gè)方法文本節(jié)點(diǎn)不算進(jìn)去
<div id="div1"> <p id="p1" class="class1"> 我是第一個(gè)P</p> <p id="p2" class="class2"> 我是第二個(gè)P</p> </div> window.onload = function () { var node = document.getElementById("div1"); var node1 = node.firstElementChild; var node2 = node.lastElementChild; alert(node.childElementCount); //輸出2，div1一共有兩個(gè)非文檔子元素節(jié)點(diǎn) alert(node1.innerHTML); //輸出 我是第一個(gè)P alert(node2.innerHTML); //輸出 我是第二個(gè)P alert(node2.previousElementSibling.innerHTML); //輸出 我是第一個(gè)P(第二個(gè)元素節(jié)點(diǎn)的上一個(gè)非文本元素節(jié)點(diǎn)是P1) alert(node1.nextElementSibling.innerHTML); //輸出 我是第二個(gè)P(第一個(gè)元素節(jié)點(diǎn)的下一個(gè)兄弟非文本節(jié)點(diǎn)是P2) }
七、javascript操作HTML屬性
1、屬性的讀取，此處要注意的是，某些HTML屬性名稱在javascript之中是保留字，因此會(huì)有些許不同，如class,lable中的for在javascript中變?yōu)閔tmlFor,className。
<div id="div1"> <p id="p1" class="class1"> 我是第一個(gè)P</p> <img src="123.jpg" alt="我是一張圖片" id="img1" /> <input type="text" value="我是一個(gè)文本框" id="input1" /> </div> window.onload = function () { var nodeText = document.getElementById("input1"); alert(nodeText.value); //輸出 我是一個(gè)文本框 var nodeImg = document.getElementById("img1"); alert(nodeImg.alt); //輸出 我是一張圖片 var nodeP = document.getElementById("p1"); alert(nodeP.className); //輸出 class1 注意獲取class是className，如果寫成nodeP.class則輸出undefined }
2、屬性的設(shè)置，此處同樣要注意的是保留字
<div id="div1"> <img src="1big.jpg" alt="我是一張圖片" id="img1" onclick="fun1()" /> </div> function fun1() { document.getElementById("img1").src = "1small.jpg"; //改變圖片的路徑屬性。實(shí)現(xiàn)的效果為，當(dāng)點(diǎn)擊圖片時(shí)，大圖變小圖。 }
3、非標(biāo)準(zhǔn)HTML屬性
getAttribute(); //注意這兩個(gè)方法是不必理會(huì)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節(jié)點(diǎn)的屬性
attributes屬性 非Element對象返回null，Element一半返回Attr對象。Attr對象是一個(gè)特殊的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"; //點(diǎn)擊后改變src屬性，實(shí)現(xiàn)了點(diǎn)擊大圖變小圖效果 }
八、元素的內(nèi)容
1、innerText、textContent innerText與textContent的區(qū)別，當(dāng)文本為空時(shí)，innerText是""，而textContent是undefined
2、innerHTML
<div id="div1"> <p id="p1">我是第一個(gè)P</p> <p id="p2">我是第<b>二</b>個(gè)P</p> </div> window.onload = function () { alert(document.getElementById("p1").innerText); //注意火狐瀏覽器不支持innerText alert(document.getElementById("p1").textContent); //基本都支持textContent document.getElementById("p1").textContent = "我是p1，javascript改變了我"; //設(shè)置文檔Text alert(document.getElementById("p2").textContent); alert(document.getElementById("p2").innerHTML); //innerHTML與innerText的區(qū)別，就是對HTML代碼的輸出方式Text不會(huì)輸出HTML代碼 }
九、創(chuàng)建，插入，刪除節(jié)點(diǎn)
1、document.createTextNode() 創(chuàng)建一個(gè)文本節(jié)點(diǎn)
<div id="div1"> <p id="p1">我是第一個(gè)P</p> <p id="p2">我是第二個(gè)P</p> </div> window.onload = function () { var textNode = document.createTextNode("<p>我是一個(gè)javascript新建的節(jié)點(diǎn)</p>"); document.getElementById("div1").appendChild(textNode); }
完成后HTML變?yōu)椋?br> div id="div1">
<p id="p1">我是第一個(gè)P</p>
<p id="p2">我是第二個(gè)P</p>
我是一個(gè)javascript新建的節(jié)點(diǎn)
</div>
2、document.createElement() 創(chuàng)建一個(gè)元素節(jié)點(diǎn)
<div id="div1"> <p id="p1">我是第一個(gè)P</p> <p id="p2">我是第二個(gè)P</p> </div> window.onload = function () { var pNode = document.createElement("p"); pNode.textContent = "新建一個(gè)P節(jié)點(diǎn)"; document.getElementById("div1").appendChild(pNode); }
執(zhí)行之后HTML代碼變?yōu)椋?br>
<div id="div1">
<p id="p1">我是第一個(gè)P</p>
<p id="p2">我是第二個(gè)P</p>
<p>新建一個(gè)P節(jié)點(diǎn)</p>
</div>
3、插入節(jié)點(diǎn)
appendChild() //將一個(gè)節(jié)點(diǎn)插入到調(diào)用節(jié)點(diǎn)的最后面
insertBefore() //接受兩個(gè)參數(shù)，第一個(gè)為待插入的節(jié)點(diǎn)，第二個(gè)指明在哪個(gè)節(jié)點(diǎn)前面，如果不傳入第二個(gè)參數(shù)，則跟appendChild一樣，放在最后。
<div id="div1"> <p id="p1">我是第一個(gè)P</p> </div> window.onload = function () { var pNode1 = document.createElement("p"); pNode1.textContent = "insertBefore插入的節(jié)點(diǎn)"; var pNode2 = document.createElement("p"); pNode2.textContent = "appendChild插入的節(jié)點(diǎn)"; document.getElementById("div1").appendChild(pNode2); document.getElementById("div1").insertBefore(pNode1,document.getElementById("p1")); }
執(zhí)行之后HTML代碼為：
<div id="div1">
<p>insertBefore插入的節(jié)點(diǎn)</p>
<p id="p1">我是第一個(gè)P</p>
<p>appendChild插入的節(jié)點(diǎn)</p>
</div>
十、刪除和替換節(jié)點(diǎn)。
1、removeChild(); 由父元素調(diào)用，刪除一個(gè)子節(jié)點(diǎn)。注意是直接父元素調(diào)用，刪除直接子元素才有效，刪除孫子元素就沒有效果了。
<div id="div1"> <p id="p1">我是第一個(gè)P</p> <p id="p2">我是第二個(gè)P</p> </div> window.onload = function () { var div1 = document.getElementById("div1"); div1.removeChild(document.getElementById("p2")); }
執(zhí)行之后代碼變?yōu)椋?br> <div id="div1">
<p id="p1">我是第一個(gè)P</p> //注意到第二個(gè)P元素已經(jīng)被移除了
</div>
2、replaceChild() //刪除一個(gè)子節(jié)點(diǎn)，并用一個(gè)新節(jié)點(diǎn)代替它，第一個(gè)參數(shù)為新建的節(jié)點(diǎn)，第二個(gè)節(jié)點(diǎn)為被替換的節(jié)點(diǎn)
<div id="div1"> <p id="p1">我是第一個(gè)P</p> <p id="p2">我是第二個(gè)P</p> </div> window.onload = function () { var div1 = document.getElementById("div1"); var span1 = document.createElement("span"); span1.textContent = "我是一個(gè)新建的span"; div1.replaceChild(span1,document.getElementById("p2")); }
執(zhí)行完成后HTML代碼變?yōu)椋?br> <div id="div1">
<p id="p1">我是第一個(gè)P</p>
<span>我是一個(gè)新建的span</span> //留意到p2節(jié)點(diǎn)已經(jīng)被替換為span1節(jié)點(diǎn)了
</div>
十一、javascript操作元素CSS
通過元素的style屬性可以隨意讀取和設(shè)置元素的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>
聯(lián)系客服
