笔记大全

JavaScript知识点总结之DOM

更新时间：2023-10-28

在前端开发中，我们经常使用DOM（Document Object Model）来操作网页元素，它可以让我们轻松地对页面进行增删改查等操作。本文将介绍DOM的基本概念和常用API，帮助大家更好地理解DOM。 ## DOM的基本概念 DOM 是一种文档编程语言，它以文档的形式表示 HTML 或 XML 文档结构，也就是说网页中所有的HTML标签、文本、属性等，都将以对象的形式表示在内存中，并可以进行访问和操作。在 DOM 中，文档的节点可以归为三种不同的类型： 1. 元素节点：代表 HTML 元素，比如\

、\

等。 2. 属性节点：代表 HTML 元素的属性，比如\

中的 class 属性。 3. 文本节点：代表 HTML 页面中的文本内容，比如 \

这里是文本\<\/p> 中的“这里是文本”。在 HTML DOM 中，每个节点都有一个 parentNode 属性，用于访问其父节点；还有一个 childNodes 属性，表示其子节点列表。除此之外，还存在许多其他的属性和方法，帮助我们完成各种 DOM 操作。 ## 常用API 下面介绍几个最常用的 DOM 操作 API，包括查找元素、创建元素、修改元素等。 ### 查找元素在 DOM 中，我们可以通过三种方式来查找元素： 1. 通过标签名查找：使用 `getElementsByTagName` 方法可以查找特定标签名的所有元素，返回的是一个 HTMLCollection 对象。 ```html

查找元素 - 标签名查找


    let divList = document.getElementsByTagName("div");
    for (let i = 0; i < divList.length; i++) {
        console.log(divList[i]);
    }

``` 2. 通过 id 查找：使用 `getElementById` 方法可以查找指定 ID 的元素，返回的是一个单个的 Element 对象。 ```html

查找元素 - ID查找


    let divEle = document.getElementById("container");
    console.log(divEle);

``` 3. 通过类名查找：使用 `getElementsByClassName` 方法可以查找特定类名的所有元素，返回的是一个 HTMLCollection 对象。 ```html

查找元素 - 类名查找


    let divList = document.getElementsByClassName("test");
    for (let i = 0; i < divList.length; i++) {
        console.log(divList[i]);
    }

``` ### 创建元素在 DOM 中，我们可以使用 `createElement` 方法来创建新的元素，接着再使用 `appendChild` 方法将其添加到指定的位置。 ```html

创建元素


    let newP = document.createElement("p");
    let text = document.createTextNode("这是新创建的元素");
    newP.appendChild(text);
    document.body.appendChild(newP);

``` 以上代码会创建一个新的 `

` 元素，并在其内部插入一个文本节点，然后将其添加到页面的最后面。 ### 修改元素在 DOM 中，我们可以修改元素的各种属性和样式等，以下是一些常见的操作： 1. 修改元素的文本内容：使用 `innerText` 或 `innerHTML` 可以修改元素的文本内容。其中 `innerText` 只会插入纯文本内容，而 `innerHTML` 可以插入任何 HTML 标签。 ```html

修改元素 - 修改文本内容


    let divEle = document.getElementById("container");
    divEle.innerText = "新的文本内容";

``` 2. 修改元素的属性：使用 `setAttribute` 方法可以修改元素的属性。如下代码会将指定元素的 `src` 属性修改为新的链接。 ```html

修改元素 - 修改属性


    let imgEle = document.getElementsByTagName("img")[0];
    imgEle.setAttribute("src", "新的链接");

``` 3. 修改样式：使用 `style` 对象可以修改元素的样式。如下代码修改了特定元素的背景颜色和字体大小。 ```html

修改元素 - 修改样式


    let divEle = document.getElementsByClassName("test")[0];
    divEle.style.backgroundColor = "red";
    divEle.style.fontSize = "24px";

``` ## 总结 DOM 是前端开发中非常重要的一个概念，它可以帮助我们对网页元素进行灵活的操作。本文介绍了 DOM 的基本概念和常用API，包括了元素的查找、创建和修改等操作。希望通过本文的介绍，大家能够加深对 DOM 的理解，更好地掌握 DOM 的使用。

c语言编程笔录