JavaScript 文档元素获取

大连密封材料  金牌会员 | 2024-8-12 15:57:01 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 584|帖子 584|积分 1752

目录
通过id获取文档元素
使命描述
相关知识
什么是DOM
文档元素
节点树
通过id获取文档元素
编程要求
通过类名获取文档元素
使命描述
相关知识
通过类名获取文档元素
编程要求
通过标签名获取文档元素
使命描述
相关知识
通过标签的名字获取文档元素
获取标签内部的子元素
编程要求

通过id获取文档元素

使命描述


本关使命：通过 id 获取指定的文档元素。
相关知识


什么是DOM


Document Object Module ，简称 DOM ，中文名文档对象模子。在网页上，组成页面（又叫文档）的一个个对象被构造在树形结构中，用这种结构表示它们之间的条理关系，表示文档中对象的标准模子就称为 DOM 。
 
DOM 的作用是给 HTML 文档提供一个标准的树状模子，这样开辟人员就可以或许通过 DOM 提供的接口去操作 HTML 里面的元素。
文档元素


先看一段网页代码：
  1. <html>
  2.     <head>
  3.         <title>这里是标题</title>
  4.     </head>
  5.     <body>
  6.         <p>这是我学习JavaScript的网址：</p>
  7.         <a href="https://www.educoder.net/paths">JavaScript学习手册</a>
  8.     </body>
  9. </html>
复制代码
实行后效果如图 1 所示。

图 1


文档元素：指的就是<html>、<head>等等这样一个个的标签和里面的内容。
 
好比文档元素<title>就是这样：
  1. <title>这里是标题</title>
复制代码
在 JavaScript 中，元素<title>对应一个对象，这个对象有一个属性的值是“这里是标题”。
 
所以，用JS操作这些文档元素，操作的就是它们对应的JS对象。
节点树


从代码的缩进可以知道，文档元素之间有条理关系，如图 2 所示。

图 2


图 2 和数据结构中树的概念雷同，被称为节点树。<html>是根节点，网页的全部文档元素都在里面，<head>和<body>是两个子节点，分别存储网页标题有关内容和网页的主体部分。
 
JavaScript 要操作这些元素，第一步自然是获得这些元素对应的 JavaScript 对象，那么，怎么获取呢？
通过id获取文档元素


文档元素一般都有一个 id 属性，它的值在本文档中唯一，如下：
  1. <p id="myId">这是我学习JavaScript的网址：</p>
复制代码
用这个 id 获取<p>元素的方法如下：
  1. var pElement = document.getElementById("myId");
复制代码
其中 document 表示整个文档，getElementById()是 document 对象的一个方法，参数是 id 属性的值 myId 。
 
获取的 pElement 就代表了<p>标签以及里面的内容，接下来，可以通过 pElement 操作这个元素。好比可以用弹框展示一下<p>标签里面的内容：
  1. window.alert(pElement.innerText);
复制代码
效果如下：


编程要求


本关的编程使命是补全右侧代码片段中 Begin 至 End 中央的代码，具体要求如下：
获取本文档中 id 为 a1 的文档元素，要求用 id 获取文档元素；
将获取的元素赋值给变量 myElement ；
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>get element by id</title>
  6. </head>
  7. <body>
  8.     <a id="a1" src="https://www.google.com">Google</a>
  9.     <p id="p1">this is a text</p>
  10.     <script>
  11.             <!-- 请在此处编写代码 -->
  12.         <!---------Begin--------->
  13.         var myElement=document.getElementById("a1");
  15.         <!---------End--------->
  16.         myElement.href="https://www.educoder.net";
  17.     </script>
  18. </body>
  19. </html>
复制代码


通过类名获取文档元素

使命描述


本关使命：通过类名获取指定的文档元素。
相关知识


除了 id 以外，文档元素别的一个常见的属性是类名。
通过类名获取文档元素


文档元素的类名不唯一（存在多个文档元素的类名相同的情况），如下：
  1. <p class="myName">段落</p>
  2. <a class="myName" href="https://www.educoder.net">这是一个链接</a>
