DOM操作与选择器详解：节点增删改与CSS选择器应用

需积分: 10 133 浏览量更新于2024-09-01 收藏 7KB MD 举报

本文档是一篇关于DOM（文档对象模型）和CSS选择器的学习笔记，适合初学者入门。作者从第一天创建博客的角度出发，详细解释了以下几个关键知识点： 1. **DOM基础**: - DOM是HTML中的节点集合，由ECMAScript定义，主要用于在浏览器对象模型（BOM）中操作网页内容。 - DOM不是浏览器厂商的一部分，而是W3C组织的标准，它将HTML文档结构表示为树状结构，包括元素、属性、注释和文本节点，每个节点都是JavaScript的对象。 - JavaScript通过`window`对象访问DOM，如获取根元素（`document`），HTML由`<html>`、`<head>`和`<body>`组成。 2. **选择器类型**: - **元素节点选择器**：包括`getElementById`、`getElementsByClassName`、`getElementsByTagName`和`getElementByName`，分别用于根据元素的ID、类名、标签名或名称查找元素。 - **ES5新增的选择器**：`querySelector`和`querySelectorAll`，能根据CSS选择器精确匹配单个元素和多个元素，提高了选择的灵活性。 3. **选择器操作示例**: - 使用`querySelector`时，可以精准匹配ID选择器，如`var olist = document.querySelector(".list");`，获取具有特定类名的第一个`<ol>`元素。 - 对于多个元素的匹配，如类名选择器，会返回一个NodeList，如`var olists = document.getElementsByClassName("list");`。 - 关系选择器：通过父元素来定位子元素，例如，找到某个类名为".list"的列表的第一个子节点，可以先获取该列表元素，再进一步操作其子节点。 4. **节点操作**: - 通过`.childNodes`属性获取节点的所有子节点，如`console.log(olist.childNodes[0]);`获取第一个子节点。 - `firstElementChild`属性获取第一个子元素节点，`lastChild`则用于获取某个节点的最后一个子节点。本文档提供了丰富的实践示例和理论知识，对于理解和应用DOM以及CSS选择器非常有帮助。读者在阅读后可以更好地理解和操作HTML文档结构，实现动态网页效果。如有疑问或建议，作者欢迎读者指正。

湳橙

粉丝: 2
资源: 3

DOM操作与选择器详解：节点增删改与CSS选择器应用

删除DOM节点 删除DOM节点

DOM对标签的增删改

DOM节点中元素节点与文本节点操作方法.pdf

1. 在最上面创建一个document节点 2. 去HTML页面的最顶层元素，把它作为document的 子节点增加到DOM 3. 对于当前元素中嵌套的每一个元素，作为子节点增 加到DOM 4. 对于增加的节点，返回第3步，重复这个工作直到 结束

CSS选择器选中DOM节点的方式

js获取dom元素的节点

js获取dom元素的子节点

在DOM中所有节点都是元素

js元素节点与属性节点的关系

1. dom如何实现对网页元素的增删改查

最新资源

删除DOM节点删除DOM节点

1. 在最上面创建一个document节点 2. 去HTML页面的最顶层元素，把它作为document的子节点增加到DOM 3. 对于当前元素中嵌套的每一个元素，作为子节点增加到DOM 4. 对于增加的节点，返回第3步，重复这个工作直到结束