〖大前端 - 基础入门三大核心之JS篇㊳〗- DOM访问元素节点

  • 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费如需要项目实战或者是体系化资源,文末名片加V!
  • 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。
  • 荣誉:2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker全栈领域优质创作者

  • 🏆 白宝书系列
    • 🏅 启示录 - 攻城狮的自我修养
    • 🏅 Python全栈白宝书
    • 🏅 ChatGPT实践指南白宝书
    • 🏅 产品思维训练白宝书
    • 🏅 全域运营实战白宝书
    • 🏅 大前端全栈架构白宝书


文章目录

  • ⭐ 访问元素节点
    • 🌟 认识document对象
    • 🌟 访问元素节点的常用方法
      • ✨ getElementById()
      • ✨ 延迟运行
      • ✨ getElementsByTagName()
      • ✨ getElementsByClassName()
      • ✨ querySelector()
      • ✨ querySelectorAll()

⭐ 访问元素节点

所谓“访问”元素节点,就是指“得到”、“获取”页面上的元素节点

对节点进行操作,第一步就是要得到它

访问元素节点主要依靠document对象

🌟 认识document对象

document对象是DOM中最重要的东西,几乎所有DOM的功能都封装在了document对象中

document对象也表示整个HTML文档,它是DOM节点树的

document对象的nodeType属性值是9

image-20230403160713431

image-20230403160810420

🌟 访问元素节点的常用方法

方法功能兼容性
document.getElementById()通过id得到元素IE6
document.getElementsByTagName()通过标签名得到元素数组IE6
document.getElementsByClassName()通过类名得到元素数组IE9
document.querySelector()通过选择器得到元素IE8部分兼容,IE9完全兼容
document.querySelectorAll()通过选择器得到元素数组IE8部分兼容,IE9完全兼容

✨ getElementById()

getElementById()方法,通过id得到元素节点

示例代码:

<body><div id="box"></div><p id="para"></p><script>//访问/获取元素节点var oBox = document.getElementById('box');  //注意括号里的大小写字母也要匹配var oPara = document.getElementById('para');</script>
</body>

注意事项:

  • 如果页面上有相同的元素,则只能得到第一个(所以页面上不要出现相同id的元素)
  • 不管元素藏的有多深,都可以找到

✨ 延迟运行

在测试DOM代码时,通常JS代码一定要写到HTML节点的后面,否则JS无法找到相应HTML节点

但是,也可以使用window.onload = function(){}事件,使页面加载完毕后,再执行指定的代码(原理就是给window窗口对象添加一个onload事件,onload表示加载完,即给窗口添加了一个全都加载完的事件监听,等页面加载完后,再执行function里面的方法)

示例代码:

<body><!--下方的代码中,script标签放在了最上方--><script>//给window对象添加onload事件监听window.onload = function () {//访问/获取元素节点var oBox = document.getElementById('box');var oPara = document.getElementById('para');console.log(oBox);console.log(oPara);}</script><div id="box"></div><p id="para"></p>
</body>
</html>

image-20230403192109560

很多公司会习惯将script标签放到head里面,这样写也需要加上“延时运行”来保证js代码在页面加载完毕后运行。

✨ getElementsByTagName()

getElementsByTagName()方法,通过标签名得到节点数组

数组方便遍历,从而可以批量操控元素节点

即使页面上只有一个指定标签名的节点,也将得到长度为1的数组

任何一个节点元素也可以调用getElementsByTagName()方法,从而得到其内部的某种类的元素节点

示例代码:

<body><div class="box1"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><div class="box2"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><script>var oPs = document.getElementsByTagName('p');  //得到页面中的所有p标签console.log(oPs);</script>
</body>

image-20230405215132114

如果想要得到指定盒子内的p标签,可以这样写:

<body><div id="box1"><p>我是段落</p><p>我是段落</p><p>我是段落</p><p>我是段落</p></div><div id="box2"><p>我是段落2</p><p>我是段落2</p><p>我是段落2</p><p>我是段落2</p></div><script>//先得到box2var box2 = document.getElementById('box2');//再得到box2中的p标签var ps_inbox2 = box2.getElementsByTagName('p');console.log(ps_inbox2);</script>
</body>

image-20230405215511053

✨ getElementsByClassName()

getElementsByClassName()方法,通过类名得到节点数组

getElementsByClassName()方法从IE9开始兼容

某个节点元素也可以调用getElementsByClassName()方法,从而得到其内部的某类名的元素节点

✨ querySelector()

querySelector()方法,是通过选择器得到元素,括号中直接写选择器就可以了

querySelector()方法只能得到页面上一个元素,如果有多个元素符合条件,则只能得到第一个元素