复制代码
document 的getElementsByClassName()方法用来获取指定类名的文档元素数组（ NodeList ，一般叫节点列表），如下：
  1. var myNodeList = document.getElementsByClassName("myName");
复制代码
这样，myNodeList[0]就是<p>元素，而myNodeList[1]就是<a>元素，通过这个方法的名字我们也可以知道获取的标签不唯一。
 
我们以弹框的形式检察一下<p>里面的内容：
  1. window.alert(myNodeList[0].innerText);
复制代码
效果如图一所示：

图一 

编程要求


本关的编程使命是补全右侧代码片段中 Begin 至 End 中央的代码，具体要求如下：
通过getElementsByClassName()方法获取文档中唯一的<p>元素；
将获取到的结果赋值给变量 myElement 。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>get element by name</title>
  6. </head>
  7. <body>
  8.     <img src="" class="myName"/>
  9.     <form class="myName" id="myForm"></form>
  10.     <div class="myName">This is quote</div>
  11.     <p class="myName">This is what you should get</p>
  12.     <script>
  13.             <!-- 请在此处编写代码 -->
  14.         <!---------Begin--------->
  15.       var myElement=document.getElementsByClassName("myName")[3];
  17.         <!---------End--------->
  18.         myElement.innerText="I changed the text";
  19.     </script>
  20. </body>
  21. </html>
复制代码


通过标签名获取文档元素

使命描述


本关使命：通过标签名获取指定的文档元素。
相关知识


通过前面的多个例子，我们可以看到，文档无非是由几个特定的标签组成，好比<p>、<a>、<img>等，由此可以想到，我们能不能通过标签的名字获取特定的文档元素呢？
通过标签的名字获取文档元素


标签名指的是<>里面的字符串，document 对象的getElementsByTagName()获取整个文档中指定名字的全部标签，显然，结果是一个文档元素数组（节点列表），方法的名字也暗示了这一点。
  1. <div id="div1">
  2.     <p id="p1">文本1</p>
  3.     <p id="p2">文本2</p>
  4.     <a name="a1">链接</a>
  5. </div>
  6. <div id="div2">
  7.     <p id="p3" name="a1">文本3</p>
  8. </div>
复制代码
获取全部的<div>元素，如下：
  1. var allDiv = document.getElementsByTagName("div");
复制代码
为了显示效果，我们以页面弹框的形式展示第一个<div>里面的内容：
  1. window.alert(allDiv[0]);
复制代码
效果如下：

这个弹框表明，我们试图弹出的内容是一个div元素。
获取标签内部的子元素


我们获取到的文档元素，也有getElementsByTagName()方法，作用是获取该元素内部指定名字的全部子元素。好比，要获取第一个<div>里面全部的<a>元素，代码如下：
  1. //变量allDiv上面有，这里不再重复！
  2. var allLink = allDiv[0].getElementsByTagName("a");
复制代码
 
这样就获取了第一个<div>里面的全部超链接元素。
编程要求


本关的编程使命是补全右侧代码片段中 Begin 至 End 中央的代码，具体要求如下：
获取第二个 div 元素下的第二个 a 元素，要求通过利用标签名获取；
将获取到的结果赋值给变量 myElement 。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>get element by id</title>
  7. </head>
  8. <body>
  9.     <div class="diva">
  10.         <a href="https://www.educoder.net">EduCoder</a>
  11.         <a href="https://www.facebook.com">FaceBook</a>
  12.     </div>
  13.     <div class="divb">
  14.         <a href="https://www.twitter.com">Twitter</a>
  15.         <form name="myForm"></form>
  16.         <a href="https://www.nudt.edu.cn">NUDT</a>
  17.     </div>
  18.     <p id="pp">this is a text</p>
  19. <script>
  20.         <!-- 请在此处编写代码 -->
  21.     <!---------Begin--------->
  22.      var temp=document.getElementsByTagName("div")[1];
  23.      var myElement=temp.getElementsByTagName("a")[1];
  25.     <!---------End--------->
  26.     myElement.innerText="nudt";
  27. </script>
  28. </body>
  29. </html>
复制代码


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

正序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

大连密封材料

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表