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

JavaScript 文档元素获取

news 2025/10/16 3:18:04

目录

通过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大模型：大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

编程新知 2025/10/14 13:19:08

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/8/18 10:21:48

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/10/7 1:33:22

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/10/14 19:29:57

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/9/15 12:06:17

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

编程新知 2025/9/30 16:39:11

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2025/10/5 12:41:19

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/9/28 3:31:47

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

编程新知 2025/10/6 18:46:56

RNN避坑指南：从数学推导到LSTM/GRU工业级部署实战流程

本文较长&#xff0c;建议点赞收藏&#xff0c;以免遗失。更多AI大模型应用开发学习视频及资料&#xff0c;尽在聚客AI学院。 本文全面剖析RNN核心原理&#xff0c;深入讲解梯度消失/爆炸问题&#xff0c;并通过LSTM/GRU结构实现解决方案&#xff0c;提供时间序列预测和文本生成…...

编程新知 2025/9/28 5:49:37