JavaScript DOM操作基础教程

### 知识点详解 #### 1. DOM 的概念 DOM（Document Object Model，文档对象模型）是一种跨平台的、独立于语言的应用程序接口（API），用于以独立于平台和语言的方式访问和修改文档内容，其核心是一个将文档表示为节点树的模型。在Web开发中，文档通常指的是HTML文档，DOM允许JavaScript动态地访问和更新文档内容、结构和样式。 #### 2. DOM 的基本结构 在HTML文档中，DOM将整个页面定义为一棵节点树，包含以下主要类型的节点： - 文档节点（Document）：整个HTML文档 - 元素节点（Element）：如HTML中的HTML、HEAD、BODY、P等标签 - 文本节点（Text）：元素内的文本内容 - 注释节点（Comment）：HTML中的注释内容 - 属性节点（Attribute）：元素的属性 #### 3. DOM 选择对象的方法 Web-developer_09_basicDOM存储库展示了使用JavaScript选择DOM对象的不同方法。下面是几种常用的选择器及其应用场景： ##### 3.1 document.getElementById() 此方法通过元素的ID属性获取单一元素。每个ID应当是唯一的，该方法返回一个Element对象。如果页面上没有对应ID的元素，则返回null。 示例代码： ```javascript var element = document.getElementById('myId'); ``` ##### 3.2 document.getElementsByTagName() 此方法返回文档中所有指定标签名的元素集合，返回的是一个实时更新的HTMLCollection对象。由于返回的是集合，需要通过索引来访问特定元素。 示例代码： ```javascript var elements = document.getElementsByTagName('p'); ``` ##### 3.3 document.getElementsByClassName() 此方法返回文档中所有指定类名的元素集合。与getElementsByTagName类似，它返回一个HTMLCollection对象。 示例代码： ```javascript var elements = document.getElementsByClassName('myClass'); ``` ##### 3.4 querySelector() 此方法返回文档中匹配指定CSS选择器的第一个Element对象。如果没有找到匹配的元素，则返回null。 示例代码： ```javascript var element = document.querySelector('.myClass'); ``` ##### 3.5 querySelectorAll() 此方法与querySelector类似，但是它返回的是一个NodeList对象，包含了所有匹配指定CSS选择器的元素。 示例代码： ```javascript var elements = document.querySelectorAll('p.myClass'); ``` #### 4. DOM操作 通过DOM选择器获取的元素对象，可以进行进一步的操作，如修改内容、属性、样式等： ##### 4.1 修改内容 使用innerHTML或textContent属性可以修改元素的HTML或纯文本内容。 示例代码： ```javascript element.innerHTML = '<span>Hello, World!</span>'; element.textContent = 'Hello, World!'; ``` ##### 4.2 修改属性 通过setAttribute()方法可以修改元素的属性，而通过getAttribute()方法可以获取属性值。 示例代码： ```javascript element.setAttribute('id', 'newId'); var idValue = element.getAttribute('id'); ``` ##### 4.3 修改样式 可以直接通过style属性设置或获取元素的内联样式，也可以操作className属性来切换多个CSS类。 示例代码： ```javascript element.style.color = 'red'; element.className = 'newClass'; ``` #### 5. DOM事件处理 JavaScript允许为DOM元素添加事件监听器，以响应用户交互，如点击、键盘按键等。 示例代码： ```javascript element.addEventListener('click', function() { console.log('Element clicked!'); }); ``` #### 6. DOM操作的意义 DOM操作是动态网页制作的核心技术之一。熟练掌握DOM操作，能够使得网页内容具有高度的交互性和动态性，提高用户体验。在现代Web开发中，对于单页应用（SPA）尤其重要，它允许开发者通过JavaScript对页面内容进行局部刷新，而无需重新加载整个页面。 #### 结语 Web-developer_09_basicDOM存储库提供的信息反映了Web开发中的基础知识和操作实践。掌握DOM选择器的使用和DOM操作原理，是成为优秀前端开发工程师的基石。希望这些知识能够帮助您在Web开发之路上迈出坚实的步伐。