大三实习小菜蛋之JS元素节点

元素节点对象(element)

-在网页中,每一个标签就是一个节点元素

如何获取元素节点对象

1.通过document对象来获取元素节点
2.通过document对象来创建元素节点

通过document来获取已有的元素节点

document.getElementById()-根据id获取一个元素节点对象
document.getElementsByClassName()-根据元素的class属性值获取一组元素节点对象-返回的是一个类数组对象-该方法返回的结果是一个实时更新的集合当网页中新添加元素时,集合也会实时刷新
document.getElementsByTagName()-根据标签名获取一组元素节点对象-返回的结果是可以实时更新的集合-document.getElementsByTagName("*")获取页面中所有的元素
document.getElementsByName()-根据name属性获取一组元素节点对象-返回一个实时更新的集合-主要用于表单项
document.querySelectorAll()-根据选择器去页面中查询元素-会返回一个类数组(不会实时更新)
document.querySelector()-根据选择器去页面中查询第一个符合条件的元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>获取元素节点</title>
</head>
<body>
<button id="btn01">点我一下</button>
<span class="s1">我是span标签</span>
<span class="s1">我是span标签</span>
<span class="s1">我是span标签</span>
<div>我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
<div>我是div标签</div>
<form><input type="text" name="usrname"><input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女
</form><script>const btn01=document.getElementById("btn01");console.log(btn01);const s1=document.getElementsByClassName("s1");console.log(s1);for(let i=0;i<s1.length;i++){// alert(s1[i]);s1[i].innerText="哈哈哈"+i;}const divs=document.getElementsByTagName("div");console.log(divs);const genderInput=document.getElementsByName("gender");console.log(genderInput);const divs2=document.querySelectorAll("#btn01");console.log(divs2);const divs3=document.querySelectorconst h2=document.createElement("h2");
</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/774536.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用`scipy.stats.wasserstein_distance`来计算两个一维分布之间的Earth Mover‘s Distance (EMD)距离

在Python中&#xff0c;计算Earth Mover’s Distance (EMD)通常使用scipy库中的scipy.stats.wasserstein_distance函数&#xff0c;该函数计算的是Wasserstein距离&#xff0c;它与EMD非常相似&#xff0c;都是用来衡量两个分布之间的距离。 以下是一个简单的Python程序例子&a…

超好用的快捷回复软件

随着直播经济和短视频平台的兴起&#xff0c;品牌营销阵地不再局限于传统的电商巨头——淘宝、天猫、京东和拼多多&#xff0c;越来越多的品牌正积极布局快手、抖音等新晋电商平台&#xff0c;同步打造社群矩阵以拓宽产品推广渠道。这种多维度的市场渗透策略有力地提升了品牌的…

C语言看完我这篇编译与链接就够啦!!!

1. 前言 Hello&#xff01;大家好我是小陈&#xff0c;今天来给大家介绍最详细的C语言编译与链接。 2. 编译和链接 我们通常用的编译器&#xff0c;比如Visual Sudio,这样的IDE(集成开发环境&#xff09;一般将编译和链接的过程一步完成&#xff0c;通常将这这种编译和链接合…

算法(6)KMP+trie

KMP&#xff1a; 最浅显易懂的 KMP 算法讲解_哔哩哔哩_bilibili 该视频使用python书写代码&#xff0c;不会python的小伙伴也可以看看了解kmp的大致思路。 问题描述&#xff1a; kmp&#xff1a;字符串匹配算法&#xff0c;用来找一个长字符串中出现了几次小字符串&#xf…

random模块篇

Python 的 random 模块是一个非常实用的工具&#xff0c;它提供了生成各种类型随机数的方法。无论是生成随机整数、浮点数&#xff0c;还是从序列中随机选择元素&#xff0c;random 模块都能满足你的需求。下面是一个详细的教程&#xff0c;介绍 random 模块的主要功能和用法。…

【生成对抗网络GAN】一篇文章讲透~

目录 引言 一、生成对抗网络的基本原理 1 初始化生成器和判别器 2 训练判别器 3 训练生成器 4 交替训练 5 评估和调整 二、生成对抗网络的应用领域 1 图像生成与编辑 2 语音合成与音频处理 3 文本生成与对话系统

【机器学习300问】54、如何找到有效的组合特征?

一、为什么需要去寻找有效的组合特征&#xff1f; 因为并不是所有的特征组合都会意义&#xff0c;都能带来价值。 例如在房价预测场景中&#xff0c;卧室数量和浴室数量的比值有意义&#xff0c;但房屋面积与建造年份相组合作为新的组合特征&#xff0c;可能就没有实际含义&…

【vivado】在原有工程上新建工程

一、前言 在工作中&#xff0c;我们经常需要接触到别人的工程&#xff0c;并在别人的工程上新加设计功能&#xff0c;此时我们需要以别人工程为基础新建工程。 二、在已有工程上新建工程的方法 2.1 vivado 页面file-project-save as... 该方法的优点为&#xff1a;可以直接…

【ORB-SLAM3】在 Ubuntu20.04 上编译 ORM-SLAM3 并使用 D435i、EuRoC 和 TUM-VI 运行测试

【ORB-SLAM3】在 Ubuntu20.04 上编译 ORM-SLAM3 并使用 D435i、EuRoC 和 TUM-VI 运行测试 1 Prerequisites1.1 C11 or C0x Compiler1.2 Pangolin1.3 OpenCV1.4 Eigen3 2 安装 Intel RealSense™ SDK 2.02.1 测试设备2.2 编译源码安装 (Recommend)2.3 预编译包安装 3 编译 ORB-S…

sql常用之CASE WHEN THEN

sql常用之CASE WHEN THEN SQL中的 CASE 类似编程语言里的 if-then-else 语句&#xff0c;用做逻辑判断。可以用于SELECT语句中&#xff0c;也可以用在WHERE&#xff0c;GROUP BY 和 ORDER BY 子句&#xff1b;可以单独使用&#xff0c;也可以和聚合函数结合使用。 语法&#…

PTA L2-037 包装机

一种自动包装机的结构如图 1 所示。首先机器中有 N 条轨道&#xff0c;放置了一些物品。轨道下面有一个筐。当某条轨道的按钮被按下时&#xff0c;活塞向左推动&#xff0c;将轨道尽头的一件物品推落筐中。当 0 号按钮被按下时&#xff0c;机械手将抓取筐顶部的一件物品&#x…

SSM 整合

文章目录 SSM 整合&#xff08;代码配置&#xff09;1. 基本形式2. 无 web.xml 的理论基础3. WebInitializer 替代 web.xml4. SpringWebConfig 替代 spring-web.xml5. 配置『静态资源不拦截』方案一方案二 6. 配置 URL 后缀生效/失效7. 整合 Service 层8. 整合 Dao 层9. Mybati…

07、Lua 流程控制

Lua 流程控制 Lua 流程控制控制结构语句 Lua 流程控制 Lua编程语言流程控制语句通过程序设定一个或多个条件语句来设定。在条件为 true 时执行指定程序代码&#xff0c;在条件为 false 时执行其他指定代码。 以下是典型的流程控制流程图&#xff1a; 控制结构的条件表达式结…

python面试题(1~10)

1、列表&#xff08;list&#xff09;和元组&#xff08;tuple&#xff09;有什么区别&#xff1f; ①列表是不可变的&#xff0c;创建后可以对其进行修改。元组是不可变的&#xff0c;元组一旦创建&#xff0c;就不能对其进行修改。 ②列表表示的顺序&#xff0c;它们是有序…

vscode c++环境配置

1.基础软件安装 安装Visual Studio Code. 安装C拓展。点击在vscode界面最左侧的Extensions图标&#xff08;打开快捷键&#xff1a;ctrlshiftX&#xff09;&#xff0c;搜索“C/C”&#xff0c;点击进行安装。 确保已安装gcc. 一般ubuntu系统会预装gcc.在终端窗口中输入如下…

查立得源码如何去除版权

最近发现很多人百度&#xff1a;查立得源码如何去除版权。 每个源代码/软件都是有版权的&#xff0c;无法去除&#xff0c;我们也得尊重知识产权/劳动成果。 可以去除/修改的是&#xff1a;页面显示的版权信息,查立得底部信息均可自定义(一般conn.php可修改)。 另&#xff1…

Linux-2 Linux的权限

目录 1.什么是权限&#xff1f; 2.权限的本质 3.Linux中的用户 普通用户与root用户相互转换 普通用户不变root&#xff0c;以root身份执行一个命令 LInux中的角色 4.Linux文件的权限 5.快速掌握修改权限的做法 修改权限 6.对比权限有无表现 对于普通用户&#xf…

五分钟,零基础也能入门 Python 图像文字识别

一. 前言 最近在研究 Python 的一些功能 &#xff0c; 也尝试了一些有趣实现&#xff0c; 这一篇就从实践的角度来研究一下 Python 如何实现图片识别。 众所周知 &#xff0c; Python 的库真的老多了&#xff0c;其中在图像识别上比较突出的就是 OpenCV. 那么基于这个库我们…

基于RAG的大模型知识库搭建

什么是RAG RAG(Retrieval Augmented Generation)&#xff0c;即检索增强生成技术。 RAG优势 部分解决了幻觉问题。由于我们可以控制检索内容的可靠性&#xff0c;也算是部分解决了幻觉问题。可以更实时。同理&#xff0c;可以控制输入给大模型上下文内容的时效性&#xff0c…

什么是高阶组件,有哪些场景?

高阶函数是接收一个或者多个函数作为入参,返回一个新的函数。 高阶组件,则是接收一个或者多个组价作为入参,并且返回一个组件。高阶组件的实现方式,本质上是一个装饰者设计模式。 最基本的高阶组件模版如下: import React form react;export default (WrappedComponent…