DOM详解(二)：DOM查找

已于 2022-03-17 16:58:51 修改
阅读量686 收藏 1
点赞数
分类专栏： DOM 文章标签： DOM查找
于 2019-07-05 11:44:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37899792/article/details/94723159
版权

 1. 三个元素不用找，可直接获得: 
     <html>  document.documentElement
     <head> document.head
     <body> document.body


 2. 节点间关系:  2大类： （不常用）
    何时: 只要已经获得了一个节点，找周围节点时
    节点树: 包含所有节点(元素,文本)的完整的树结构
     1. 父子关系: elem.parentNode  返回一个父节点对象
                         elem.childNodes   返回子节点对象的集合
                         elem.firstChild      返回第一个子节点对象
                         elem.lastChild       返回最后一个子节点对象
     2. 兄弟关系: 
           elem.previousSibling  : 返回当前节点的前一个兄弟节点
           elem.nextSibling : 返回当前节点的下一个兄弟节点: 
    问题: 不但包含有用的元素节点，还包含看不见的换行/空格干扰
    解决: 今后只要仅关心元素节点时，就可用元素树
   元素树: 仅包含元素节点的树结构
     1. 父子关系: elem.parentElement  返回一个父元素对象
                         elem.children       返回子元素对象的集合
            elem.firstElementChild      返回第一个子元素对象
            elem.lastElementChild       返回最后一个子元素对象
     2. 兄弟关系: 
            返回当前节点的前一个兄弟元素
            elem.previousElementSibling  : 
            返回当前节点的下一个兄弟元素: 
            elem.nextElementSibling :

***elem.childNodes和elem.children返回的都是动态集合: 
     动态集合(live collection): 不实际存储元素和属性值
                                             每次访问集合都重新查找DOM树
     遍历动态结合: 
        错误: for(var i=0;i<children.length;i++)
           后果,循环了几次，就重复查找了几次DOM树
        解决: for(var i=0,len=children.length; i<len; i++)
           仅在循环开始时查找一次DOM树，将值另存为在len中

  3. 递归遍历: 查找指定父节点下所有子代节点——鄙视题 手写（不常用）
      如何: 2步: 
         1. 先遍历所有直接子节点
         2. 在遍历直接子节点时，对每个子节点调用和父节点完全相同的方法。
      算法: 深度优先遍历: 每次都优先遍历子节点
                                  所有子节点遍历完，才返回遍历兄弟节点
      递归的效率: 极低。
      解决: 绝大多数递归都可用循环代替

      遍历API: 每次仅遍历下一个节点，可用循环反复执行(了解)
        1. 节点迭代器: 
           如何: 2步: 
             1. 创建迭代器对象: 
               var iterator=document.createNodeIterator(
      parent,NodeFilter.SHOW_ALL,   null,   false
                                                .SHOW_ELEMENT
               );
             2. var 原先的节点对象=
                      iterator.nextNode(); 跳到下一个节点
                 如果返回null，说明到头了
        内置的就是深度优先遍历算法。   

4. 按HTML查找: 在整个页面或指定父元素下，查找属性或标签符合要求得元素对象。（常用）
     何时: 只要按基本的条件有选择的查找元素时
     4种: 
       1. 按id查找: 
           var elem=document.getElementById("id");
           强调: 只能用document调用！
                    仅返回一个元素! 
       2. 按标签名查找:
          var elems=parent.getElementsByTagName("标签名");
           强调: 任何父元素都能调用！
                    返回父元素下所有同名标签的元素的集合!
                        即使仅返回一个元素，也会放在集合中
                           如果想取出唯一的一个元素，必须加[0]
                    不仅查找直接子节点，而且查找所有子代节点
       3. 按name属性查找: (了解)
        var elems=document.getElementsByName("name");          

       4. 按class属性查找: (了解) (兼容性问题)
         var elems=parent.getElementsByClassName("class");

       5. 按选择器查找: 

         ① 如果只找一个: 

            var elem=parent.querySelector("selector");

         ② 如果找多个: 

            var elems=parent.querySelectorAll("selector");

         返回非动态集合(non-live collection):

                实际存储完整数据，反复访问，也不用重新查找DOM树

           优: 不会造成反复查找

