JS笔记009 - 第09章 DOM基础
第09章 DOM基础
9.1 DOM是什么
DOM，全称Document Object Model(文档对象模型)
DOM采用的是"树型结构"，用"树节点"形式来表示页面中的每一个元素。
DOM操作可以理解成就是对元素的操作，就是把这个元素看成一个对象，然后使用这个对象的属性和方法来进行相关操作。
9.2 节点类型
DOM节点有12种类型，常见的有三种：元素节点、属性节点、文本节点
<div id="属性节点">文本节点</div> //div是元素节点
9.3 获取元素
在javascript中，有六种方式来获取指定元素：
1、getElementById()
2、getElementsByTagName()
3、getElementsByClassName()
4、querySelector()和querySelectorAll()
5、getElementsByName() //只用于表单元素，一般只用于单选按钮和复选按钮
6、document.title和document.body
# getElementById
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>getElementById</title>
<style>
div{
color: blue;
font-size: 50px;
}
</style>
<script>
window.onload = function()
{
var oDiv = document.getElementById("div1");
oDiv.style.color = "red";
}
</script>
</head>
<body>
<div id="div1">javascript</div><br/>
</body>
</html>
# getElementsByTagName
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>getElementById</title>
<style>
div{
color: green;
font-size: 50px;
}
</style>
<script>
window.onload = function()
{
// var oDiv = document.getElementById("div1");
// oDiv.style.fontSize = "100px";
var oDiv = document.getElementsByTagName("div");
oDiv[0].style.color = "red";
}
</script>
</head>
<body>
<div id="div1">javascript</div><br/>
</body>
</html>
# getElementById()与getElementsByTagName()的区别
1、getElementById()获取的是一个元素，而getElementsByTagName()获取的是多个元素；
2、getElementById()前面只可以接document，getElementsByTagName()不仅可以接document还可以接其他DOM对象；
3、getElementById()不可以操作动态创建的DOM元素，而getElementsByTagName()可以操作动态创建的DOM元素；
# getElementsByClassName
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>getElementsByClassName</title>
<script>
window.onload = function(){
let oLi = document.getElementsByClassName("select");
for(var i=0;i<5;i+=2)
{
oLi[i].style.color = "red";
}
}
</script>
</head>
<body>
<ul type="circle">
<li class="select">HTML</li>
<li class="select">CSS</li>
<li class="select">JavaScript</li>
<li class="select">jQuery</li>
<li class="select">Vue.js</li>
</ul>
</body>
</html>
# querySelectorAll
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>getElementsByClassName</title>
</head>
<body>
<div class="test">HTML</div>
<div class="test">CSS</div>
<div class="test">JavaScript</div>
<div class="test">jQuery</div>
<div class="test">Vue.js</div>
<script>
window.onload = function A(){
var oDiv = document.querySelectorAll(".test");
oDiv[0].style.backgroundColor = "red";
}
</script>
</body>
</html>
# querySelector
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>getElementsByClassName</title>
</head>
<body>
<div id="test">HTML</div>
<div class="test">CSS</div>
<div class="test">JavaScript</div>
<div class="test">jQuery</div>
<div class="test">Vue.js</div>
<script>
window.onload = function A(){
var oDiv = document.querySelector(".test");
oDiv.style.backgroundColor = "red";
}
</script>
</body>
</html>
# getElementsByName()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>getElementsByClassName</title>
</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>
<script>
window.onload = function A(){
var oInput = document.getElementsByName("status");
oInput[0].checked = true;
}
</script>
</body>
</html>
# document.title和document.body
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>getElementsByClassName</title>
</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>
<script>
window.onload = function A(){
document.title = "梦想是什么?";
document.body.innerHTML = "<strong style='color: red'>梦想就是考完本科考硕士考博士</strong>";
}
</script>
</body>
</html>
9.4 创建元素
var e1 = document.createElement("元素名"); //创建元素节点
var txt = document.createTextNode("文本内容"); //创建文本节点
e1.appendChild(txt); //把文本节点插入元素节点中
e2.appendChild(e1); //把组装好的元素插入已存在的元素中
e1表示JavaScript动态创建的元素节点，txt表示javascript动态创建的文本节点，e2表示HMTL中已经存在的元素节点。
A.appendChild(B)表示把B插入到A内部中去，也就是使得B成为A的子节点。
9.5 插入元素
A.appendChild(B); //把B元素插入到A元素的子元素的末尾
A.insertBefore(B,ref); //将一个新子元素B插入到父元素A中的某一个子元素ref之前
9.6 删除元素
A.removeChild(B); //删除A元素下的B元素
9.7 复制元素
obj.cloneNode(bool); //obj表示被复制的元素，而参数是一个布尔值，1表示复制元素本身及其所有子元素，0表示只复制该元素本身；
9.8 替换元素
A.replaceChild(new,old); //A表示父元素，new表示新子元素，old表示旧子元素；
敬请关注个人微信公众号：测试工匠麻辣烫
