DOM基础
一、DOM是什么
Document object Model，文档对象模型，是由W3C定义的一个标准。简单来说，DOM里面有很多方法，我们通过它提供的方法来操作一个页面中的某个元素，例如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。
一句话总结：DOM操作，可以简单理解成“元素操作”。
为方便理解，我们可以这样思考：每一个元素就是一个节点，而每一个节点就是一个对象。也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作（这句话非常重要）。
二、节点类型
在JS中，节点也是分为很多类型的。DOM节点共有12中类型，不过常见的只有3种，分别是：
? 元素节点
? 属性节点
? 文本节点
如下面这段代码：
<div id="wrapper">xff贼帅</div>
元素节点是整段话，属性节点是id="wrapper"，文本节点是xff贼帅。
三、获取元素
获取元素，准确来说，就是获取元素节点（注意不是属性节点或文本节点）。对于一个页面，我们想要对某个元素进行操作，就必须通过一定的方式来获取该元素，只有获取到了才能对其进行相应的操作。
在JS中，我们可以通过以下六种方式来获取指定元素：
? getElementById()
? getElementsByTagName()
? getElementsByClassName()
? querySelector()和querySelectorAll()
? getElementByName()
? document.title和document.body
1. getElementById()
此方式为通过id来选中元素。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
window.onload = function()
{
var oDiv = document.getElementById("div1");
oDiv.style.color = "red";
}
</script>
</head>
<body>
<div id="div1">xff贼帅</div>
</body>
</html>
注：我们都知道，浏览器是从上到下解析一个页面的。这个例子的JS代码在HTML代码的上面，如果没有window.onload，浏览器解析到document.getElementById(“div1”)就会报错，因为它不知道div1究竟是谁，所以我们必须使用window.onload，等到浏览器把整个页面解析完了再去解析window.onload内部的代码，这样就不会报错了。
2. getElementsByTagName()
此方式为通过标签名来选中元素。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
window.onload = function()
{
document.body.innerHTML = "<input type=‘button‘ value=‘按钮‘/><input type=‘button‘ value=‘按钮‘/><input type=‘button‘ value=‘按钮‘/>"
var oBtn = document.getElementsByTagName("input");
oBtn[0].onclick = function()
{
alert("表单元素共有："+oBtn.length+"个");
}
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
window.onload = function()
{
document.body.innerHTML = "<input id=‘btn‘ type=‘button‘ value=‘按钮‘/><input type=‘button‘ value=‘按钮‘/><input type=‘button‘ value=‘按钮‘/>"
var oBtn = document.getElementById("btn");
oBtn.onclick = function()
{
alert("表单元素共有："+oBtn.length+"个");
}
}
</script>
</head>
<body>
</body>
</html>
注：对比以上1.2.两种方式可以发现，1.无法实现操作动态创建的DOM元素，而2.可以操作动态创建的DOM元素。
原文：https://www.cnblogs.com/staticxff/p/9688445.html