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

咦,这不跟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一切操作的基础。