怎样查询HTML元素

Posted 2022-09-08 呆萌老师博客号

 

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

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 中取 第一个）