HTML学习笔记（5）
目录
一、dom操作
1、查找操作
getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()
querySelectorAll()
通过属性查找
2、修改操作
3、增加元素
4、删除操作
一、dom操作
document object model
1、查找操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/dom操作.js"></script>
</head>
<body>
<div id="aa">hello</div>
</body>
</html>getElementById()
// getElementById()通过id获取元素,返回一个对象
var obj = document.getElementById("aa");
console.log(obj);我们发现控制台输出并不是我们预期的答案
注：因为html是顺序执行的代码，按照所给html代码，先外引js文件此时并没有id为aa的元素，所以值为null，可以有三种方式修改如下：
1、调整导入顺序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="aa">hello</div>
<script src="js/dom操作.js"></script>
</body>
</html>2、+延迟标记 注：defer只能用在外引
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/dom操作.js" defer></script>
</head>
<body>
<div id="aa">hello</div>
</body>
</html>3、修改JS文件,window.onload它在整个网页（包括所有的图片、CSS、脚本等资源）加载完成后触发
window.onload = function() {
var obj = document.getElementById("aa");
console.log(obj);
};getElementsByClassName()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/dom操作.js" defer></script>
</head>
<body>
<div class="aa">hello</div>
<div class="aa">hello</div>
<div class="aa">hello</div>
</body>
</html>// getElementsByClassName()通过class获取元素,返回一个数组
var arr = document.getElementsByClassName("aa");
console.log(arr)
测试一下，实现点击某个元素对应的元素，修改背景颜色,对应代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/javascript基础语法.js" defer></script>
</head>
<body>
<div class="aa">hello</div>
<div class="aa">hello</div>
<div class="aa">hello</div>
<div class="aa">hello</div>
<div class="aa">hello</div>
<div class="aa">hello</div>
</body>
</html>// 鼠标点击页面，出现弹窗1
var arr = document.getElementsByClassName("aa")
console.dir(arr)
for(var j = 0; j < arr.length; j ++ )
{
arr[j].onclick = function(){
var color = "";
for(var i = 0; i < 6; i ++ )
{
var num = Math.round(Math.random() * 15);
if(num == 10){
num = 'a';
} else if(num == 11) {
num = 'b';
} else if(num == 12) {
num = 'c';
} else if(num == 13) {
num = 'd';
} else if(num == 14) {
num = 'e';
} else if(num == 15) {
num = 'f';
}
color = color + num;
}
console.log(j)
this.style.background = "#" + color;
}
}
注:这里最后修改背景颜色调用的是this关键字，为什么不是arr[j].style.background = "#" + color,首先后者一定是错的，在读取这个循环时，先给每个数组元素绑定了一个点击的函数，但是函数内部并没有执行，因为没有点击操作，只有绑定完之后，点击某一个元素，才开始执行对应元素的function内部的函数，所以当绑定完点击的函数后，每次点击j一定是数组长度+1，因为已经给每个元素都绑定完点击的效果了，this它指向函数执行时的当前对象。
getElementsByTagName()
// 根据元素名称查找 找到所有符合条件的对象组成的数组
var obj = document.getElementsByTagName("div")querySelector()
// 根据元素选择器查找 querySelector()获取符合条件的第一个对象
var obj = document.querySelector(".aa")querySelectorAll()
// 根据元素选择器查找 querySelectorAll()获取所有符合条件的对象组成的数组
var obj = document.querySelectorAll(".aa")通过属性查找
// 通过关系查找
// 找父亲 parentNode parentElement
// 找孩子 childNodes children
// 第一个孩子 firstChild firstElementChild
// 最后一个孩子 lastChild lastElementChild
// 上一个元素 previousSibling previousElementSibling
// 下一个元素 nextSibling nextElementSibling
console.log(obj.parentNode)
console.log(obj.parentElement)
console.log(obj.childNodes)
console.log(obj.children)2、修改操作
本质是修改属性,可以通过console.dir打印属性信息，找对应的修改，对象.属性=值
//例如html结构如下
//<div id="aa">hello</div>
var obj = document.getElementById("aa")
console.dir(obj)
console.log(obj)
// 修改属性
obj.innerText = "修改后的内容"
obj.innerHTML = "第二次修改后的内容"针对自定义属性的值
console.log(obj.getAttribute("属性名"))
obj.setAttribute("属性","值")//修改样式
obj.style.backgrount = "yellow";
obj.style.fontSize = "15px";
obj.style.cssText = "background:red;color:pink;font-size:15px";3、增加元素
//例如html结构如下
//<div id="aa">
//<p style="background: paleturquoise;">aa</p>
//<h4 style="background: paleturquoise;"></h4>
//</div>
var obj = document.getElementById("aa")
console.dir(obj)
console.log(obj)
// 添加
obj = document.getElementById("aa")
console.log(obj)
// 一、创建元素
var newNode = document.createElement("h1")
console.log(newNode)
newNode.innerHTML = "新添加的元素"
newNode.className = "xixi"
newNode.style.background = "purple"
// 二、添加元素
// 在子元素最后位置添加
obj.appendChild(newNode)
// 在h4前面增加
var h4 = document.querySelector("h4");
obj.insertBefore(newNode, h4)
// 替换掉某个子元素
obj.replaceChild(newNode, h4)
复制元素
// 假设一个ul li列表
var oldNode = document.querySelector("ul");
var newNode = oldNode.cloneNode();
// cloneNode false复制外壳只复制ul ,true复制内部的li内容4、删除操作
//例如html结构如下，删除h4
//<div id="aa">
//<p style="background: paleturquoise;">aa</p>
//<h4 style="background: paleturquoise;"></h4>
//</div>
var obj = document.getElement("aa");
varr h4 = document.querySelector("h4");
obj.remmoveChild(h4);
//等价于
varr h4 = document.querySelector("h4");
h4.parentNode.removeChild(h4);