站長資訊網(wǎng)
方法：1、用“document.getElementById("id屬性值")”語句；2、用“document.getElementsByTagName("標(biāo)簽名字")”語句；3、用“document.documentElement”語句。
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
1. 通過document節(jié)點(diǎn)獲?。ㄖ苯荧@?。?/h2>
案例：
<body> <ul > <li id="one">一個(gè)</li> <li name="name1" >二個(gè)</li> <li class="classname">三個(gè)</li> <li>四個(gè)</li> </ul> </body>
1.1 通過ID
語法：document.getElementById("id屬性值")
特點(diǎn)：根據(jù)ID值獲取元素，返回元素對(duì)象；(id唯一)
示例：
var one=document.getElementById("one"); console.log(one);
1.2 通過標(biāo)簽名
語法：document.getElementsByTagName("標(biāo)簽名字")
特點(diǎn)：標(biāo)簽名字獲取元素,返回來的是一個(gè)偽數(shù)組,里面保存了多個(gè)的DOM對(duì)象；
示例：
var li=document.getElementsByTagName("li") console.log(li);
1.3 通過name值
語法：document.getElementsByName("name屬性的值")
特點(diǎn)：根據(jù)name屬性的值獲取元素,返回來的是一個(gè)偽數(shù)組,里面保存了多個(gè)的DOM對(duì)象
示例：
var name1=document.getElementsByName("name1")[0]; console.log(name1);
1.4 通過class
語法：document.getElementsByClassName("類樣式的名字")
特點(diǎn)：據(jù)類樣式的名字來獲取元素,返回來的是一個(gè)偽數(shù)組,里面保存了多個(gè)的DOM對(duì)象
示例：
var classname=document.getElementsByClassName("classname")[0]; console.log(classname);//
1.5 通過選擇器
語法：document.querySelector("選擇器的名字")
特點(diǎn)：根據(jù)選擇器獲取元素,返回來的是一個(gè)元素對(duì)象；
示例：
var que1=document.querySelector("#one"); console.log(que1); //
1.6 通過所有選擇器
語法： document.querySelectorAll("選擇器的名字")
特點(diǎn)：據(jù)選擇器獲取元素,返回來的是一個(gè)偽數(shù)組,里面保存了多個(gè)的DOM對(duì)象；
示例：
var queall=document.querySelectorAll("li"); console.log(queall); //
1.7 特殊元素獲取
語法：doucumnet.body
特點(diǎn)：返回body元素對(duì)象
示例：
var body=document.body ; console.log(body);
1.8 HTML元素獲取
語法：document.documentElement
特點(diǎn)：html元素對(duì)象
示例：
var dc=document.documentElement ; console.log(dc);
2. 通過父級(jí)節(jié)點(diǎn)獲取
（一般在已經(jīng)獲取父節(jié)點(diǎn)，通過父節(jié)點(diǎn)來獲取子字節(jié)）
<body> <div id="digbox"> <!-- 第一個(gè) --> <div id="box1"> <ul class="ul"> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> </ul> </div> <!-- 第二個(gè) --> <div id="box2"> <a href="#">這是第二個(gè)div</a> </div> <!-- 第三個(gè) --> <div id="box3"> <a href="#">這是第三個(gè)div</a> </div> </div> </body>
2.1 獲取第一個(gè)節(jié)點(diǎn)
語法：
document.getElementById("test").firstElementChild; document.getElementById("test").firstChild;
特點(diǎn)：獲取第一個(gè)節(jié)點(diǎn)
示例：
var box=document.getElementById("digbox").firstElementChild; console.log(box); var box1=document.getElementById("digbox").firstChild; console.log(box1);
2.2 獲取最后一個(gè)子節(jié)點(diǎn)
語法：
document.getElementById("test").lastElementChild;； document.getElementById("test").lastChild;
特點(diǎn)：獲取最后一個(gè)子節(jié)點(diǎn)
示例：
var box2= document.getElementById("digbox").lastElementChild; console.log(box2); var box3= document.getElementById("digbox").lastChild; console.log(box3);
2.3 獲取所有子節(jié)點(diǎn)
語法：
document.getElementById("test").children[0]; document.getElementById("test").childNodes; document.getElementById("test").childElementCount;
特點(diǎn)：獲取所有子節(jié)點(diǎn)
示例：
var box4= document.getElementById("digbox").children[0]; console.log(box4); var box5= document.getElementById("digbox").childNodes; console.log(box5); var box6= document.getElementById("digbox").childElementCount; console.log(box6);
2.4 獲取直接子節(jié)點(diǎn)
語法：document.getElementById("id")
特點(diǎn)：獲取直接子節(jié)點(diǎn)
示例：
var box7= document.getElementById("digbox"); console.log(box7);
2.5 獲取對(duì)應(yīng)屬性的節(jié)點(diǎn)
語法：document.getElementById("id").getElementsByClassName("ul")；
特點(diǎn)： 獲取對(duì)應(yīng)屬性的節(jié)點(diǎn)(可以是ID，class，屬性，標(biāo)簽)常用；
示例：
var box8= document.getElementById("digbox").getElementsByClassName("ul"); console.log(box8);
3. 通過兄弟節(jié)點(diǎn)獲取
<body> <div id="box"> <p>這是第一個(gè)標(biāo)簽</p> <p id="box2">這是第二個(gè)標(biāo)簽</p> <div ><a href="">這是第三個(gè)標(biāo)簽</a></div> </div> </body>
3.1 獲取當(dāng)前節(jié)點(diǎn)的前一個(gè)節(jié)點(diǎn)
語法：
document.getElementById("id").previousElementSibling； document.getElementById("id").previousSibling
特點(diǎn)： 返回指定節(jié)點(diǎn)的前一個(gè)節(jié)點(diǎn)，如果沒有 previousSibling 節(jié)點(diǎn)，則返回值為 null。
示例：
var box1=document.getElementById("box2").previousElementSibling; console.log(box1); var box2=document.getElementById("box2").previousSibling; console.log(box2);
3.2 獲取當(dāng)前節(jié)點(diǎn)的后一個(gè)節(jié)點(diǎn)
語法：
document.getElementById("id").nextSibling document.getElementById("id").nextElementSibling；
特點(diǎn)： 返回指定節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)，如果沒有 nextSibling 節(jié)點(diǎn)，則返回值為 null。
示例：
var box3=document.getElementById("box2").nextElementSibling; console.log(box3); var box4=document.getElementById("box2").nextSibling; console.log(box4);
4. 通過子級(jí)節(jié)點(diǎn)獲取
4.1 通過子節(jié)點(diǎn)獲取父級(jí)節(jié)點(diǎn)
<body> <div id="box"> <p id="box2">這是第二個(gè)標(biāo)簽</p> </div> </body>
語法：document.getElementById("id").parentNode
特點(diǎn)： 返回指定節(jié)點(diǎn)的父節(jié)點(diǎn),如果指定節(jié)點(diǎn)沒有父節(jié)點(diǎn)，則返回 null。
示例：
var box=document.getElementById("box2").parentNode; console.log(box);
【
