首页 > 其他分享 >dom 元素的查找方式

dom 元素的查找方式

时间:2024-03-04 14:13:27浏览次数:14  
标签:返回 NodeList dom 元素 查找 myClass id

JavaScript 提供了多种方法可以在 DOM(文档对象模型)结构中查找元素,以下是一些常见的方法:

1. `getElementById(id)`: 通过元素的 id 属性查找元素。每个 id 在一个页面中应是唯一的,所以这个方法总是返回单个元素(或 null,如果没有找到元素)。

2. `getElementsByClassName(className)`: 通过元素的 class 属性查找元素。由于一个页面中可能有多个元素拥有相同的 class,所以此方法返回的是一个 NodeList(即使只找到一个元素,也会返回 NodeList)。

3. `getElementsByTagName(tagName)`: 通过元素的标签名查找元素。此方法也返回一个 NodeList,因为一个页面中通常会有多个相同标签的元素。

4. `querySelector(selector)`: 用 CSS 选择器来查找元素,当有多个匹配时,只返回第一个元素。

5. `querySelectorAll(selector)`: 用 CSS 选择器来查找元素,返回所有匹配的元素作为一个 NodeList。

例子:

```javascript
document.getElementById('myId'); // 返回 id 为 'myId' 的元素
document.getElementsByClassName('myClass'); // 返回所有 class 包含 'myClass' 的元素
document.getElementsByTagName('div'); // 返回所有 'div' 元素
document.querySelector('#myId'); // 返回 id 为 'myId' 的元素
document.querySelectorAll('.myClass'); // 返回所有 class 包含 'myClass' 的元素
```

请注意,返回的 NodeList 不是一个数组,虽然它也有 length 属性和可以通过索引访问元素,但它不具备数组的所有方法,比如 `push`, `pop` 等。如果需要以数组的方式来处理 NodeList,可以将其转换为数组,例如使用 `Array.from(nodeList)` 或者扩展操作符 `[...nodeList]`。

标签:返回,NodeList,dom,元素,查找,myClass,id
From: https://www.cnblogs.com/coodeshark/p/18051701

相关文章

  • leedcode 多数元素
    自己写的:classSolution:defmajorityElement(self,nums):#创建一个空字典用于存储数字和其出现次数mydict=dict()#遍历输入的列表numsforiinnums:#如果数字i不在字典中,将其添加到字典,并初始化计数为0......
  • MySQL 查找并删除重复行
    本文讲述如何查找数据库里重复的行。这是初学者十分普遍遇到的问题。方法也很简单。这个问题还可以有其他演变,例如,如何查找“两字段重复的行”(#mysqlIRC频道问到的问题)如何查找重复行第一步是定义什么样的行才是重复行。多数情况下很简单:它们某一列具有相同的值。本文采用这一......
  • random
    random随机模块Python的random模块提供了一系列的随机数生成函数。importrandomrandom:获取0-1之间的随机小数(左闭右开)print(random.random())#输出:一个0-1之间的随机小数randrange:随机获取指定范围内的整数(包含开始值,不包含结束值,间隔值)print(random.randrange(3)......
  • 洛谷题单指南-二分查找与二分答案-P1163 银行贷款
    原题链接:https://www.luogu.com.cn/problem/P1163题意解读:利率越小,贷款期限和每个月还的钱固定的情况下,越有可能能够还完全部的贷款,具备单调性,因此给定贷款利率、贷款月数、每月还款钱数,可以计算最终贷款还剩下多少,有两种情况:>=0,说明利率可能大了,要试探更小利率;<0,说明利率小了,要......
  • 【基础算法】二分查找
    二分查找什么是二分?将问题分成两个部分。猜数游戏计算机给你一个范围内的随机数,你要输入一个数,计算机给你反馈是太大了还是太小了,直到你输出正确的答案。怎么设计这个程序呢?#include<iostream>#include<ctime>usingnamespacestd;intmain(){srand(time(NULL));......
  • unhide 是一款强大的取证工具,主要用于查找和发现被隐藏的进程、TCP/UDP端口以及其他隐
    unhide是一款强大的取证工具,主要用于查找和发现被隐藏的进程、TCP/UDP端口以及其他隐藏技术。其基本技术原理如下:ROOTKIT和LKM:ROOTKIT(RootKit)是一种恶意软件,常用于隐藏恶意活动和进程。它通过修改操作系统的核心组件和内核模块(LinuxKernelModule,LKM)来实现对系统的隐匿。u......
  • 局部匹配的查找
    问题:存在包含指定内容的返回“是”,否则返回“否”。函数公式解决:查找范围为同行:=IF(COUNTIF(B2,"*"&A2&"*"),"是","否")查找范围不限定行:=IF(COUNTIF(B:B,"*"&A2&"*"),"是","否")CountIf的条件使用前后都带通配符星号,表示“包含”。 ......
  • 数据结构·查找算法
    查找1.顺序查找一般表(1)代码typedefstruct{ElemType*elem;inttableLen;}SSTable;intsearchSeq(SSTableST,ElemTypekey){ST.elem[e]=key;//设置哨兵for(inti=0;i<ST.tableLen;i++)returni;//存在返回,不存在返回1}(2)设......
  • 洛谷题单指南-二分查找与二分答案-P1182 数列分段 Section II
    原题链接:https://www.luogu.com.cn/problem/P1182题意解读:每段和的最大值越小,则分段数就越多,因此可以通过给定每段和的最大值,将分段数划分为两类:<=M,>M,对每段和的最大值进行二分即可。解题思路:二分的判定条件为,给定每段和的最大值,计算分段数,计算逻辑如下:依次遍历每一个数,求当前......
  • 二分查找
       int范围有限,当数据量大的时候容易导致结出现负数>>>右移运算符相当于把二进制除与二后取整防止数据过大出现负数适用于更多的编程语言  符合逻辑,方便阅读 改进的地方:右指针不指向需要查找的数,只需确认左指针指向的数是不是要查找的数 ......