南宁网站制作计划市场营销咨询
目录
通过id获取文档元素
任务描述
相关知识
什么是DOM
文档元素
节点树
通过id获取文档元素
编程要求
通过类名获取文档元素
任务描述
相关知识
通过类名获取文档元素
编程要求
通过标签名获取文档元素
任务描述
相关知识
通过标签的名字获取文档元素
获取标签内部的子元素
编程要求
通过id获取文档元素
任务描述
本关任务：通过 id 获取指定的文档元素。
相关知识
什么是DOM
Document Object Module ，简称 DOM ，中文名文档对象模型。在网页上，组成页面（又叫文档）的一个个对象被组织在树形结构中，用这种结构表示它们之间的层次关系，表示文档中对象的标准模型就称为 DOM 。
DOM 的作用是给 HTML 文档提供一个标准的树状模型，这样开发人员就能够通过 DOM 提供的接口去操作 HTML 里面的元素。
文档元素
先看一段网页代码：
<html><head><title>这里是标题</title></head><body><p>这是我学习JavaScript的网址：</p><a href="https://www.educoder.net/paths">JavaScript学习手册</a></body>
</html>执行后效果如图 1 所示。
图 1
文档元素：指的就是<html>、<head>等等这样一个个的标签和里面的内容。
比如文档元素<title>就是这样：
<title>这里是标题</title>在 JavaScript 中，元素<title>对应一个对象，这个对象有一个属性的值是“这里是标题”。
所以，用JS操作这些文档元素，操作的就是它们对应的JS对象。
节点树
从代码的缩进可以知道，文档元素之间有层次关系，如图 2 所示。
图 2
图 2 和数据结构中树的概念类似，被称为节点树。<html>是根节点，网页的所有文档元素都在里面，<head>和<body>是两个子节点，分别存储网页标题有关内容和网页的主体部分。
JavaScript 要操作这些元素，第一步自然是获得这些元素对应的 JavaScript 对象，那么，怎么获取呢？
通过id获取文档元素
文档元素一般都有一个 id 属性，它的值在本文档中唯一，如下：
<p id="myId">这是我学习JavaScript的网址：</p>用这个 id 获取<p>元素的方法如下：
var pElement = document.getElementById("myId");其中 document 表示整个文档，getElementById()是 document 对象的一个方法，参数是 id 属性的值 myId 。
获取的 pElement 就代表了<p>标签以及里面的内容，接下来，可以通过 pElement 操作这个元素。比如可以用弹框展示一下<p>标签里面的内容：
window.alert(pElement.innerText);效果如下：
编程要求
本关的编程任务是补全右侧代码片段中 Begin 至 End 中间的代码，具体要求如下：
获取本文档中 id 为 a1 的文档元素，要求用 id 获取文档元素；
将获取的元素赋值给变量 myElement ；
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>get element by id</title>
</head>
<body><a id="a1" src="https://www.google.com">Google</a><p id="p1">this is a text</p><script><!-- 请在此处编写代码 --><!---------Begin--------->var myElement=document.getElementById("a1");<!---------End--------->myElement.href="https://www.educoder.net";</script>
</body>
</html>通过类名获取文档元素
任务描述
本关任务：通过类名获取指定的文档元素。
相关知识
除了 id 以外，文档元素另外一个常见的属性是类名。
通过类名获取文档元素
文档元素的类名不唯一（存在多个文档元素的类名相同的情况），如下：
<p class="myName">段落</p>
<a class="myName" href="https://www.educoder.net">这是一个链接</a>document 的getElementsByClassName()方法用来获取指定类名的文档元素数组（ NodeList ，一般叫节点列表），如下：
var myNodeList = document.getElementsByClassName("myName");这样，myNodeList[0]就是<p>元素，而myNodeList[1]就是<a>元素，通过这个方法的名字我们也可以知道获取的标签不唯一。
我们以弹框的形式查看一下<p>里面的内容：
window.alert(myNodeList[0].innerText);效果如图一所示：
图一
编程要求
本关的编程任务是补全右侧代码片段中 Begin 至 End 中间的代码，具体要求如下：
通过getElementsByClassName()方法获取文档中唯一的<p>元素；
将获取到的结果赋值给变量 myElement 。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>get element by name</title>
</head>
<body><img src="" class="myName"/><form class="myName" id="myForm"></form><div class="myName">This is quote</div><p class="myName">This is what you should get</p><script><!-- 请在此处编写代码 --><!---------Begin--------->var myElement=document.getElementsByClassName("myName")[3];<!---------End--------->myElement.innerText="I changed the text";</script>
</body>
</html>通过标签名获取文档元素
任务描述
本关任务：通过标签名获取指定的文档元素。
相关知识
通过前面的多个例子，我们可以看到，文档无非是由几个特定的标签组成，比如<p>、<a>、<img>等，由此可以想到，我们能不能通过标签的名字获取特定的文档元素呢？
通过标签的名字获取文档元素
标签名指的是<>里面的字符串，document 对象的getElementsByTagName()获取整个文档中指定名字的所有标签，显然，结果是一个文档元素数组（节点列表），方法的名字也暗示了这一点。
<div id="div1"><p id="p1">文本1</p><p id="p2">文本2</p><a name="a1">链接</a>
</div>
<div id="div2"><p id="p3" name="a1">文本3</p>
</div>获取所有的<div>元素，如下：
var allDiv = document.getElementsByTagName("div");为了显示效果，我们以页面弹框的形式展示第一个<div>里面的内容：
window.alert(allDiv[0]);效果如下：
这个弹框表明，我们试图弹出的内容是一个div元素。
获取标签内部的子元素
我们获取到的文档元素，也有getElementsByTagName()方法，作用是获取该元素内部指定名字的所有子元素。比如，要获取第一个<div>里面所有的<a>元素，代码如下：
//变量allDiv上面有，这里不再重复！
var allLink = allDiv[0].getElementsByTagName("a");
这样就获取了第一个<div>里面的所有超链接元素。
编程要求
本关的编程任务是补全右侧代码片段中 Begin 至 End 中间的代码，具体要求如下：
获取第二个 div 元素下的第二个 a 元素，要求通过使用标签名获取；
将获取到的结果赋值给变量 myElement 。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>get element by id</title></head>
<body><div class="diva"><a href="https://www.educoder.net">EduCoder</a><a href="https://www.facebook.com">FaceBook</a></div><div class="divb"><a href="https://www.twitter.com">Twitter</a><form name="myForm"></form><a href="https://www.nudt.edu.cn">NUDT</a></div><p id="pp">this is a text</p>
<script><!-- 请在此处编写代码 --><!---------Begin--------->var temp=document.getElementsByTagName("div")[1];var myElement=temp.getElementsByTagName("a")[1];<!---------End--------->myElement.innerText="nudt";
</script>
</body>
</html>