获取元素 - JavaScript | 绿叶学习网

获取元素，准确来说，就是获取“元素节点（注意不是属性节点或文本节点）”。对于一个页面，我们想要对某个元素进行操作，就必须通过一定的方式来获取该元素，只有获取到了，才能对其进行相应的操作。

咦，这不跟CSS选择器相似吗？说得没错。只不过选择器是CSS的操作方式，而JavaScript却有着属于自己的另一套方法。在JavaScript中，我们可以通过以下6种方式来获取指定元素。

（1）getElementById()
（2）getElementsByTagName()
（3）getElementsByClassName()
（4）querySelector()和querySelectorAll()
（5）getElementsByName()
（6）document.title和document.body

上面每一种方法都非常重要，我们要一个个地认真学透。请注意，JavaScript是严格区分大小写的，所以在书写的时候，就不要把这些方法写错了。例如你把“getElementById()”写成“getelementbyid()”，就会无法得到正确的结果。

一、getElementById()

在JavaScript中，如果想通过id来选中元素，我们可以使用getElementById()来实现。getElementById这个方法的名字看似很复杂，其实根据英文来理解就很容易了，也就是“get element by id（通过id来获取元素）”的意思。

实际上，getElementById()类似于CSS中的id选择器，只不过getElementById()是JavaScript的操作方式，而id选择器是CSS的操作方式。

语法：

document.getElementById("id名")

举例：


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oDiv = document.getElementById("div1");
            oDiv.style.color = "red";
        }
    </script>
</head>
<body>
    <div id="div1">JavaScript</div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

window.onload = function () 
{
    ……
}

上面表示在整个页面加载完成后执行的代码块。我们都知道，浏览器是从上到下解析一个页面的。这个例子的JavaScript代码在HTML代码的上面，如果没有window.onload，浏览器解析到document.getElementById(“div1”)就会报错，因为它不知道id为"div1"的元素究竟是哪位兄弟。

因此我们必须使用window.onload，使得浏览器把整个页面解析完了再去解析window.onload内部的代码，这样就不会报错了。对于window.onload，我们在“11.7 页面事件”这一节会给大家详细介绍。不过由于window.onload用得非常多，我们可以先去看一下这一节再返回这里学习。

在这个例子中，我们使用getElementById()方法获取id为"div1"的元素，并且把这个DOM对象赋值给变量oDiv，最后使用oDiv.style.color = “red"设置这个元素的颜色为红色。这个用法，我们也会在“10.3 CSS属性操作”一节介绍。注意，getElementById()方法中的id是不需要加上井号（#）的，如果你写成getElementById(”#div1")就是错的。

此外，getElementById()获取的是一个DOM对象，我们在给变量命名的时候，习惯性地以英文“o”开头，以便跟其他变量区分开来，让我们一眼就看出来这是一个DOM对象。

二、getElementsByTagName()

在JavaScript中，如果想通过标签名来选中元素，我们可以使用getElementsByTagName()方法来实现。getElementsByTagName，也就是“get elements by tag name（通过标签名来获取元素）”的意思。

同样，getElementsByTagName()类似于CSS中的“元素选择器”。

语法：

document. getElementsByTagName("标签名")

说明：

getElementsByTagName()方法中“elements”是一个复数，写的时候别漏掉了“s”。这是因为getElementsByTagName()获取的是多个元素（即集合），而getElementById()获取的仅仅是一个元素。

举例：


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oUl = document.getElementById("list");
            var oLi = oUl.getElementsByTagName("li");
            oLi[2].style.color = "red";
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

浏览器预览效果如下图所示。

分析：

var oUl = document.getElementById("list");
var oLi = oUl.getElementsByTagName("li");

在上面代码中，首先使用getElementById()方法获取id为list的ul元素，然后使用getElementsByTagName()方法获取该ul元素下的所有li元素。有小伙伴会想，对于上面两句代码，我直接用下面一句代码岂不是就搞定了吗？

var oLi = document.getElementsByTagName("li");

事实上，这是不一样的。document.getElementsByTagName(“li”)获取的是“整个HTML页面”所有的li元素，而oUl.getElementsByTagName(“li”)获取的仅仅是“id为list的ul元素”下所有li元素。如果想要精确获取，聪明的你自然就不会使用document.getElementsByTagName(“li”)这种方式来实现了。

从上面也可以知道，getElementsByTagName()方法获取的是一堆元素。实际上这个方法获取的是一个数组，如果我们想得到某一个元素，可以使用数组下标的形式获取。其中，oLi[0]表示获取第1个li元素，oLi[1]表示获取第2个li元素……以此类推。

准确来说，getElementsByTagName()方法获取的是一个“类数组”（也叫伪数组），这不是真正意义上的数组。为什么这样说呢？因为我们只能使用到数组的length属性以及下标的形式，但是对于push()等方法是没办法在这里用的，小伙伴试一下就知道了。记住，类数组只能用到两点：length属性；下标形式。

举例：


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var arr = ["HTML", "CSS", "JavaScript", "jQuery", "Vue.js"];
            var oUl = document.getElementById("list");
            var oLi = document.getElementsByTagName("li");
            for (var i = 0; i < oLi.length; i++) 
            {
                oLi[i].innerHTML = arr[i];
                oLi[i].style.color = "red";
            }
        }
    </script>
</head>
<body>
    <ul id="list">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

浏览器预览效果如下图所示。

分析：

oLi.length表示获取“类数组”oLi的长度，有多少个元素，长度就是多少。这个技巧经常会使用到，大家要记住了喔。

oLi[i].innerHTML = arr[i];表示设置li元素中的内容为对应下标的数组arr中的元素，对于innerHTML，我们在“10.5 innerHTML和textContent”这一节会详细介绍。

