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

需积分: 10 103 浏览量更新于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树结构详解：元素节点、文本节点和属性节点

JavaScript选择器引擎练习：CSS选择器返回DOM元素

JavaScript DOM操作详解：子节点与节点类型

使用js dom和jquery分别实现简单增删改

DOM对标签的增删改

JQuery 选择器、DOM节点操作练习实例

前端教程：57 dom byid元素节点属性

04.dom增删改.html

使用js完成节点的增删改复制等的操作

JavaScript HTML DOM元素 节点操作汇总

最新资源

JavaScript HTML DOM元素节点操作汇总