1.DOM概述
DOM对象
DOM，全称是“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。
在实际开发中，我们有时候需要实现这样的效果：鼠标移到元素上改变元素的颜色，或者动态添加新元素及删除元素等。这些效果就是通过DOM提供的方法来实现的。
简单地说，DOM里面有很多方法，我们可以通过它提供的方法来操作一个页面中的某个元素，如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。
DOM结构
DOM采用的是“树形结构”，用“树节点”的形式来表示页面中的每一个元素。我们先看下面的一个例子。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <body> <h1>xxx</h1> <p>yyy</p> <p>zzz</p> </body> </html>
对于上面这个HTML文档，DOM会将其解析为如图所示的树形结构：
我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作😊
2.节点类型
在JavaScript中，节点分为很多种类型。DOM节点共有12种类型，但是常见的只有下面3种
元素节点。属性节点。文本节点。
在JavaScript中，我们可以使用nodeType属性来判断一个节点的类型。不同节点的no
deType属性值如下：
对于节点类型，我们需要注意以下几点内容：🍟
- 一个元素就是一个节点，这个节点称为“元素节点”。
- 属性节点和文本节点看起来像是元素节点的一部分，但实际上，它们是独立的节点，并不属于元素节点。
- 只有元素节点才可以拥有子节点，属性节点和文本节点都无法拥有子节点。
3.获取元素
在JavaScript中，我们可以通过以下6种方式来获取指定元素：
getElementById()
getElementsByTagName()
getElementsByClassName()
querySelector()和querySelectorAll()
getElementsByName()
document.title和document.body
getElementById
在JavaScript中，如果想通过id来选中元素，我们可以使用getElementById()方法来实现
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <script src="js/index.js"></script> </head> <body> <div id="baddiv">KAKA</div> </body> </html>
// 在整个页面加载完成后执行的代码块 window.onload=function() { var oDiv = document.getElementById("baddiv"); oDiv.style.color = "blue"; }
getElementById()获取的是一个DOM对象，我们在给变量命名的时候，习惯性地以英文“o”开头，以便跟其他变量区分开，这可以让我们一眼就看出这是一个DOM对象🍟
getElementsByTagName
在JavaScript中，如果想通过标签名来选中元素，我们可以使用getElementsByTagName()方法来实现
实例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <script src="js/index.js"></script> </head> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>VUE</li> </ul> </body> </html>
window.onload=function() { var oUl = document.getElementById("list"); var oLi = oUl.getElementsByTagName("li"); oLi[2].style.color = "red"; }
首先使用getElementById()方法获取id为list的ul元素，然后使用getElementsByTagName()方法获取该ul元素下的所有li元素
oLi[0]表示获取第1个li元素，oLi[1]表示获取第2个li元素，……，以此类推
document.getElementsByTagName("li")获取的是“整个HTML页面”所有的li元素，而oUl.getElementsByTagName(“li”)获取的仅仅是“id为list的ul元素”下所有的li元素
getElementById()和getElementsByTagName()区别
getElementsByTagName()可以操作动态创建的DOM🙌
window.onload=function() { document.body.innerHTML="<input type='button' value='按钮' />"; var oBtn = document.getElementsByTagName("input"); oBtn[0].onclick = function() { alert(oBtn.length); } }
点击按钮后会弹出一个网页对话框，显示1
getElementById()不可以操作动态创建的DOM🎶
window.onload=function() { document.body.innerHTML="<input id='btn' type='button' value='按钮' />"; var oBtn = document.getElementById("btn"); oBtn.onclick = function() { alert(oBtn.length); } }
此时将无法显示元素的个数：
getElementsByClassName
在JavaScript中，如果想通过class来选中元素，我们可以使用getElementsByClassName()方法来实现
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <script src="js/index.js"></script> </head> <body> <ul> <li>HTML</li> <li class="select">CSS</li> <li class="select">JS</li> </ul> </body> </html>
window.onload=function() { var oLi = document.getElementsByClassName("select"); oLi[0].style.color = "red"; }
浏览器显示效果如下：
getElementsByClassName()不能操作动态DOM😒
querySelector()和querySelectorAll()
JavaScript新增了两个方法：querySelector()和querySelectorAll()，这让我们可以使用CSS选择器的语法来获取所需要的元素
querySelector()表示选取满足选择条件的第1个元素，querySelectorAll()表示选取满足条件的所有元素
案例演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <script src="js/index.js"></script> </head> <body> <ul> <li>HTML</li> <li class="select">CSS</li> <li class="select">JS</li> </ul> </body> </html>
window.onload=function() { var oLi = document.querySelectorAll(".select"); oLi[1].style.color = "red"; }
getElementsByName
对于表单元素来说，它有一个一般元素都没有的name属性。如果想要通过name属性来获取表单元素，我们可以使用getElementsByName()方法来实现
案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <script src="js/index.js"></script> </head> <body> 你最爱的语言： <label><input type="radio" name="lan" value="C++"></label> <label><input type="radio" name="lan" value="Go"></label> <label><input type="radio" name="lan" value="Java"></label> </body> </html>
window.onload=function() { var oInput = document.getElementsByName("lan"); oInput[2].checked = true; }
document.title和document.body
由于一个页面只有一个title元素和一个body元素，因此对于这两个元素的选取，JavaScript专门提供了两个非常方便的方法：document.title和document.body
例如：
window.onload=function() { document.title = "你好啊"; document.body.innerHTML = "<div>我的世界</div>" }
