Dom-查找

不用查找直接可以使用的元素有如下几个:

1.document.documentElement         查找到<html>

2.document.head                              查找到<head>

3. document.body                              查找到<body>

4.document.forms[i]                           查找到<form>

 

元素查找的四种方法:

一、按照节点关系查找

    节点树:包含所有节点对象的完整结构

       1.父子关系

            .parentNode     当前元素的父节点对象

            .childNode        当前元素的所有子节点对象

            .firstChild          当前元素的第一个直接子节点对象

            .lastChild           当前元素的最后一个子节点对象

        2.兄弟关系

             .previousSibling  当前元素的父节点对象

             .nextSibling         当前元素的下一个兄弟节点对象

         问题:查找的元素的时候,会受到看不见的空字符的影响。

    元素树:仅仅包含元素节点的树结构,不包含文本节点,查找不受文本节点的影响

          1.父子关系:

               .parentElement     当前元素的父元素对象

               .children                当前元素的所有直接元素对象

               .firstElementChild  当前元素的第一个直接元素对象

               .lastElementChild  当前元素的下一个兄弟元素对象

          2.兄弟关系:

               .previousElementSibling   当前元素的前一个兄弟元素对象

               .nextElementSibling          当前元素的下一个兄弟元素对象

      总结:以后只要按照节点间关系查找的时候,首选元素树的属性

二、递归遍历查找(效率太低)

三、按HTML特征查找(4种)

       1.按id查找一个元素

var elem=document.getElementById("id名");

       2.按标签名查找多个元素

var elems=父元素.getElementsByTagName("标签名");

       3.按name属性查找多个元素

var elems=document.getElementsByName("name");

       4.按class查找多个元素

var elems=parent.getElementsByClassName("class");   

四、按选择器查找

      1.只查找一个元素

var elem=任意父元素.querySelector("选择器");

      2.查找多个元素

var elems=任意父元素.querySelectorAll("选择器");

 

 

       

 

转载于:https://www.cnblogs.com/houcong/p/11459714.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值