querySelector()方法从IE8开始兼容,但从IE9开始支持CSS3的选择器,如:nth-child()、:[src^=‘husky’]等css3选择器形式都支持良好

示例代码:

<body><div class="box"><p>我是段落1</p><p>我是段落2</p><p id="para">我是段落3</p><p>我是段落4</p></div><script>//得到class=box中,id=para的p标签var p = document.querySelector('.box #para');console.log(p);</script>
</body>

image-20230405221157827

✨ querySelectorAll()

querySelectorAll()方法,是通过选择器得到元素数组,括号中写选择器

即使页面上只有一个符合选择器的节点,也将得到长度为1的数组

示例代码:

<body><div class="box"><p>我是段落1</p><p>我是段落2</p><p id="para">我是段落3</p><p>我是段落4</p></div><script>//得到class=box中的p标签var ps = document.querySelectorAll('.box p');console.log(ps);//得到了数组自然也可以选择其中的某一项了console.log(ps[2])</script>
</body>

image-20230405222415558

querySelector()querySelectorAll() 是在实际工作中非常常用的获得节点的方法。

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

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

相关文章

基于DOTween插件实现金币飞行到指定位置功能

文章目录 前言一、DOTween是什么&#xff1f;二、使用步骤1.导入DOTween插件在Unity官方插件商店找到DOTween插件导入DOTween插件启用DOTween插件 2.代码逻辑金币飞行代码控制飞行效果代码 3.物体配置1.物体上装配CoinEffect脚本2.在金币预制体上装配FlyControl脚本 三、效果展…

Web安全研究(五)

Automated WebAssembly Function Purpose Identification With Semantics-Aware Analysis WWW23 文章结构 introbackgroundsystem design abstraction genapplying abstractionsclassifier data collection and handling data acquisitionstatistics of collected datamodule-…

常见的SQLite语句

SQLite是一种嵌入式关系型数据库管理系统&#xff0c;它使用SQL&#xff08;Structured Query Language&#xff09;语言进行数据管理和操作。下面是一些常见的SQLite语句以及它们的详细介绍和示例说明。 1、CREATE TABLE&#xff1a;用于创建表格。它指定了表的名称和列的定义…

[管理与领导-125]:一个IT人的思考:职场中、人际交往中,不要为他人的不良行为和言语买单,不要让自己的情绪被外界影响或掌控。

目录 前言&#xff1a; 一、是什么What 二、为什么Why? 三、怎么办How? 前言&#xff1a; 无论是职场中&#xff0c;还是人际交往中&#xff0c;我们的难免受到他人的影响&#xff0c;有积极正面的情绪影响&#xff0c;有消极负面的情绪影响。为什么我们自身的情绪会受到…

回归预测 | Matlab实现HPO-ELM猎食者算法优化极限学习机的数据回归预测

回归预测 | Matlab实现HPO-ELM猎食者算法优化极限学习机的数据回归预测 目录 回归预测 | Matlab实现HPO-ELM猎食者算法优化极限学习机的数据回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现HPO-ELM猎食者算法优化极限学习机的数据回归预测&#xff08;…

pytorch.nn.Conv1d详解

通读了从论文中找的代码&#xff0c;终于找到这个痛点了&#xff01; 以下详解nn.Conv1d方法 1 参数说明 in_channels(int) – 输入信号的通道。 out_channels(int) – 卷积产生的通道。 kernel_size(int or tuple) - 卷积核的尺寸&#xff0c;经测试后卷积核的大小应为in_cha…

Linux - 驱动开发 - RNG框架

说明 公司SOC上有一个新思的真随机数&#xff08;TRNG&#xff09;模块&#xff0c;Linux平台上需要提供接口给外部使用。早期方式是提供一个独立的TRNG驱动&#xff0c;实现比较简单的&#xff0c;但是使用方式不open&#xff0c;为了加入Linux生态环境&#xff0c;对接linux…

设计模式(一)-设计原则(1)

六大设计原则 1、单一职责原则 特点&#xff1a; 类和方法属性等&#xff0c;都应当遵守单一职责。尽可能保持统一性&#xff0c;单一性。 含义&#xff1a; &#xff08;1&#xff09;统一性&#xff0c;定义一个模块就必须要符合所有对象的行为特征。比如声明一个 Animal 类…

AR眼镜_单目光波导VS双目光波导方案

双目光波导AR眼镜方案是一种创新的智能设备&#xff0c;可以在现实场景中叠加虚拟信息&#xff0c;提供增强的视觉体验和交互体验。光学显示方案是AR眼镜的核心技术之一&#xff0c;它对眼镜的性能和使用体验起着决定性的作用。 相比于单目AR眼镜&#xff0c;双目AR眼镜具有更好…

