JavaScript — DOM的增删改查、节点、事件、文档的加载

最新推荐文章于 2024-07-14 12:56:18 发布

吃不到棒棒糖的小熊

最新推荐文章于 2024-07-14 12:56:18 发布

阅读量1.4k

点赞数 8

分类专栏： JavaScript 文章标签： javascript 前端开发语言 ecmascript html

本文链接：https://blog.csdn.net/m0_59897687/article/details/122923384

版权

JavaScript 专栏收录该内容

30 篇文章 4 订阅

订阅专栏

5.matches()与closest()

一、DOM

DOM，全称Document Object Model 文档对象模型。

JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

文档——文档表示的就是整个的HTML网页文档
对象——对象表示将网页中的每一个部分都转换为了一个对象
模型——使用模型来表示对象之间的关系，这样方便我们获取对象

当网页被加载时，浏览器会创建页面的文档对象模型。

HTML DOM 模型被结构化为对象树：

对象的HTML DOM树如下：

HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：

作为对象的 HTML 元素
所有 HTML 元素的属性
访问所有 HTML 元素的方法
所有 HTML 元素的事件

二、节点

节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。

比如：html标签、属性、文本、注释、整个文档等都是一个节点。

虽然都是节点，但是实际上它们的具体类型是不同的。

常用节点分为四类

文档节点——整个HTML节点
元素节点——HTML文档中的HTML标签
属性节点——元素的属性
文本节点——HTML标签中的文本内容

节点的类型不同，属性和方法也都不尽相同。

节点的属性如下图所示：

浏览器已经为我们提供文档节点对象，这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页

<body>
    <button id="btn">我是一个按钮</button>
    <script> 
    //获取到button对象
    let btn = document.getElementById("btn")
    console.log(btn);
    //修改按钮的文字
    btn.innerHTML = "I'm a button"
    </script>
</body>

三、事件

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

JavaScript与HTML之间的交互是通过事件实现的。

对于Web应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键等等。

方法一：可以在事件对应的属性中设置一些JS代码，这样当事件被触发时，这些代码将会执行，这种写法称为结构与行为耦合，不方便维护，不推荐使用：

<button id="btn" onclick="alert('Hello')">我是一个按钮</button>

方法二：还可以为按钮的对应事件绑定处理函数的形式来响应事件,这样当事件被触发时，其对应的函数会被调用：

<body>
    <button id="btn">我是一个按钮</button>
    <script>
        let btn = document.getElementById("btn")
        //绑定一个单击事件
        //像这样为单击事件绑定的函数，我们称为单击响应函数
        btn.onclick = function(){
            alert("hello")
        }
    </script>   
</body>

四、文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面的上边，在代码执行时，页面还没有加载,页面可以加载DOM对象也没有加载，会导致无法获取到DOM对象

将JS代码编制写到页面的下面就是为了可以在页面加载完毕以后再执行JS代码

如果要将代码写到页面上边，可以使用onload事件，onload事件会在整个页面加载完成后才会被触发。

为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成后执行，这样就可以确保代码执行时所有的DOM对象都已经加载完毕。

举个例子：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            let btn = document.getElementById("btn")
            btn.onclick = function(){
                alert("Hello")
            }
        }
    </script>
</head>
<body>
    <button id="btn">我是一个按钮</button>
</body>

五、DOM查询

1.获取元素节点

通过document对象调用

getElementById() 通过id属性获取一个元素节点对象（id属性是唯一的）
getElementsByTagName() 通过标签名获取一组元素节点对象（标签名可以有多个，最终获取到的是一个数组）
getElementsByName() 通过name属性获取一组元素节点对象（name属性可以有多个，最终获取到的是一个数组）

innerHTML用于获取元素内部的HTML代码的

对于自结束标签，这个属性没有意义

如果需要读取元素节点属性，直接使用元素.属性名

例子：元素.id 元素.name 元素.value

注意：class属性不能采取这种方式，读取class属性时需要使用元素.className

2.获取元素节点的子节点

通过具体的元素节点调用

getElementsByTagName() 方法，返回当前节点的指定标签名后代节点
childNodes 属性，表示当前节点的所有子节点，该属性会获取包括文本节点在内的所有节点
firstChild 属性，表示当前节点的第一个子节点（包括空白文本节点）
lastChild 属性，表示当前节点的最后一个子节点

3.获取父节点和兄弟节点

通过具体的节点调用

parentNode 属性，表示当前节点的父节点
previousSibling 属性，表示当前节点的前一个兄弟节点（也可能获取到空白节点）
nextSibling 属性，表示当前节点的后一个兄弟节点

innerText

该属性可以获取到元素内部的文本内容

它和innerHTML类似，不同的是它会自动将html去除

4. 其他DOM查询的方法

body标签中的内容如下：

<body>
    <div class="box1">
        <div>hhhhhhhhhhhhh</div>
    </div>
    <div class="box1"></div>
    <div class="box1"></div>
</body>

获取body标签

let body = document.getElementsByTagName("body")[0]

在document中有一个body属性，它保存的是body的引用

let body = document.body;

document.documentElement保存的是html根标签

let html = document.documentElement

document.all代表页面中的所有元素

    let all = document.all
    for(let i=0; i<all.length; i++){
        console.log(all[i]);
    }

根据元素的class属性值查询一组元素节点对象

