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元素
以下是一些常见的方法：
获取元素 使用document.getElementById("id")来获取具有指定id的元素，使用document.getElementsByClassName("class")来获取具有指定类名的元素，使用document.getElementsByTagName("tag")来获取指定标签名的元素。
修改元素内容 可以使用innerHTML属性来获取或修改元素的HTML内容。例如，document.getElementById("myElement").innerHTML = "新内容"可以将指定id的元素的内容更改为"新内容"。
修改元素样式 可以使用style属性来修改元素的样式。例如，document.getElementById("myElement").style.color = "red"可以将指定id的元素的文本颜色更改为红色。
添加/删除/修改元素类名 可以使用className属性来获取或设置元素的类名。例如，document.getElementById("myElement").className = "newClass"可以将指定id的元素的类名更改为"newClass"。
添加/删除/修改元素属性 可以使用setAttribute()方法来设置元素的属性。例如，document.getElementById("myElement").setAttribute("href", "https://www.example.com")可以将指定id的元素的href属性设置为"https://www.example.com"。
创建新元素 可以使用document.createElement("tag")方法来创建新的HTML元素。例如，var newElement = document.createElement("div")可以创建一个新的div元素。
添加/删除/移动元素 可以使用appendChild()方法将一个元素作为另一个元素的子元素添加到DOM中。例如，document.getElementById("myParent").appendChild(newElement)可以将新创建的元素添加为指定id的父元素的子元素
Javascript 获取元素拓展
子元素.parentElement：用于获取当前元素的父元素。
父元素.children：用于获取当前元素的子元素。
当前元素.nextElementSibling：用于获取当前元素的下一个同级元素。
