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

JavaScript 文档元素获取

news 2025/6/29 7:50:12

目录

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

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/6/20 13:53:42

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/6/17 19:11:45

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/6/27 7:21:35

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/6/21 3:52:11

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/6/17 6:27:36

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/6/18 5:34:10

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一）

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

编程新知 2025/6/26 0:07:58

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/6/22 6:20:42

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/6/21 12:17:37