let box1 = document.getElementsByClassName("box1")

获取class为box1中的所有的div

document.querySelector()

需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象

使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

let div = document.querySelector(".box1 div")

document.querySelectAll()

该方法和document.querySelector()用法类似，不同的是它会将符合条件的元素封装在一个数组

即使符合条件的元素只有一个，它也会返回数组

let divs = document.querySelectorAll(".box1")

常用搜索方法总结：

5.matches()与closest()

elem.matches(css) 不会查找任何内容，它只会检查 elem 是否与给定的 CSS 选择器匹配。它返回 true 或 false

元素的祖先（ancestor）是：父级，父级的父级，它的父级等。祖先们一起组成了从元素到顶端的父级链。

elem.closest(css) 方法会查找与 CSS 选择器匹配的最近的祖先。elem自己也会被搜索。

换句话说，方法 closest 在元素中得到了提升，并检查每个父级。如果它与选择器匹配，则停止搜索并返回该祖先。

所有的 "getElementsBy*" 方法都会返回一个 实时的（live） 集合。这样的集合始终反映的是文档的当前状态，并且在文档发生更改时会“自动更新”。

在下面的例子中，有两个脚本。

第一个创建了对 <div> 的集合的引用。截至目前，它的长度是 1。
第二个脚本在浏览器再遇到一个 <div> 时运行，所以它的长度是 2。
<div>First div</div>

<script>
  let divs = document.getElementsByTagName('div');
  alert(divs.length); // 1
</script>

<div>Second div</div>

<script>
  alert(divs.length); // 2
</script>
相反，querySelectorAll 返回的是一个 静态的 集合。就像元素的固定数组。

如果我们使用它，那么两个脚本都会输出 1：
<div>First div</div>

<script>
  let divs = document.querySelectorAll('div');
  alert(divs.length); // 1
</script>

<div>Second div</div>

<script>
  alert(divs.length); // 1
</script>

六、DOM的增删改

创建新节点的方法

document.createElement(tag) — 用给定的标签创建一个元素节点，

document.createTextNode(value) — 创建一个文本节点（很少使用），

elem.cloneNode(deep) — 克隆元素，如果 deep==true 则与其后代一起克隆。

插入和移除节点的方法

node.append(...nodes or strings) — 在 node 末尾插入，

node.prepend(...nodes or strings) — 在 node 开头插入，

node.before(...nodes or strings) — 在 node 之前插入，

node.after(...nodes or strings) — 在 node 之后插入，

node.replaceWith(...nodes or strings) — 替换 node。

node.remove() — 移除 node。

文本字符串被“作为文本”插入。

下面这张图直观的表示出了插入节点的位置：

elem.insertAdjacentHTML/Text/Element

为此，我们可以使用另一个非常通用的方法：elem.insertAdjacentHTML(where, html)。

该方法的第一个参数是代码字（code word），指定相对于 elem 的插入位置。必须为以下之一：

"beforebegin" — 将 html 插入到 elem 前插入，
"afterbegin" — 将 html 插入到 elem 开头，
"beforeend" — 将 html 插入到 elem 末尾，
"afterend" — 将 html 插入到 elem 后。

第二个参数是 HTML 字符串，该字符串会被“作为 HTML” 插入。

我们很容易就会注意到这张图片和上一张图片的相似之处。插入点实际上是相同的，但此方法插入的是 HTML。

这个方法有两个兄弟：

elem.insertAdjacentText(where, text) — 语法一样，但是将 text 字符串“作为文本”插入而不是作为 HTML，
elem.insertAdjacentElement(where, elem) — 语法一样，但是插入的是一个元素。

它们的存在主要是为了使语法“统一”。实际上，大多数时候只使用 insertAdjacentHTML。因为对于元素和文本，我们有 append/prepend/before/after 方法 — 它们也可以用于插入节点/文本片段，但写起来更短。

七、DocumentFragment

DocumentFragment 是一个特殊的 DOM 节点，用作来传递节点列表的包装器（wrapper）。

我们可以向其附加其他节点，但是当我们将其插入某个位置时，则会插入其内容。

例如，下面这段代码中的 getListContent 会生成带有 <li> 列表项的片段，然后将其插入到 <ul> 中：

<ul id="ul"></ul>

<script>
function getListContent() {
  let fragment = new DocumentFragment();

  for(let i=1; i<=3; i++) {
    let li = document.createElement('li');
    li.append(i);
    fragment.append(li);
  }

  return fragment;
}

ul.append(getListContent()); // (*)
</script>

请注意，在最后一行 (*) 我们附加了 DocumentFragment，但是它和 ul “融为一体（blends in）”了，所以最终的文档结构应该是：

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

吃不到棒棒糖的小熊

关注

8
点赞
踩
26

收藏

觉得还不错? 一键收藏
0
评论
JavaScript — DOM的增删改查、节点、事件、文档的加载

目录一、DOM二、节点三、事件四、文档的加载五、DOM查询1.获取元素节点2.获取元素节点的子节点3.获取父节点和兄弟节点4. 其他DOM查询的方法常用搜索方法总结：5.matches()与closest()六、DOM的增删改创建新节点的方法插入和移除节点的方法七、DocumentFragment一、DOMDOM，全称Document Object Model 文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM..
复制链接

扫一扫