怎样查询HTML元素

 

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

怎样查询HTML元素

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

发表评论

相关文章