三、getElementsByClassName()

在JavaScript中，如果想通过class来选中元素，我们可以使用getElementsByClassName()方法来实现。getElementsByClassName，也就是“get elements by class name（通过类名来获取元素）”的意思。

同样，getElementsByClassName()类似于CSS中的class选择器。

语法：

document. getElementsByClassName("类名")

说明：

getElementsByClassName()方法中“elements”是一个复数，写的时候别漏掉了“s”。跟getElementsByTagName相似，getElementsByClassName()获取的也是一个类数组。

举例：


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oLi = document.getElementsByClassName("select");
            oLi[0].style.color = "red";
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li class="select">JavaScript</li>
        <li class="select">jQuery</li>
        <li class="select">Vue.js</li>
    </ul>
</body>
</html>

浏览器预览效果如下图所示。

分析：

getElementsByClassName()获取的也是一个“类数组”。如果我们想得到某一个元素，也是使用数组下标的形式获取的，这一点跟getElementsByTagName()很相似。

四、querySelector()和querySelectorAll()

在多年以前的JavaScript开发中，查找元素是开发人员遇到的最头疼的问题。遥想当年，“程序猿”们一边擦着眼泪，一边憧憬着：“要是JavaScript也有一套类似于CSS选择器的东西，我宁愿不要女朋友！”然而这个梦想现在已经实现了，而大家却反悔了！

JavaScript新增了querySelector()和querySelectorAll()两个方法，使得我们可以使用CSS选择器的语法来获取所需要的元素。

语法：

document.querySelector("选择器");
document.querySelectorAll("选择器");

说明：

querySelector()表示选取满足选择条件的第1个元素，querySelectorAll()表示选取满足条件的所有元素。这两个方法都是非常简单的，它们的写法跟CSS选择器的写法是完全一样的。

document.querySelector("#main")
document.querySelector("#list li:nth-child(1)")
document.querySelectorAll("#list li")
document.querySelectorAll("input:checkbox")

对于id选择器来说，由于页面只有一个元素，建议大家用getElementById()，而不是用querySelector()或querySelectorAll()这两个。因为getElementById()方法效率更高，性能也更快。其中分析如下图所示。

举例：


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oDiv = document.querySelectorAll(".test");
            oDiv[1].style.color = "red";
        }
    </script>
</head>
<body>
    <div>JavaScript</div>
    <div class="test">JavaScript</div>
    <div class="test">JavaScript</div>
    <div>JavaScript</div>
    <div class="test">JavaScript</div>
</body>
</html>

浏览器预览效果如下图所示。

分析：

document.querySelectorAll(".test")表示获取所有class为test的元素。由于获取的是多个元素，因此这也是一个类数组。想要精确得到某一个元素，也需要使用数组下标的形式来获取。

举例：


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oLi = document.querySelector("#list li:nth-child(3)");
            oLi.style.color = "red";
        }
    </script>
</head>
<body>
    <ul id="list">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
        <li>Vue.js</li>
    </ul>
</body>
</html>

浏览器预览效果如下图所示。

分析：

document.querySelector("#list li:nth-child(3)")表示选取id为list的元素下的第3个元素，nth-child(n)属于CSS3的选择器。关于CSS3的的知识，可以参考“从0到1”系列的《从0到1：HTML5+CSS3修炼之道》。

事实上，我们也可以使用document.querySelectorAll("#list li:nth-child(3)")[0]来实现，两者效果是一样的。特别注意一点，querySelectorAll()方法得到的是一个类数组，即使你获取的只有一个元素，也必须使用下标[0]才可以正确获取。

querySelector()和querySelectorAll()非常好用。现在有了这两个方法，老板再也不用担心我写JavaScript慢了！

五、getElementsByName()

对于表单元素来说，它有一个一般元素都没有的name属性。如果想要通过name属性来获取表单元素，我们可以使用getElementsByName()方法来实现。

语法：

document.getElementsByName("name名")

说明：

getElementsByName()获取的也是一个类数组，如果想要准确得到某一个元素，可以使用数组下标形式来获取。

getElementsByName()只用于表单元素，一般只用于单选按钮和复选框。

举例：单选按钮


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oInput = document.getElementsByName("status");
            oInput[2].checked = true;
        }
    </script>
</head>
<body>
    你的最高学历:
    <label><input type="radio" name="status" value="本科" />本科</label>
    <label><input type="radio" name="status" value="硕士" />硕士</label>
    <label><input type="radio" name="status" value="博士" />博士</label>
</body>
</html>

浏览器预览效果如下图所示。

分析：

oInput[2].checked = true;表示将类数组中的第3个元素的checked属性设置为true，也就是将第3个单选按钮选中。

举例：复选框


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            var oInput = document.getElementsByName("fruit");
            for (var i = 0; i < oInput.length; i++) 
            {
                oInput[i].checked = true;
            }
        }
    </script>
</head>
<body>
    你喜欢的水果:
    <label><input type="checkbox" name="fruit" value="苹果" />苹果</label>
    <label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
    <label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
</body>
</html>

浏览器预览效果如下图所示。

分析：

这里使用for循环来将每一个复选框的checked属性都设置为true（被选中）。

六、document.title和document.body

由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，JavaScript专门为我们提供了两个非常方便的方法：document.title和document.body。

举例：


在线测试
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () 
        {
            document.title = "梦想是什么？";
            document.body.innerHTML = "<strong style='color:red'>梦想就是一种让你感到坚持就是幸福的东西。</strong>";
        }
    </script>
</head>
<body>
</body>
</html>

浏览器预览效果如下图所示。

只有选取了元素，才可以对元素进行相应的操作。因此，这一节所介绍的方法是DOM一切操作的基础。