第七篇-JavascriptDOM 文档对象模型

Javascript DOM 概念

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），简称DOM。DOM模型被结构化为对象树，又称DOM树。树的每个节点代表文档中的一个元素、属性、文本等。

JavaScript DOM是用来操作HTML文档的一种编程接口，通过它可以实现对文档的各种操作和交互。

Javascript 获取HTML元素

1、使用 getElementById() 方法，通过元素的 id 属性来获取元素。代码如下：

var element = document.getElementById('elementId');

2、使用 getElementsByClassName() 方法，通过元素的 class 属性来获取元素。该方法返回一个包含所有匹配类名的元素集合。例如：

var elements = document.getElementsByClassName('className');

3、使用 getElementsByTagName() 方法，通过元素的标签名来获取元素。该方法返回一个包含所有匹配标签名的元素集合。例如：

var elements = document.getElementsByTagName('tagName');

4、使用 querySelector() 方法，通过 CSS 选择器来获取元素。该方法返回匹配选择器的第一个元素。例如：

var element = document.querySelector('selector');

5、使用 querySelectorAll() 方法，通过 CSS 选择器来获取元素。该方法返回匹配选择器的所有元素。例如：

var elements = document.querySelectorAll('selector');

Javascript 中改变HTML元素

在JavaScript中，可以通过操作DOM（文档对象模型）来改变HTML元素

以下是一些常见的方法：

1. 获取元素 使用document.getElementById("id")来获取具有指定id的元素，使用document.getElementsByClassName("class")来获取具有指定类名的元素，使用document.getElementsByTagName("tag")来获取指定标签名的元素。

2. 修改元素内容 可以使用innerHTML属性来获取或修改元素的HTML内容。例如，document.getElementById("myElement").innerHTML = "新内容"可以将指定id的元素的内容更改为"新内容"。

3. 修改元素样式 可以使用style属性来修改元素的样式。例如，document.getElementById("myElement").style.color = "red"可以将指定id的元素的文本颜色更改为红色。

4. 添加/删除/修改元素类名 可以使用className属性来获取或设置元素的类名。例如，document.getElementById("myElement").className = "newClass"可以将指定id的元素的类名更改为"newClass"。

5. 添加/删除/修改元素属性 可以使用setAttribute()方法来设置元素的属性。例如，document.getElementById("myElement").setAttribute("href", "https://www.example.com")可以将指定id的元素的href属性设置为"https://www.example.com"。

6. 创建新元素 可以使用document.createElement("tag")方法来创建新的HTML元素。例如，var newElement = document.createElement("div")可以创建一个新的div元素。

7. 添加/删除/移动元素 可以使用appendChild()方法将一个元素作为另一个元素的子元素添加到DOM中。例如，document.getElementById("myParent").appendChild(newElement)可以将新创建的元素添加为指定id的父元素的子元素

Javascript 获取元素拓展

子元素.parentElement：用于获取当前元素的父元素。

父元素.children：用于获取当前元素的子元素。

当前元素.nextElementSibling：用于获取当前元素的下一个同级元素。