JS中DOM元素和对象模型（JS重点）

掌握JS中重点知识：DOM元素和对象模型

什么是DOM：文档对象模型(Doucment Object Model)是W3C组织推荐处理可扩展标记语言（HTML和XML）的标准编程接口；

文档：一个页面就是文档，DOM使用document表示
元素：页面中所有标签都是元素，DOM中使用element表示
节点：页面中所有内容都是节点（标签、属性、文本、注释等），用node表示

DOM把以上内容看作是对象。

文档对象模型(Document Object Model)：

将网页转为JS对象，可以通过JS进行操作,浏览器根据DOM模型把文档解析为节点（Node），节

点组成节点树（DOM Tree）DOM的最小单位是节点;

注意：

因为我们的文档是从上往下执行加载，所以现有标签，我们script写到标签下
get获得element元素by通过驼峰命名法
多参数id是大小写敏感的字符串
返回的是一个元素对象

节点的分类：

Document	文档节点
DocumentType	文档类型节点
Element	元素标签
Attr	属性
Text	文本
Comment	注释
DocumentFragment	文档片段

这7种都继承了Node对象。

根据ID名获取元素 document.getElementById()：

Document的方法 getElementById()返回一个匹配特定 ID的元素，由于元素的 ID 在大部分情况

要求是独一无二的，这个方法自然而然地成为了一个高效查找元素的方法。

<body>
<div class="div1" id="id1">
        内容文本
        <!-- 注释文本 -->
        <div class="inner">内部div</div>
</div>
<div id="time">2022年11月15日</div>
<script>
    //根据ID名获取元素
    //document.getElementById()
    document.getElementById("id1")//返回目标元素节点
    //没有匹配的节点 返回空值null
    document.getElementById("Id1")//大小写敏感

    var timer = document.getElementById("time");
    console.log(timer);
    console.log(typeof timer);
    // console.dir()打印我们返回的元素对象，更好的查看里面的属性和方法
    console.dir(timer);
</script>
</body>

使用getElementByTagName()方法可以返回带有指定标签名的对象的集合

如果页面元素只有一个元素，返回的还是伪数组的形式,如果页面中没有一个元素则返回空的伪

组形式;

<body>
<div class="div1" id="id1">
        内容文本
        <!-- 注释文本 -->
        <div class="inner">内部div</div>
</div>
<ul>
        <li>124</li>
        <li>243</li>
        <li>354</li>
        <li>46546</li>
    </ul>
<script>
    //根据标签名获取元素
        //document.getElementsByTagName()  

        document.getElementsByTagName("div")//返回了HTMLCollection  类似于数组
        //如果没有匹配的内容 返回空集合

        document.getElementsByTagName("DIV")//大小写不敏感
        document.getElementsByTagName("<div>")//标签名不带尖括号

     // 使用getElementByTagName()方法可以返回带有指定标签名的对象的集合
        var lis = document.getElementsByTagName("li");
        console.log(lis);
        console.log(lis[1]);
        // 我们要依次打印里面的元素对象时我们可以采用遍历的方法、
        for(var i=0;i<lis.length;i++){
            console.log(lis[i]);
        }
</script>
</body>

根据类名获取元素 document.getElementsByClassName()

<body>
 <div class="div1" id="id1">
        内容文本
        <!-- 注释文本 -->
        <div class="inner">内部div</div>
    </div>
 <div class="div1 div2">
        内容文本
        <!-- 注释文本 -->
    </div>
    <script>
        document.getElementsByClassName("div1")//返回了HTMLCollection

        document.getElementsByClassName("Div1")//大小写敏感
        document.getElementsByClassName("div1 div2")//可以用多个类名作为参数 类名之间用空格隔开
    </script>
</body>

根据CSS选择器获取元素:

document.querySelector() 方法

querySelector()fh返回指定选择器的第一个元素对象 HTML5新增
文档对象模型Document引用的 querySelector() 方法返回文档中与指定选择器或选择器组匹配的
一个 Element对象。
如果找不到匹配项，则返回null。

备注： 匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。

<body>
 <div class="div1" id="id1">
        内容文本
        <!-- 注释文本 -->
        <div class="inner">内部div</div>
    </div>

    <div id="box3">
        <ul>
            <li>首页</li>
            <li>第二页</li>
        </ul>
    </div>
    <script>
        document.querySelector(".div1")//返回第一个匹配的元素节点，哪怕有多个满足条件的元素
        //没有匹配的元素 返回 null

    var firstbox = document.querySelector(".box");
        console.log(firstbox);

        var nav = document.querySelector("#box3");
        console.log(nav);
        var li = document.querySelector("li");
        console.log(li);
    </script>
</body>

document.querySelectorAll() 方法：

<body>
<div id="box3">
        <ul>
            <li>首页</li>
            <li>第二页</li>
        </ul>
    </div>
    <script>
        document.querySelectorAll(".div1")//返回NodeList 节点列表 类似于数组的对象
        //没有匹配的元素 返回空的NodeList
    
    // querySelectorAll()返回指定选择器的所有元素对象集合
        var allbox = document.querySelectorAll(".box3");
        console.log(allbox);
        var lis = document.querySelectorAll("li");
        console.log(lis);
    </script>
</body>

^_^` ~_~ ^_^赶紧收藏起来吧！