JavaScript DOM编程艺术第三章 DOM 笔记

名字填充中

已于 2024-03-31 22:42:58 修改

阅读量486

点赞数 5

分类专栏：前端 JavaScript DOM 编程艺术笔记 JavaScript 文章标签： javascript 开发语言 ecmascript

于 2024-03-19 22:04:17 首次发布

本文链接：https://blog.csdn.net/qq_42388742/article/details/136856977

版权

前端同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript DOM 编程艺术笔记

5 篇文章 0 订阅

订阅专栏

JavaScript

5 篇文章 0 订阅

订阅专栏

本文详细介绍了DOM（文档对象模型），包括其概念、节点类型（元素节点、文本节点、属性节点）、CSS的作用以及常用的5个DOM方法，如getElementById、getElementsByTagName等，展示了如何用JavaScript操作HTML文档。

摘要由CSDN通过智能技术生成

DOM 文档对象模型

本章内容

节点的概念
5个常用的DOM方法：getElementById、getElementByTagName、getElementsByClassName、getAttribue、setAttribute

3.1 什么是DOM？

文档对象模型（DOM）是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象；这样，编程语言就可以与页面交互。

网页是一个既可以在浏览器窗口中显示，也可以作为 HTML 源代码的文档。在这两种情况下，它都是同一个文档，但文档对象模型（DOM）的表示方式使它可以被操作。作为一个面向对象的网页表示，它可以用脚本语言（如 JavaScript）进行修改。

即 网页是文档，文档对象模型使它可以被操作。

3.2 文档: DOM中的"D"

document文档是DOM的核心，它代表了整个HTML文档。当创建一个网页并加载时，被浏览器创建。

3.3 对象: DOM中的"O"

在DOM中，O指将HTML表示为一个对象，document对象代表了整个HTML文档。如上一章所说，JavaScritp的对象可以分为三类

内置对象：如Math、Date、Array等
用户自定义对象：如自定义的函数、类等
宿主对象：如window、document、XMLHttpRequest等

宿主对象最基础的就是window对象，它代表了浏览器窗口(BOM)。提供了与浏览器窗口进行交互的接口，如alert()、confirm()、prompt()等。

而DOM模型的核心是document对象，它代表了整个HTML文档，主要功能是处理网页内容。

3.4 模型: DOM中的"M"

M代表着模型(Model)，DOM把文档表示为一颗树，更具体地说，DOM模型把文档表示为一颗家谱树

如HTML文档的树状结构：

html
├── head
│   ├── title         // 文档标题
├── body
│   ├── h1            // 文档主标题
│   ├── p             // 文档正文
│   ├── div           // 文档内容

与使用"家谱树"这个术语相比，"节点树"更加形象地描述了文档的结构。

3.5 节点

节点是DOM的基本单元，它代表了文档中的一个元素、属性、文本等。节点有5种类型：

元素节点：元素节点代表了HTML文档中的标签，如<div>、<p>
等。
文本节点：文本节点代表了HTML文档中的文本内容。
属性节点：属性节点代表了HTML文档中的属性，如id、class等。
注释节点：注释节点代表了HTML文档中的注释内容。
文档节点：文档节点代表了整个HTML文档。

主要介绍元素节点、文本节点和属性节点。

3.5.1 元素节点

元素节点是HTML文档中的标签，如<div>、<p>、<body>等。

元素可以包含其他元素，没有包含任何元素，它是文档的根元素。

3.5.2 文本节点

如果只有元素节点，那么它就是一个空元素，没有任何内容。

在XHTML文档中，元素节点总是包含文本节点，如<p>Hello World!</p>。

3.5.3 属性节点

属性节点可以对元素做出更具体的描述，如<div id=“content”>，id属性就是一个属性节点。

属性节点可以有多个，如<div id=“content” class=“container”>。

并非所有元素都有属性。但是，所有元素都有一些共同的属性，如id、class、style、title等。

3.5.4 CSS

CSS是一种用来表现HTML文档样式的语言，告诉浏览器如何显示HTML元素，可以控制元素的大小、颜色、字体、边框、位置等。

CSS可以直接写在HTML文档中，也可以通过外部文件链接。

为了把一个或几个元素与其他元素分离，可以使用CSS的class属性或id属性。

3.6 获取元素

DOM提供了5个方法来获取元素：

getElementById()：根据元素的id属性获取元素。
getElementsByTagName()：根据标签名获取元素。
getElementsByClassName()：根据class属性获取元素。
getAttribute()：获取元素的属性值。
setAttribute()：设置元素的属性值。

3.6.1 getElementById()

getElementById()方法可以根据元素的id属性获取元素。

var element = document.getElementById("myElement");

3.6.2 getElementsByTagName()

getElementsByTagName()方法可以根据标签名获取元素，返回的是一个HTMLCollection对象，可以用数组的方式来遍历。

var elements = document.getElementsByTagName("div");

getElementsByTagName()方法支持通配符，如"*"代表所有元素。

var elements = document.getElementsByTagName("*");
alert(elements.length); // 输出所有元素的数量

3.6.3 getElementsByClassName()

getElementsByClassName()方法可以根据class属性获取元素。

var elements = document.getElementsByClassName("blue");  // 获取class为"blue"的元素

3.6.4 getAttribute()

getAttribute()方法可以获取元素的属性值。

var value = element.getAttribute("id");

3.6.5 setAttribute()

setAttribute()方法可以设置元素的属性值。

element.setAttribute("id", "newId");

3.7 小结

本章介绍了DOM的概念、节点、元素节点、文本节点、属性节点、CSS、获取元素的方法。

文档中每个元素节点都是一个对象，可以用JavaScript来操作。

3.8 参考

DOM 文档对象模型
JavaScript DOM 教程
《JavaScprpt DOM 编程艺术（第2版）》
主要内容由Fitten Code生成, 强烈推荐

名字填充中

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM编程艺术第三章 DOM 笔记

当创建一个网页并加载时，浏览器会将HTML文档解析为一个DOM树，并将document文档作为树的根节点。但是，所有元素都有一些共同的属性，如id、class、style、title等。在JavaScript中，我们可以用document对象来获取HTML文档中的元素、属性、文本等。M代表着模型(Model)，DOM把文档表示为一颗树，更具体地说，DOM模型把文档表示为一颗家谱树。节点是DOM的基本单元，它代表了文档中的一个元素、属性、文本等。元素可以包含其他元素，没有包含任何元素，它是文档的根元素。
复制链接

扫一扫