DOM-第四周学习笔记2

目录

一、什么是DOM:Document Object Model(文档对象模型)

二、DOM树:

三、每个DOM元素都有三大属性:

四、通过 关系 获取元素

五、递归

六、遍历API

七、API直接查找元素


一、什么是DOM:Document Object Model(文档对象模型)

        将每一个标签/元素/属性/文本/注释,看做了一个DOM节点/元素/对象(提供了操作这些东西的属性和方法)

   面试题:HTML/XHTML/DHTML/XML
    HTML - 网页
    XHTML - 更严格的网页
    DHTML - Dynamic:动态的网页,其实并不是新技术、新概念,只是将现有技术的整合统称,使我们网页在离线版也具有动态效果
            DHTML:HTML+CSS+JS(dom)
    XML - 数据格式

   DOM:原本是可以操作一切结构化文档的 HTML 和 XML,后来为了方便各类开发者分为了3个部分
        1、核心DOM:【无敌】,既可以操作HTML 和 XML
            缺点:API比较繁琐

        2、HTML DOM:只能操作HTML,API简单,缺点:比如属性部分,只能操作标准属性,不能操作自定义属性

        3、XML DOM:只能操作XML,XML基本已经被淘汰了 - 现在最流行的数据格式json代替了

        开发建议:优先使用HTML DOM,HTML DOM实现不了的时候在用核心DOM进行补充

二、DOM树:

        树根:document
        可以通过数个你找到每一个DOM节点/元素/对象,提供了很多很多的API

三、每个DOM元素都有三大属性:

        1、xx.nodeType:描述节点的类型
                document节点:9
                元素节点:1
                属性节点:2
                文本节点:3

                以前有用:判断xx是不是一个页面元素 - 因为以前我们找元素的方法和大家现在不一样

        2、xx.nodeValue:描述节点值,说白了就是获取属性值
        以前有用:因为我们获取一个属性值没有现在这么容易

        3、xx.nodeName:描述节点名称 - 判断xx是什么标签 - 后期搭配上事件委托(利用冒泡)
        注意:返回的是一个全大写的标签名

四、通过 关系 获取元素

                父:xx.parentNode;
                子:xx.children; - 集合
                第一个儿子:xx.firstElementChild;
                最后一个儿子:xx.lastElementChild;
                前一个兄弟:xx.previousElementSibling;
                后一个兄弟:xx.nextElementSibling;

五、递归

        简单来说就是函数中,又一次调用了函数自己,迟早有一天会停下来
        何时使用:遍历DOM,专门用于【遍历层级不明确】的情况 - 不光可以遍历层级不明确的DOM树,还可以遍历层级不明确的数据
            如何使用递归:2步
        function 函数名(root){
           ① 第一层要做什么操作就直接做

           ② 判断他有没有下一级,如果有下一级再次调用此方法,但是传入的实参是下一级        
        }

        函数名(实际的根节点)

        算法:深度优先!优先遍历当前节点的子节点,子节点遍历完毕才会调到兄弟节点
        缺点:同时开启大量的函数调用,消耗能存,只有一个情况采用:【遍历层级不明确】

        递归 vs 循环
        递归:优点:直观、易用
              缺点:性能较低
        循环:优点:性能高,几乎不占内存
              缺点:难得一匹

六、遍历API

        遍历层级不明确的情况:TreeWalker:一个在DOM树上行走的人
        缺点:① 会自动跳过根节点的操作
                   ② 只能遍历层级不明确的DOM树,而不能遍历层级不明确的数据
        如何:固定公式:
        1、创建tw对象:

   var tw=document.createTreeWalker(根元素,NodeFilter.SHOW_ALL/SHOW_ELEMENT);

        2、反复调用nextNode方法找到没一个元素

while((node=tw.nextNode())!==null){
            node要做什么操作
        }

七、API直接查找元素

        1、按照HTML的特点去查找元素
                ①id:

var elem=document.getElementById("id值")

                ②class/标签名:

var elems=document.getElementsByClassName/TagName/Name("class/标签名");


            建议:表单控件元素尽量可以不写class,因为必须要写name

        2、按照CSS的选择器去查找元素
                ① 单个元素:var elem=document.querySelector("任意css选择器");
                        强调:万一选择器匹配到多个元素,只会返回第一个
                        没找到null

                ② 多个元素:var elems=document.querySelectorAll("任意css选择器");
                        强调:找到了集合,没找到空集合
                        更适合做复杂查找

面试题:getXXX 和 querySelectorXXX 有什么区别?
        返回结果不同:
            1、getXXX:HTMLCollection - 是一个动态集合
            2、queryXXX:nodeList - 是一个静态集合

            动态集合:根据DOM树的改变,动态集合也会悄悄改变,每一次修改DOM树,getXXX都会悄悄再次查找元素
            缺点:每次都会悄悄重新查找,效率较低,不能使用forEach

            静态集合:每次修改DOM树,静态集合都不会发生变化,只会认准你找的时候的第一次找到的元素
            优点:每次不会悄悄重新查找,效率较高,支持forEach

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值