当前位置： 首页 > news >正文

JavaScript 文档元素获取

news 2026/2/9 1:47:19

目录

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

相关文章：

JavaScript 文档元素获取

目录 通过id获取文档元素 任务描述 相关知识 什么是DOM 文档元素 节点树 通过id获取文档元素 编程要求 通过类名获取文档元素 任务描述 相关知识 通过类名获取文档元素 编程要求 通过标签名获取文档元素 任务描述 相关知识 通过标签的名字获取文档元素 获取标…...

编程日记 2024/8/12 4:50:26

docker pull实现断点续传

问题背景 在使用Docker拉取DockerHub的镜像时&#xff0c;经常会出现网络不稳定的问题&#xff0c;这就导致拉取到一半的镜像会重新拉取&#xff0c;浪费时间。例如下面这种情况&#xff1a; 第二次拉取 这是一个网络中断的场景&#xff0c;第二次重新拉取的时候&#xff0c;同…...

编程日记 2024/8/12 4:48:24

无字母数字webshell之命令执行

源码 题目限制&#xff1a; webshell长度不超过35位除了不包含字母数字&#xff0c;还不能包含$和_ 这里使用php5来解决 可以围绕以下两点展开&#xff1a; shell下可以利用.来执行任意脚本Linux文件名支持用glob通配符代替 .或者叫period&#xff0c;它的作用和source一样…...

编程日记 2024/8/12 4:47:22

华为OD笔试

机试总分400。三道题目。100&#xff0b;100&#xff0b;200 华为od考试时间为150分钟&#xff0c;共有三道编程题&#xff0c;分数分别为100、100和200。如果你是目标院校&#xff08;查看目标院校请戳&#xff09;的话&#xff0c;及格线是160分&#xff0c;非目标院校则不确…...

编程日记 2024/8/12 4:46:21

HAProxy理论+实验

目录 一、基于cookie的会话保持 1、配置选项 2、配置示例 3、验证cookie信息 二、IP透传 1、layer4 与 layer7 &#xff08;1&#xff09;四层:IPPORT转发 &#xff08;2&#xff09;七层:协议内容交换 三、haproxy的ACL应用 1、ACL配置选项 &#xff08;1&#xf…...

编程日记 2024/8/12 4:45:20

Spring Boot ⽇志

1. ⽇志概述 为什么要学习⽇志 ⽇志对我们来说并不陌⽣, 从JavaSE部分, 我们就在使⽤ System.out.print 来打印⽇志了. 通过打 印⽇志来发现和定位问题, 或者根据⽇志来分析程序的运⾏过程. 在Spring的学习中, 也经常根据控制台 的⽇志来分析和定位问题. 随着项⽬的复杂…...

编程日记 2024/8/12 4:42:18

最详细！教你学习haproxy七层代理

一、工作原理 &#xff08;1&#xff09;包括 监听端口&#xff1a;HAProxy 会在指定的端口上监听客户端的请求。 例如&#xff0c;它可以监听常见的 HTTP 和 HTTPS 端口&#xff0c;等待客户端连接。请求接收&#xff1a;当客户端发起请求时&#xff0c;HAProxy 接收到请求。…...

编程日记 2024/8/12 4:41:17

ElementUI 事件回调函数传参技巧与自定义参数应用

ElementUI 事件回调函数传参技巧与自定义参数应用 在使用elementUI时&#xff0c;事件回调函数传递参数是一个常见的需求。根据搜索结果&#xff0c;我们可以了解到两种主要的方法来传递自定义参数&#xff1a; 使用回调函数&#xff1a;当elementUI组件触发事件时&#xff0c…...

编程日记 2024/8/12 4:40:16

优化Next的webpack配置

众所周知&#xff0c;next的webpack打包实际上分成了两个部分&#xff0c;一个是服务器端、一个是客户端&#xff0c;我们这里的配置主要是针对客户端的配置。 目的在于降低_app.js包大小&#xff0c;合理划分基础包、工具包、常用方法包、拆分lodash按需引入效果。 拆分lodas…...

编程日记 2024/8/12 4:39:15

Q-Dir vs 传统文件管理器：为何开发者更偏爱这款神器？

前言 在这个信息爆炸的时代&#xff0c;我们每天都在与海量的文件和文件夹打交道&#xff1b;你是否曾经为了找一个文件而翻遍了整个硬盘&#xff1f;是否因为繁琐的文件夹操作而头疼不已&#xff1f;今天&#xff0c;就让我小江湖带你走进一个全新的世界——Q-Dir&#xff0c;…...

编程日记 2024/8/12 4:38:14

日常疑问小记录

