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

JavaScript 文档元素获取

news 2026/4/9 12:12:31

目录

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

AI开发-python-langchain框架（--自定义Tool ）夹

起因是我想在搞一些操作windows进程的事情时&#xff0c;老是需要右键以管理员身份运行&#xff0c;感觉很麻烦。就研究了一下怎么提权&#xff0c;顺手瞄了一眼Windows下用户态权限分配&#xff0c;然后也是感谢《深入解析Windows操作系统》这本书给我偷令牌的灵感吧&#xff…...

编程新知 2026/4/9 12:00:11

【Chips】从“打两拍”到“异步FIFO”：跨时钟域同步方案的选择逻辑与实战边界

1. 跨时钟域同步的挑战与核心问题 第一次接触跨时钟域设计时&#xff0c;我盯着示波器上那些不稳定的波形整整发呆了半小时。当时正在调试一个简单的按键消抖电路&#xff0c;按键信号从20MHz的IO时钟域传递到100MHz的系统时钟域&#xff0c;结果发现每隔几次就会产生误触发。这…...

编程新知 2026/4/9 11:31:19

MelonLoader：5个突破游戏扩展边界的革新性方案

MelonLoader&#xff1a;5个突破游戏扩展边界的革新性方案 【免费下载链接】MelonLoader The Worlds First Universal Mod Loader for Unity Games compatible with both Il2Cpp and Mono 项目地址: https://gitcode.com/gh_mirrors/me/MelonLoader 一、技术定位与核心价…...

编程新知 2026/4/9 10:55:04

Human3.6M数据集获取与预处理实战指南：从百度网盘到可用的.pkl文件

1. Human3.6M数据集简介与下载准备 Human3.6M是目前人体姿态估计领域最权威的基准数据集之一&#xff0c;包含11名专业演员在17种日常活动场景下的360万帧动作捕捉数据。我第一次接触这个数据集时&#xff0c;面对近50GB的原始文件和复杂的目录结构也一头雾水。这里分享从下载到…...

编程新知 2026/4/9 9:54:55

LightOnOCR-2-1B GPU算力方案：单卡A10部署 vs 双卡T4分片部署成本效益对比

LightOnOCR-2-1B GPU算力方案&#xff1a;单卡A10部署 vs 双卡T4分片部署成本效益对比 1. 项目背景与需求分析 LightOnOCR-2-1B 是一个拥有10亿参数的多语言OCR识别模型&#xff0c;支持包括中文、英文、日文、法文、德文、西班牙文、意大利文、荷兰文、葡萄牙文、瑞典文和丹…...

编程新知 2026/4/9 9:08:59

抖音风控参数‘bd-ticket-guard-client-data’深度解析：从X.509证书到请求签名的完整链路

抖音风控参数‘bd-ticket-guard-client-data’的技术内幕&#xff1a;从证书链到请求签名的安全架构 在移动互联网时代&#xff0c;平台风控系统如同数字世界的免疫系统&#xff0c;而bd-ticket-guard-client-data这类参数就是其识别"自我"与"非我"的关键标…...

编程新知 2026/4/9 8:34:03

OpenClaw安全防护指南：Qwen2.5-VL-7B图文模型权限管理

OpenClaw安全防护指南&#xff1a;Qwen2.5-VL-7B图文模型权限管理 1. 为什么需要关注OpenClaw的安全防护&#xff1f; 上周我在调试一个自动整理照片的OpenClaw任务时&#xff0c;突然发现脚本试图删除我整个Documents文件夹——仅仅因为我随口说了句"把没用的文件清理掉…...

编程新知 2026/4/9 8:01:44

AgentCPM历史记录功能：自动保存所有研报，构建个人知识库

AgentCPM历史记录功能&#xff1a;自动保存所有研报&#xff0c;构建个人知识库 1. 为什么需要研报历史记录功能 1.1 研究工作的连续性挑战 专业分析师和研究人员每天都会产生大量研究内容&#xff0c;但传统工作方式存在明显痛点&#xff1a; 内容分散&#xff1a;不同日期…...

编程新知 2026/4/9 7:19:03

墨语灵犀赋能在线教育：AI助教自动批改编程作业实践

墨语灵犀赋能在线教育&#xff1a;AI助教自动批改编程作业实践 每次上完《Python入门》课&#xff0c;看着邮箱里堆积如山的作业压缩包&#xff0c;你是不是也感到一阵头疼&#xff1f;打开一份作业&#xff0c;从代码缩进看到变量命名&#xff0c;再从逻辑结构分析到运行结果…...

编程新知 2026/4/9 6:37:19

AI写论文秘籍在此！4款AI论文写作工具，助力毕业论文顺利通过！

你是否还在为撰写期刊论文、毕业论文或职称论文而苦恼不已呢&#xff1f;当面对浩瀚如海的文献&#xff0c;撰写论文时常常让人感到无从下手。各种复杂的格式要求让人筋疲力尽&#xff0c;而不断的修改更是加剧了这种无力感&#xff0c;使得写作效率低下&#xff0c;成为许多学…...

编程新知 2026/4/9 6:08:54