鄙视题: getElementsXXXX  vs  querySelector

   1. 返回值: 

       getElements返回动态集合: 

           优: 首次查找效率高

           缺: 可能造成反复查找DOM树

       querySelector返回非动态集合:

           优: 包含完整属性，无需反复查找DOM树

           缺: 首次查找效率低

    2. 易用性:

       querySelector更灵活, 且更简单

       getElements每次只能查找一种结果，无法设置查找条件

                            更繁琐

    总结: jQuery中: 

       如果一次查找就能找到元素时，首选getElements

       如果查找条件复杂时，就用querySelector

有蝉
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS（DOM 查找）
qq_36519236的博客
07-03 1694
JS1.基本的DOM查找方法1.1 document.getElementById(); [id查询]1.2 document.getElementsByTagName(); [name查询]1.3 试用 1.基本的DOM查找方法 注： 1.查询获取要查询的整个标签 2.document. 全文档查找。想定向查找看1.3 1.1 document.getElementById(); [id查询...
dom-find:用于查找 DOM 元素的实用程序。 由 react-stickydiv 使用
06-01
查找 DOM 实用程序 用于查找 DOM 元素的实用程序。 由 var util = require ( 'dom-find' ) ; // util.findPos(document.getElementById("element")); // [0,100] // util.findPosRelativeToViewport(document.getElementById("element")); // [50,-200] 你也可以在 React 中使用它 var util = require ( 'dom-find' ) ; // util.findPos(React.findDOMNode()); // [0,100] // util.findPosRelativeToViewport(React.findDOMNode()); // [50,-200]
Dom新find
weixin_30695195的博客
03-02 106
1.HTML标签和属性是不区分大小写的，但JS是区分大小写的；所以（1）HTML专有的接口的属性应该以小写字母开头，如果属性名由多个单词构成，第二个及接下来的每个单词的首字母都要大写。（2）有些HTML属性名在JS中是保留字，一般处理是为属性名加前缀‘html’。例如；for变为htmlfor，class变为className。 2.HTML属性值通常是字符串，也可以是布尔值或数值。但任何HTM...
DOM基础之“寻找”子节点
weixin_30515513的博客
10-15 179
今天学习了JS中的DOM的内容，虽然小菜的理解不深，但希望能够记录下来，慢慢一点一点的进步，有更深的理解了，再回来补充。 首先，关于DOM的概念： 1.概念：DOM = document（文档）Object（对象）Model（模型） 　　　　文档：就是我们所说的html的页面 　　　　对象：指的是html页面中的元素，也成为标签 　　　　文档对象模型：则是规定的一系列能够为了让我们用JS...
html dom find,JavaScript
weixin_39996101的博客
06-15 134
JavaScript HTML DOM Elements (Nodes)Adding and Removing Nodes (HTML Elements)Creating New HTML Elements (Nodes)To add a new element to the HTML DOM, you must create the element (element node) first,an...
jQuery查找dom的几种方法效率详解
10-19
主要记录了在近期开发中遇到的jQuery dom基本查找方法，然后将各种方法性能做了一个比较，目的是希望自己在以后dom元素查找时，使用最优的方案。文中介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
JS访问DOM节点方法详解
01-19
本文实例讲述了JS访问DOM节点方法。分享给大家供大家参考，具体如下： 查找并访问节点 你可通过若干种方法来查找您希望操作的元素： 通过使用 getElementById() 和 getElementsByTagName() 方法 通过使用一个元素...
详解JavaScript操作HTML DOM的基本方式
10-23
JavaScript可以通过DOM接口访问和操作这些对象，从而实现对页面的动态控制。 要找到HTML元素，有多种方法。首先是通过ID查找，这是最直接的方式。例如，如果要获取ID为"intro"的元素，可以使用`getElementById`方法...
详解jQuery中的DOM操作
12-29
jQuery作为JavaScript库，继承并发扬了JavaScript对DOM对象操作的特性，使开发人员能方便的操作DOM对象。 jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码，后面的代码将操作这份HTML代码 选择...
DOM:常用查找元素.
weixin_53542481的博客
03-08 473
HELLO!大家好! 今天的笔记是DOM的常用查找元素. (1)不需要查找就可直接获得的元素对象: 4种: document.documentElement --<html> document.head --<head> document.body --<body> document.forms[i] --<form> (2)如果已经获得一个元素对象，找周围附近的元素对象时，就用按节点间关系查找：2大类关系，6个属性. a. 父
查找元素节点【DOM】
QQ1012421396的博客
08-20 716
DOM查找元素节点的3种方法： getElementById()      寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.         var oElement = document.getElementById ( sID )     该方法只能用于 document 对象
有关DOM查找、CSS类样式、DOM节点过滤以及Jquery中的串联
qq_35146837的博客
05-29 251
一、有关DOM查找 :children() 查找儿子辈分的元素 :find() 查找儿子辈分、孙子辈分的元素 :parent() 紧接着的上一级父级元素 :parents() 上面的多级元素，包括父级祖级元素 :next() + 同级下一个 :nextAll() ~ 同级下面所有 :prev() 同级上一个 :prevAll() 同级上所有 :siblings() 同级所有不包含本身 <div id="divs"> <span>
React中使用 ref 和 findDomNode
徐同保的专栏
10-12 5849
对于 React 组件来说，refs 会指向一个组件类的实例，所以可以调用该类定义的任何方法。 如果需要访问该组件的真实 DOM，可以用 ReactDOM.findDOMNode 来找到 DOM 节点，但我们并 不推荐这样做。因为这在大部分情况下都打破了封装性，而且通常都能用更清晰的办法在 React 中构建代码。 import React, { Component } from 'rea...
显示隐藏，页面搜索，操作DOM
weixin_34291004的博客
09-14 128
要做一个点击事件实现显示隐藏的功能，效果如下图 我用的是toggle，很简单，代码如下 1 JS代码 2 $(".show span").toggle(function(){ 3 $(".goods ul li").next().show(); 4 $(".show > a").find("span").text("隐藏全部内容") 5 }, ...
JavaScript-DOM
weixin_43091563的博客
12-04 244
DOM节点/DOM 属性 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML .innerHTML 属性是属性节点 注释是注释节点 节点父、子和同胞：父（parent）.parentNode、子（child）.childNodes .children 同胞（sibling） 节点（元素）的属性节点 .attributes DOM方法 ...
dom操作
qq_43937786的博客
11-15 150
增加css样式 jquery对象.css(“background”,yellow) jquery对象.css("{background:yellow,“fontsize:1px”}") 通过类增加样式 jquery对象.addclass(“类名”) jquery对象.addclass("{类名,类名}") jquery对象.removeclass()移除所有样式 jquery对象.remove(“类名”) jquery.remove(“类名,”) jquery.toggle()删除和增加样式相互切换 ...
自学h.js笔记
穆沂华
01-20 1355
H.js DOM相关 1、h.js 选择器 dom元素选择器 使用h（select）可以快速的选择dom元素，支持下面几种选择方式： id选择器 类选择器 标签选择器 原生对象选择器 选择器语法及返回 语法: h('选择器') 参数: 对应类型的选择器 返回: h.js 特定的dom操作对象 id 选择器 语法： h(‘#test’); 返回： 选择成功返回h.js d
DOM的查找方法
qq_43614064的博客
11-08 1052
实例： <body> <div class="box" id="box" >yuansu</div> <script> // 获取id为box的元素 var box=document.getElementById("box"); console.log(box); </script> </...
find 和 DOM遍历孰快孰慢~
weixin_30598225的博客
04-02 120
做个无聊的测试，测试下，$('.XX .CCC') 和 $('.XX').find('.CCC')这两个谁快谁慢。。。我想我今天肯定是闲死了。。不过有个好玩的发现。但是我这个只是一个简单的例子，不能用大数据做统计分析。。只能说代表了一种现象。页面结构：View CodeJS：View Code10万次遍历的测试结果：1: 14279560168052: 7963: 6921: 14279...
DOM4J：优秀Java XML API详解
例如，通过Dom4J，你可以很容易地查找特定元素、遍历子节点，或者根据XPath表达式提取信息。 总结来说，Dom4J是一个功能全面、性能优秀的Java XML处理库，尤其适合于需要高效处理XML数据的Java应用程序。对于初学者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值