怎么查找html元素

缺乏、安全感 2024-04-07 14:13 16阅读 0赞

/*
    *作者：呆萌老师
    *☑csdn认证讲师
    *☑51cto高级讲师
    *☑腾讯课堂认证讲师
    *☑网易云课堂认证讲师
    *☑华为开发者学堂认证讲师
    *☑爱奇艺千人名师计划成员
    *在这里给大家分享技术、知识和生活
    *各种干货，记得关注哦！
    *vx：it_daimeng
    */

1. document 对象的方法

(1) ID 法

var t = document.getElementById( "标记的ID值" );

注意 ： 只能查找单个标记 ，所以 每一个 HTML标记的 ID值必须不同

注意 ： 返回查找到的 JS的对象 （HTML标记本身）

(2) 标签名称 TagName : <a> <div>

var s = document.getElementsByTagName( "标签div" );

注意： 从 整个文档中查找 指定类型的标记(<div>) , 不论他的嵌套关系

（3）Class 属性

var divs = document.getElementsByClassName( "clsDiv01" );

注意： 此方法查找标记 只考虑 class="" 的值 ，不考虑标记的类型（<p class="clsDiv01"> , <div class="clsDiv01" >）

（4）name 法

<input name="txtUn" />

var inputs = document.getElementsByName("txtUn");

2. 根据标记之间的关系查找

(1) 父标记 找 子元素

<1> .childNodes : 标记 + 文本 + 注释

<2> .children : 标记

<3> .firstChild : 长子 （从集合 childNodes 中取 第一个）

<4> .lastChild : 幼子 （从集合 childNodes 中取 最后一个）

(2) 子元素 找 父标记

.parentNode : 查找 直接父标记 （父亲）

.parentNode.parentNode : 查找 间接父标记

(3) 祖辈 找 后代元素 （儿子 + 孙子 + ......）

<1> divFu.getElementsByTagName("span");

(4) 兄弟关系

<1> 前一个紧贴的标记 （哥哥）

.previousNode : 前一个兄弟 （从集合 childNodes 中取 第一个）

如果一定要查找标记，而不是文本

var s = span02.previousSibling.nodeType == 3 ? span02.previousSibling.previousSibling : span02.previousSibling ;

<2> 后一个紧贴的标记 （弟弟）

.nextNode : 后一个兄弟 （从集合 childNodes 中取 第一个）

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关怎么查找html元素

/ 作者：呆萌老师 ☑csdn认证讲师 ☑51cto高级讲师 ☑腾讯课堂认证讲师 ☑网易云课堂认证讲师 ☑华为开发者学堂

缺乏、安全感/ 2024年04月07日 14:13/ 0 赞/ 17 阅读

相关 HTML 元素

HTML 元素 -------------------- HTML 文档由 HTML 元素定义。 -------------------- HTML 元素 <

梦里梦外;/ 2023年10月12日 21:54/ 0 赞/ 47 阅读

相关 html元素设置浮动,html浮动元素

1. position:static 所有元素的默认定位都是：position:static，这意味着元素没有被定位，而且在文档中出现在它应该在的位置。一般来说，不用指定

秒速五厘米/ 2022年10月09日 13:29/ 0 赞/ 228 阅读

相关监听 html dom 变化,js怎么监听元素属性变化

我觉得MutationObserver可以用啊，正常情况下，这个等待DOM操作结束再执行的异步回调没什么问题吧。什么业务实时性要那么高啊？一般一个事件里面同步的不会有同个属性

梦里梦外;/ 2022年10月06日 10:53/ 0 赞/ 253 阅读

相关 1230 元素查找

题目描述 Description 给出n个正整数，然后有m个询问，每个询问一个整数，询问该整数是否在n个正整数中出现过。输入描述 Input Description 第

傷城~/ 2022年06月16日 10:24/ 0 赞/ 196 阅读

相关查找重复元素

题目描述找出数组 arr 中重复出现过的元素示例1 输入 [1, 2, 4, 4, 3, 3, 1, 5, 3] 输出 [1, 3, 4

红太狼/ 2022年06月05日 07:45/ 0 赞/ 248 阅读

相关查找数组元素

题目：编写程序，输入n（1<=n<=10),输入n个整数构成一个数组，输入整数x，在这个数组中查找x是否存在，如果存在，删除x，后面元素依次向前添补空位，并输出删除元素后的

缺乏、安全感/ 2022年06月02日 02:57/ 0 赞/ 257 阅读

相关查找主元素

题目：已知一个整数序列A=(a0，a1，…，an-1)，其中0≤ai＜n(0≤i＜n)。若存在ap1=ap2=…=apm=x且m＞n/2(0≤pk＜n，1≤k≤m)，则称x为A

快来打我*/ 2021年12月24日 09:25/ 0 赞/ 379 阅读

相关 JavaScript 查找元素

查询单个元素document.getElementById 示例 <table> <tbody> <tr> <td> <div>

比眉伴天荒/ 2021年12月03日 18:49/ 0 赞/ 339 阅读

相关 HTML基础 --- HTML元素

HTML 文档是由 HTML 元素定义的。一、HTML元素 HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 ![17249

阳光穿透心脏的1/2处/ 2021年12月03日 17:02/ 0 赞/ 500 阅读