1、在抢票过程中&#xff0c;有些人显示服务器崩溃而另一些人仍能访问&#xff0c;可能是由于以下几个原因&#xff1a; &#xff08;1&#xff09;负载均衡&#xff1a;服务器可能采用了负载均衡技术&#xff0c;将用户请求分配到多个服务器上。部分用户可能被引导到正常运行…...

编程日记 2024/8/12 4:36:12

Java Web —— 第四天（HTTP协议，Tomcat）

HTTP-概述 概念:Hyper Text Transfer Protocol&#xff0c;超文本传输协议&#xff0c;规定了浏览器和服务器之间数据传输的规则 特点: 1. 基于TCP协议:面向连接&#xff0c;安全 2.基于请求-响应模型的:一次请求对应一次响应 3. HTTP协议是无状态的协议: 对于事务处理没有…...

编程日记 2024/8/12 4:35:11

C++ list的基本使用

目录 1.list简要介绍 2. list的构造 3. list中迭代器的使用 (1). 双向迭代器与随机访问迭代器使用区别 4.判空、获取元素个数 5. list头、尾元素的访问 6. 插入与删除操作 (1). 头插头删&#xff0c;尾插尾删 (2). 插入&#xff0c;删除与清空 (3). 交换 7. list容器迭代…...

编程日记 2024/8/12 4:33:09

云中韧性：Spring Cloud服务调用重试机制深度解析

标题&#xff1a;云中韧性&#xff1a;Spring Cloud服务调用重试机制深度解析 在微服务架构中&#xff0c;服务间的调用可能会因为网络问题、服务不可达、资源竞争等原因失败。Spring Cloud作为微服务架构的主流实现框架&#xff0c;提供了一套完整的服务调用重试机制&#xf…...

编程日记 2024/8/12 4:30:01

83.SAP ABAP从前台找字段所在表的两种方法整理笔记

目录 方法1&#xff1a;F1查看技术信息 F1 技术信息 方法2&#xff1a;ST05开启跟踪 Activate Trace Input and save data Deactivate Trace Display Trace 分析你想要的表 方法1&#xff1a;F1查看技术信息 从前台找一个屏幕字段所在表&#xff0c;一般通过按F1来查找…...

编程日记 2024/8/12 4:27:58

docker为普通用户设置sudo权限

在 Linux 上使用 Docker 命令时&#xff0c;默认情况下需要 sudo 权限。这是因为 Docker 守护进程&#xff08;Docker daemon&#xff09;通常运行在 root 用户下&#xff0c;而访问和管理 Docker 守护进程的权限也默认被限制给 root 用户。 然而&#xff0c;为了方便日常使用…...

编程日记 2024/8/12 4:26:58

Nginx + PHP 8.0支持视频上传

在 Ubuntu 20.04 上配置 Nginx PHP 8.0 的架构以支持视频上传&#xff0c;需要从 Nginx 和 PHP 两个方面进行配置&#xff0c;以确保服务器能够处理大文件上传。以下是详细的步骤&#xff1a; 1. Nginx 配置 1.1 增加上传文件大小限制 默认情况下&#xff0c;Nginx 对上传文…...

编程日记 2024/8/12 4:25:56

MySQL基础详解（3）

文章目录 索引普通索引创建索引修改表结构(添加索引)创建表的时候直接指定删除索引的语法 唯一索引创建索引修改表结构创建表的时候直接指定 使用ALTER 命令添加和删除索引使用ALTER 命令添加和删除主键显示索引信息 约束非空约束&#xff1a;唯一约束&#xff1a;主键约束&…...

编程日记 2024/8/12 4:22:53

傅里叶变换结合数学形态学进行边缘增强和边缘提取

一、前言 傅里叶变换是图像变换的一种常用方法&#xff0c;傅里叶变换在图像处理中扮演着核心角色&#xff0c;它通过将图像从空间域转换到频率域&#xff0c;获取图像的频率成分&#xff0c;因为有些特征在空间域很难处理&#xff0c;但在频率域比较容易处理。这一转换有助于分…...

编程日记 2024/8/12 4:19:50

Haproxy的ACL介绍及应用实例

一、ACL介绍 访问控制列表ACL&#xff0c;Access Control Lists&#xff09; 是一种基于包过滤的访问控制技术 它可以根据设定的条件对经过服务器传输的数据包进行过滤(条件匹配)即对接收到的报文进行匹配和过 滤&#xff0c;基于请求报文头部中的源地址、源端口、目标地址、目…...

编程日记 2024/8/12 4:18:49

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

编程新知 2025/8/24 20:45:38

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/12/15 1:34:37

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

编程新知 2026/1/15 4:39:38

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

编程新知 2026/1/27 7:46:36

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

编程新知 2025/11/22 7:38:58

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2026/1/30 12:10:19

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

编程新知 2026/2/2 22:06:13

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2026/1/8 22:17:14