JavaScript 文档元素获取

Flec-hazo

于 2024-08-11 23:51:04 发布

阅读量628

点赞数 14

文章标签： javascript 前端开发语言学习

本文链接：https://blog.csdn.net/m0_73614626/article/details/141114280

版权

通过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>

通过类名获取文档元素

任务描述

本关任务：通过类名获取指定的文档元素。

编程要求

本关的编程任务是补全右侧代码片段中 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>

通过标签名获取文档元素

任务描述

本关任务：通过标签名获取指定的文档元素。

编程要求

本关的编程任务是补全右侧代码片段中 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>

Flec-hazo

关注

14
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 文档元素获取

Document Object Module ，简称 DOM ，中文名文档对象模型。在网页上，组成页面（又叫文档）的一个个对象被组织在树形结构中，用这种结构表示它们之间的层次关系，表示文档中对象的标准模型就称为 DOM。DOM 的作用是给 HTML 文档提供一个标准的树状模型，这样开发人员就能够通过 DOM 提供的接口去操作 HTML 里面的元素。
复制链接

扫一扫