从0开始学前端第二十八课：DOM简介与探索DOM节点

mls学习小记

已于 2024-01-26 09:38:54 修改

阅读量847

点赞数 19

分类专栏：从0开始学前端文章标签：前端

于 2024-01-25 09:56:34 首次发布

本文链接：https://blog.csdn.net/weixin_44738632/article/details/135837287

版权

从0开始学前端专栏收录该内容

81 篇文章 2 订阅

订阅专栏

第二十八课：DOM简介与探索DOM节点

学习目标：

理解DOM是什么以及它的作用。
了解DOM与HTML的关系。
学习浏览器中如何表示DOM。
掌握DOM节点的类型和属性。
学习DOM节点之间的关系，包括父节点、子节点和兄弟节点。

学习内容：

1. DOM简介：

什么是DOM：
- DOM（文档对象模型）是一种与平台和语言无关的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。
DOM与HTML的关系：
- DOM将HTML文档表述为一个节点树，允许开发者使用JavaScript来操作这些节点，从而改变文档的结构、样式和内容。
浏览器中的DOM表示：
- 浏览器解析HTML文档，创建一个在内存中的DOM树，这个树反映了文档的结构。然后浏览器呈现这个树，让用户可以看到并与之交互。

2. 探索DOM节点：

节点类型：
- 元素节点（Element）
- 文本节点（Text）
- 注释节点（Comment）
- 文档节点（Document）
代码示例：
```

<html>
 <body>
 Hello, World! 
 
 </body>
</html>
```
预计输出效果：
- 标签是元素节点。
- "Hello, World!"是文本节点。
- 是注释节点。

节点属性：

元素节点有属性，如id、class、style等。

代码示例：

var paragraph = document.querySelector('p');
console.log(paragraph.id); // ID属性值
console.log(paragraph.className); // class属性值

节点关系：

父节点（parentNode）
子节点（childNodes）
兄弟节点（nextSibling和previousSibling）

代码示例：

var parentNode = paragraph.parentNode;
var childNodes = parentNode.childNodes;
var nextSibling = paragraph.nextSibling;
var previousSibling = paragraph.previousSibling;

课后练习：

创建一个简单的HTML页面，并使用JavaScript输出document.body的第一个子节点的节点类型。
获取并输出页面中所有的元素的数量和它们各自的父节点。
选择页面中第一个元素，并设置其style.color为"red"。

练习解析：

输出document.body的第一个子节点的节点类型：
```
<!DOCTYPE html>
<html>
<body>
 Hello, World!
 <script>
 var firstChildType = document.body.firstChild.nodeType;
 console.log(firstChildType);
 </script>
</body>
</html>
```
预期结果：
- 如果<body>的第一个子节点是元素节点，则输出1。
- 如果存在如空白符、换行等，则可能输出3，表示文本节点。

输出页面中所有元素的数量和它们父节点：

var paragraphs = document.querySelectorAll('p');
console.log('Number of <p> elements:', paragraphs.length);
paragraphs.forEach(function(p) {
  console.log('Parent of <p>:', p.parentNode);
});

设置第一个元素的颜色为红色：

var firstParagraph = document.querySelector('p');
firstParagraph.style.color = 'red';

通过这些练习，你将加深对DOM的理解，了解如何使用JavaScript来操作DOM元素，改变它们的内容和样式。

章节目录
 第二十九课：选择元素

mls学习小记

关注

19
点赞
踩
23

收藏

觉得还不错? 一键收藏
0
评论
从0开始学前端第二十八课：DOM简介与探索DOM节点

理解DOM是什么以及它的作用。了解DOM与HTML的关系。学习浏览器中如何表示DOM。掌握DOM节点的类型和属性。学习DOM节点之间的关系，包括父节点、子节点和兄弟节点。DOM（文档对象模型）是一种与平台和语言无关的接口，允许程序和脚本动态访问和更新文档的内容、结构和样式。DOM将HTML文档表述为一个节点树，允许开发者使用JavaScript来操作这些节点，从而改变文档的结构、样式和内容。浏览器解析HTML文档，创建一个在内存中的DOM树，这个树反映了文档的结构。
复制链接

扫一扫