js中DOM查詢?cè)胤椒ㄖ饕琯etElementById、getElementsBy系列及querySelector系列，下面依次介紹下
-
DOM規(guī)范類
一、getElementById
getElementById返回的值類型為[object HTMLDivElement]
上圖中測(cè)試的代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試</title>
</head>
<body>
<div id="parent">
<div class="child"><a >百度鏈接</a></div>
</div>
<script>
console.log(document.getElementById("parent"));
console.log(document.getElementById("parent").toString());
</script>
</body>
</html>
二、 getElementsByClassName
getElementsByClassName返回的值的類型為[object HTMLCollection]，在其后面添加數(shù)組編號(hào)[0]時(shí)，返回的值的類型就變?yōu)閇object HTMLDivElement]
三、getElementsByTagName
上述圖中的代碼為：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試</title>
</head>
<body>
<div class="parent">
<div class="child"><a >百度鏈接</a></div>
</div>
<script>
console.log(document.getElementsByTagName("a"));
console.log(document.getElementsByTagName("a").toString());
</script>
</body>
</html>
getElementsByTagName的返回值類型為[object HTMLCollection]，加上數(shù)組編號(hào)[0]后會(huì)變成如下圖所示的結(jié)果
四、getElementsByName
getElementsByName返回的值類型是[object NodeList]類型而不是[object HTMLCollection] ！！！ 但是其返回的確實(shí)是元素的集合（HTMLCollection）而非節(jié)點(diǎn)的集合（NodeList）《javascript高級(jí)程序設(shè)計(jì)》第三版第258頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試</title>
</head>
<body>
<fieldset>
<legend>which color do you prefer</legend>
<ul>
<li><input type="radio" value="red" id="colorRed" name="color" >
<label for="colorRed">Red</label> </li>
<li><input type="radio" value="green" id="colorGreen" name="color" >
<label for="colorGreen">Green</label> </li>
</ul>
</fieldset>
<script>
console.log(document.getElementsByName("color")) ;
console.log(document.getElementsByName("color")[1]);
console.log(document.getElementsByName("color").toString()) ;
console.log(document.getElementsByName("color")[1].toString()) ;
</script>
</body>
</html>
-
selectors API規(guī)范類
一、 querySelector()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試</title>
</head>
<body>
<div id="parent">
<div class="child">
<a >百度鏈接</a>
</div>
</div>
<script>
console.log(document.querySelector("#parent"));
console.log(document.querySelector("#parent").toString());
</script>
</body>
</html>
querySelector 此時(shí)返回值類型為[object HTMLDivElement]，將上述代碼改成如下形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試</title>
</head>
<body>
<div id="parent">
<ul class="child">
<li>我是child選擇器ul里的li1</li>
<li>我是child選擇器ul里的li2</li>
</ul>
<div class="child">我是child選擇器的div </div>
</div>
<script>
console.log(document.querySelector(".child "));
console.log(document.querySelector(".child").toString());
</script>
</body>
</html>
二、querySelectorAll（）
將上述代碼改成如下形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>測(cè)試</title>
</head>
<body>
<div id="parent">
<ul class="child">
<li>我是child選擇器ul里的li1</li>
<li>我是child選擇器ul里的li2</li>
</ul>
<div class="child">我是child選擇器的div </div>
</div>
<script>
console.log(document.querySelectorAll(".child "));
console.log(document.querySelectorAll(".child").toString());
console.log(document.querySelectorAll(".child ")[0]);
console.log(document.querySelectorAll(".child")[0].toString());
</script>
</body>
</html>
需要說明的是querySelectorAll返回的是靜態(tài)（static）的NodeList！！！【一般NodeList及HTMLCollection均為實(shí)時(shí)的（live）】
**本文版權(quán)歸本人即簡書筆名：該賬戶已被查封 所有，如需轉(zhuǎn)載請(qǐng)注明出處。謝謝！ *