【嵌入式 – GD32开发实战指南(ARM版本)】第2部分 外设篇 - 第3章 温度传感器DS18B20

1 理论分析 1.1 DS18B20概述 DS18B20 是 DALLAS 最新单线数字温度传感器,新的"一线器件"体积更小、适用电压更宽、更经济。Dallas 半导体公司的数字化温度传感器 DS1820 是世界上第一片支持 "一线总线"接口的温度传感器。 DS18B20采用的单总线协议,也…

【心得】Python基础梳理个人笔记

python 特点&#xff1a; 1 解释性语言 2 交互式语言 3 支持面向对象编程 4 初学者语言 基本语法 # -*- coding: utf-8 -*- #!/usr/bin/python3 #!/bin/sh python payload.py chmod x ./payload.py ./payload.py 直接python xxx.py 不需要声明#!/usr/bin/pytho…

Git详解及 github使用

1.1 关于版本控制 开始之前先看一个没有版本控制的例子 1.1.1 本地版本控制 本地版本控制系统 许多人习惯用复制整个项目目录的方式来保存不同的版本&#xff0c;或许还会改名加上备份时间以示区别。这么做唯一的 好处就是简单&#xff0c;但是特别容易犯错。有时候会混淆所在…

YOLOv5 学习记录

文章目录 整体概况数据增强与前处理自适应Anchor的计算Lettorbox 架构SiLU激活函数YOLOv5改进点SSPF 模块 正负样本匹配损失函数 整体概况 YOLOv5 是一个基于 Anchor 的单阶段目标检测&#xff0c;其主要分为以下 5 个阶段&#xff1a; 1、输入端&#xff1a;Mosaic 数据增强、…

C++学习 --vector

目录 1&#xff0c; 什么是vector 2&#xff0c; 创建vector 2-1&#xff0c; 标准数据类型 2-2&#xff0c; 自定义数据类型 2-3&#xff0c; 其他创建方式 3&#xff0c; 操作vector 3-1&#xff0c; 赋值 3-2&#xff0c; 添加元素 3-2-1&#xff0c; 添加元素(assi…

简单聊一聊幂等和防重

大家好&#xff0c;我是G探险者。 每年的双十一&#xff0c;618&#xff0c;电商系统都会面临这超高的流量&#xff0c;如果一个订单被反复提交&#xff0c;那电商系统如何保证这个订单之后执行一次减库存&#xff0c;扣款的操作&#xff1f; 这里就引入两个概念&#xff0c;…

下一代搜索引擎会什么?

现在是北京时间2023年11月18日。聊一聊搜索。 说到搜索&#xff0c;大家首先想到的肯定是谷歌&#xff0c;百度。我把这些定义成上一个时代的搜索引擎。ChatGPT已经火热了有一年的时间了&#xff0c;大家都认为Ai搜索是下一代的搜索。但是AI搜索&#xff0c;需要的是很大算力&a…

大语言模型的三阶段训练

为了训练专有领域模型&#xff0c;选择LLaMA2-7B作为基座模型&#xff0c;由于LLaMA模型中文词表有限&#xff0c;因此首先进行中文词表的扩展&#xff0c;然后进行三阶段训练&#xff08;增量预训练&#xff0c;有监督微调&#xff0c;强化学习&#xff09;。 代码将全部上传…

力扣刷题篇之位运算

系列文章目录 目录 系列文章目录 前言 一、位运算的基本运算 二、位运算的技巧 三、布隆过滤器 总结 前言 本系列是个人力扣刷题汇总&#xff0c;本文是数与位。刷题顺序按照[力扣刷题攻略] Re&#xff1a;从零开始的力扣刷题生活 - 力扣&#xff08;LeetCode&#xff0…

【数据结构(一)】线性结构和非线性结构

文章目录 线性结构和非线性结构1. 线性结构2. 非线性结构 线性结构和非线性结构 数据结构包括&#xff1a;线性结构和非线性结构。 1. 线性结构 线性结构作为最常用的数据结构&#xff0c;其特点是数据元素之间存在一对一的线性关系。线性结构有两种不同的存储结构&#xff…

go学习之简单项目

项目 文章目录 项目1.项目开发流程图2.家庭收支记账软件项目2&#xff09;项目代码实现3&#xff09;具体功能实现 3.客户信息管理系统1&#xff09;项目需求说明2&#xff09;界面设计3&#xff09;项目框架图4&#xff09;流程5&#xff09;完成显示客户列表的功能6&#xff…