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("选择器");

       

猜你喜欢

转载自www.cnblogs.com/houcong/p/11459714.html