DOM-第四周学习笔记2

最新推荐文章于 2024-07-21 10:17:51 发布

ruioruioruio

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量83

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript 前端

本文链接：https://blog.csdn.net/LRHJJ/article/details/124576626

版权

JavaScript学习笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、什么是DOM：Document Object Model（文档对象模型）

一、什么是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