怎么查找html元素 - 码农知识堂

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

       (1) ID 法

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

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

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

        (2) 标签名称 TagName :

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

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

        （3）Class 属性

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

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

        （4）name 法

              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 中取第一个）
相关阅读:
sql异常Encountered unexpected token BINARY
【redis-02】redis的五种数据类型和对应的操作方法，补充RedisUtil模板
 无人机光电识别跟踪算法！
第29章_瑞萨MCU零基础入门系列教程之改进型环形缓冲区
 谷歌最新开源大模型 Gemma，采用与创建 Gemini 模型相同的研究和技术，专为负责任的人工智能开发而设计。
Source Insight是一个面向项目开发的程序编辑器和代码浏览器丨产品简介
 租赁小程序|租赁系统一种新型的商业模式
 Eclipse Xtext 实现PLC ST 语言到C的转换
 10年软件测试工程师经验，很茫然....
SpringBoot+Lombok+Builder实现任意个数属性的对象构造
原文地址：https://blog.csdn.net/daimenglaoshi/article/details/126754165