目录
1. DOM 基础
1.1. DOM 是什么？
1.1.1. DOM 对象
1.1.2. DOM 结构
1.2. 节点类型
1.3. 获取元素
1.3.1. getElementById()
1.3.2. getElementsByTagName()
1.3.3. getElementsByClassName()
1.3.4. getElementsByName()
1.4.如何去操作对象
修改属性（css）
1.5.如何动态的创建对象
1. DOM 基础
1.1. DOM 是什么？
1.1.1. DOM 对象
DOM全称Document Object Model（文档对象模型），它是由W3C定义的一个标准。
- 我们有时候遇到鼠标移到某个元素上面时就改变颜色，或者动态添加元素或者删除元素等，其实这些效果就是通过
DOM提供的方法来实现的。
- 简单来说，
DOM里面有很多方法，我们通过它提供的方法来操作一个页面中的某个元素，例如：改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。
- 一句话总结就是：
DOM操作，可以简单理解成“元素操作”。
1.1.2. DOM 结构
DOM采用的是树形结构，用树节点形式来表示页面中的每一个元素，我们先看下面一个例子：-
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <body> <h1>Gok</h1> <ui> <li>Gok是一个……</li> <li>Gok成立于……</li> </body> </html> - 对于上面这个
HTML文档，DOM会将其解析为如下图所示的树形结构。
- 是不是很像一棵树呢？其实，这也叫做
DOM 树。在这棵树上html元素是树根，也叫根元素。 - 接下来深入一层，我们发现有
head和body这两个分支，它们位于同一层次上，并且有着共同的父节点（即html），所以它们是兄弟节点。 head有 2 个子节点：title、meta（这两个是兄弟节点）。body有 3 个子节点：h1、p、p。- 利用这种简单的家谱关系我们可以把各节点之间的关系清晰地表达出来。
- 那么为什么要把一个
HTML页面用树形结构表示呢？这也是为了更好地给每一个元素进行定位，以便让我们找到想要的元素。 - 每一个元素就是一个节点，而每一个节点就是一个对象。
- 也就是说，我们在操作元素时，其实就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作（这句话对理解
DOM操作太重要了）。
1.2. 节点类型
- 在
JavaScript中，节点也是分为很多类型的。
DOM节点共有12种类型，不过常见的只有3种（其他的不用管）。
-
- 元素节点(标签)
-
- 属性节点（属性名）
-
- 文本节点（文本）
- 很多人看到下面这句代码，就认为只有一个节点，因为只有
div这一个元素嘛。
- 实际上，这里有 3 个节点：
<div id="wrapper">Gok</div>1.3. 获取元素
获取元素，准确来说，就是获取元素节点（注意不是属性节点或文本节点）。
对于一个页面，我们想要对某个元素进行操作，就必须通过一定的方式来获取该元素。只有获取到了，才能对其进行相应的操作。
咦，这不跟 CSS 选择器相似吗？只不过选择器是 CSS 的操作方式，而 JavaScript 却有着属于自己的另一套方法。
在 JavaScript 中，我们可以通过以下 6 种方式来获取指定元素：
-
getElementById()
-
getElementsByTagName()
-
getElementsByClassName()
-
getElementsByName()
-
querySelector()、querySelectorAll()
-
document.title、document.body
- 上面每一种方法都非常重要，我们要一个个地认真学透。
- 请注意，
JavaScript是严格区分大小写的，所以在书写的时候，就不要把这些方法写错了。
1.3.1. getElementById()
- 在
JavaScript中，如果想通过id来选中元素，我们可以使用getElementById()来实现。
getElementById这个方法的名字看似很复杂，其实根据英文来理解就很容易了，也就是get element by id（通过id来获取元素）的意思。
- 实际上，
getElementById()类似于CSS中的id选择器，只不过getElementById()是JavaScript的操作方式。
- 语法：
document.getElementById("id名")- 举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oDiv = document.getElementById("div1");
oDiv.innertext = " ";
oDiv.innerhtml = "imag";
};
</script>
</head>
<body>
<div id="div1" style="color:pink"></div>
</body>
</html>- 这个例子的
JavaScript代码在HTML代码的上面，如果没有window.onload，浏览器解析到document.getElementById("div1")就会报错，因为它不知道id为"div1"的元素究竟是哪位兄弟。
- 因此我们必须使用
window.onload，使得浏览器把整个页面解析完了再去解析window.onload内部的代码，这样就不会报错了。
1.3.2. getElementsByTagName()
- 在
JavaScript中，如果想通过标签名来选中元素，我们可以使用getElementsByTagName()方法来实现。
- 同样，
getElementsByTagName()类似于CSS中的元素选择器。
- 语法：
document. getElementsByTagName("标签名")- 举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oUl = document.getElementById("list");
var oLi = oUl.getElementsByTagName("li");
oLi[2].style.color = "red";
};
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>1.3.3. getElementsByClassName()
- 在
JavaScript中，如果想通过class来选中元素，我们可以使用getElementsByClassName()方法来实现。
- 同样，
getElementsByClassName()类似于CSS中的class选择器。
- 语法：
document. getElementsByClassName("类名")- 举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oLi = document.getElementsByClassName("select");
oLi[0].style.color = "red";
};
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li class="select">JavaScript</li>
<li class="select">jQuery</li>
<li class="select">Vue.js</li>
</ul>
</body>
</html>1.3.4. getElementsByName()
- 对于表单元素来说，它有一个一般元素都没有的
name属性。如果想要通过name属性来获取表单元素，我们可以使用getElementsByName()方法来实现。
- 语法：
document.getElementsByName("name名")- 举例：单选按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oInput = document.getElementsByName("status");
oInput[2].checked = true;
};
</script>
</head>
<body>
你的最高学历:
<label><input type="radio" name="status" value="本科" />本科</label>
<label><input type="radio" name="status" value="硕士" />硕士</label>
<label><input type="radio" name="status" value="博士" />博士</label>
</body>
</html>- 举例：复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
var oInput = document.getElementsByName("fruit");
for (var i = 0; i < oInput.length; i++) {
oInput[i].checked = true;
}
};
</script>
</head>
<body>
你喜欢的水果:
<label><input id =1 type="checkbox" name="fruit" value="苹果" />苹果</label>
<label><input type="checkbox" name="fruit" value="香蕉" />香蕉</label>
<label><input type="checkbox" name="fruit" value="西瓜" />西瓜</label>
</body>
</html>1.4.如何去操作对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作DOM对象</title>
</head>
<body>
<div class="container">程咬金</div> ==》container
<input type="text" name="userName" value="程咬金"> ==》userName
<br/>
<button id="change">修改</button> ==》change
</body>
<script>
// 1. 找对象
var container = document.getElementsByClassName("container")[0];
var change = document.getElementById("change");
var userName = document.getElementsByName("userName")[0];
// 2. 操作对象
change.onclick = function () {
// 改变纯文本
container.innerText = "苏烈";
// 修改超文本
container.innerHTML = "<h1 style='color: red'>苏烈</h1>";
// 修改value属性
userName.value = "牛魔";
}
</script>
</html>修改属性（css）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>操作DOM对象</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: blue;
border-radius: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<br>
<button id="change">修改</button>
</body>
<script>
// 1. 找对象
var box = document.getElementsByClassName("box")[0];
var change = document.getElementById("change");
// 2. 操作对象
change.onclick = function () {
box.style.backgroundColor = "green";
box.style.width = "200px";
box.style.height = "50px";
}
</script>
</html>1.5.如何动态的创建对象
// 动态创建元素
document.createElement("标签名字");
// 追加元素： 父级追加子级
父级对象.append(子级对象);
// 获取父级对象
子级对象.parentNode;
// 删除对象
dom对象.remove();案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM对象的动态创建</title>
<style>
tr{
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<label>姓名:</label> <input type="text" value="嬴政" name="userName">
<br>
<br>
<label>年龄:</label> <input type="number" value="45" name="userAge">
<br>
<br>
<label>性别:</label>
<input type="radio" name="userGender" value="男" checked> 男
<input type="radio" name="userGender" value="女"> 女
<br>
<br>
<input type="submit" id="add" value="添加">
</div>
<br>
<table style="width:500px ;border:1px" id="data-table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
<script>
// 找对象
var dataTable = document.getElementById("data-table");
var userName = document.getElementsByName("userName")[0];
var userAge = document.getElementsByName("userAge")[0];
var userGenders = document.getElementsByName("userGender");
var add = document.getElementById("add");
// 操作对象
add.onclick = function () {
// 获取值
var userNameValue = userName.value;
var userAgeValue = userAge.value;
// 获取性别的值
var userGenderValue = userGenders[0].checked ? "男" : "女";
// 动态创建标签
// 创建行
var tr = document.createElement("tr");
// 创建列
var userNameTd = document.createElement("td");
userNameTd.innerText = userNameValue;
// 给TD绑定双击事件
userNameTd.ondblclick = function () {
// 先获取文本值
var value = this.innerText;
// 清除文本
this.innerText = "";
// 动态创建input输入框
var input = document.createElement("input");
input.value = value;
// 给input绑定失去焦点的事件
input.onblur = function () {
userNameTd.innerText = this.value;
};
this.append(input);
};
var userAgeTd = document.createElement("td");
userAgeTd.innerText = userAgeValue;
var userGenderTd = document.createElement("td");
userGenderTd.innerText = userGenderValue;
var doTd = document.createElement("td");
// 动态创建一个删除按钮
var delBtn = document.createElement("button");
delBtn.innerText = "删除";
// 给删除按钮绑定事件
delBtn.onclick = function(){
// 删除的逻辑
var delTr = this.parentNode.parentNode;
// 删除
delTr.remove();
};
// 将删除按钮追加到doTd中
doTd.append(delBtn);
// 将td 追加到 tr
tr.append(userNameTd);
tr.append(userAgeTd);
tr.append(userGenderTd);
tr.append(doTd);
// 将 tr 追加到 table
dataTable.append(tr);
}
</script>
</body>
</html>
