js中DOM查询元素方法主要包含getElementById、getElementsBy系列及querySelector系列，下面依次介绍下
-
DOM规范类
一、getElementById
getElementById
getElementById返回的值类型为[object HTMLDivElement]
上图中测试的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div id="parent">
<div class="child"><a href="http://www.baidu.com">百度链接</a></div>
</div>
<script>
console.log(document.getElementById("parent"));
console.log(document.getElementById("parent").toString());
</script>
</body>
</html>
二、 getElementsByClassName
getElementsByClassName
getElementsByClassName返回的值的类型为[object HTMLCollection]，在其后面添加数组编号[0]时，返回的值的类型就变为[object HTMLDivElement]
getElementsByClassName
三、getElementsByTagName
getElementsByTagName
getElementsByTagName
上述图中的代码为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div class="parent">
<div class="child"><a href="http://www.baidu.com">百度链接</a></div>
</div>
<script>
console.log(document.getElementsByTagName("a"));
console.log(document.getElementsByTagName("a").toString());
</script>
</body>
</html>
getElementsByTagName的返回值类型为[object HTMLCollection]，加上数组编号[0]后会变成如下图所示的结果
getElementsByTagName
四、getElementsByName
getElementsByName
getElementsByName
getElementsByName疑问！！！！
getElementsByName返回的值类型是[object NodeList]类型而不是[object HTMLCollection] ！！！ 但是其返回的确实是元素的集合（HTMLCollection）而非节点的集合（NodeList）《javascript高级程序设计》第三版第258页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</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规范类
一、 querySelector()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<div id="parent">
<div class="child">
<a href="http://www.baidu.com">百度链接</a>
</div>
</div>
<script>
console.log(document.querySelector("#parent"));
console.log(document.querySelector("#parent").toString());
</script>
</body>
</html>
querySelector
querySelector 此时返回值类型为[object HTMLDivElement]，将上述代码改成如下形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</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>
querySelector 改后
二、querySelectorAll（）
将上述代码改成如下形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</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
需要说明的是querySelectorAll返回的是静态（static）的NodeList！！！【一般NodeList及HTMLCollection均为实时的（live）】
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
网友评论