DOM基础学习

一、DOM文档对象模型

通常将DOM看作一颗“树”，DOM将整个文档看作一颗“家谱树 ”

二、对象

用户定义的对象
内建对象（Array、Date、Math）
宿主对象

三、节点 node

元素节点（element node）
文本节点（text node）
属性节点
获取元素节点的方式

<div id="classList"></div>
<ul><li class="item"></li><li class="item"></li><li></li>
</ul>

//获取元素节点的方式
//1.document.getElementById()
let eleNode = document.getElementById("classList") //单个对象
console.log(eleNode)
//2.document.getElementsByTagName()
let olis = document.getElementsByTagName("li") //获取出来的是一个节点对象的集合，像数组（但实际并不是数组，不可以使用数组方法 ） 
console.log(olis)
//3.document.getElementsByClassName() 
let item = document.getElementsByClassName("item") //获取出来的是一个节点对象的集合
console.log(item)

1. getAttribute和setAttribute

a. getAttribute获取属性值，有一个必须的参数，这个节点对象的名字

<p title="你好">请选择序号</p>

   var oP = document.getElementsByTagName('p')[0]//获取属性值 有一个必须的参数，这个节点对象的名字var title = oP.getAttribute("title");var className = oP.getAttribute("class");console.log(title) //你好console.log(className) //null 不存在

b. 设置属性值setAttribute(name,value)

<p title="你好">请选择序号</p>

  #box {color: red;}

//获取元素的节点
var oP = document.getElementsByTagName('p')[0]
//设置属性值setAttribute(name,value)
oP.setAttribute("id", "box")

3.节点对象的属性

3.1三个重要属性

在文档对象模型（DOM）中，每一个节点都是一个对象。DOM节点有三个重要属性：

nodeName : 节点的名称只读
● 元素节点的nodeName与标签相同
● 属性节点的nodeName与属性名称相同
● 文本节点的nodeName永远是#text
● 文档节点的nodeNamenodeName永远是#document
nodeValue : 节点的值
● 元素节点的nodeValue是undefined或null
● 文本节点的nodeValue是文本自身
● 属性节点的nodeValue是属性的值
nodeType ：节点的类型只读
以下常用的几种节点类型：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="box" title="我是文本">我是一个文本节点<!-- 这是注释 --></div><script>//元素节点var oDiv = document.getElementById("box")console.log(oDiv.nodeName) //DIVconsole.log(oDiv.nodeValue) //nullconsole.log(oDiv.nodeType) //1//获取属性节点console.log(oDiv.attributes);var attrNode = oDiv.attributes[0];console.log(attrNode.nodeName)console.log(attrNode.nodeValue)console.log(attrNode.nodeType)//获取文本节点var textNode = oDiv.childNodes[0]console.log(textNode.nodeName)console.log(textNode.nodeValue)console.log(textNode.nodeType)//注释节点console.log(oDiv.childNodes)var commentNOde = oDiv.childNodes[1]console.log(commentNOde.nodeName)console.log(commentNOde.nodeValue)console.log(commentNOde.nodeType)//文档节点console.log(document.nodeType);  //9</script>
</body></html>

3.2其他属性

childNodes 获取其子节点
firstChild 获取第一个子节点
lastChild 获取最后一个子节点
parentNode 获取父级子节点
nextSibling 获取下一个兄弟元素节点
previousSibling 获取上一个兄弟元素节点

3.2.1childNodes

此属性用于获取其子节点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="father"><p>你好！js</p><p>你好！Html</p></div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);</script>
</body></html>

打印的结果如下，这时候发现本来我们的father盒子中只有两个p标签，为什么会多出text,这个text是什么？
在这里插入图片描述

我们来打印以下他的节点类型，看一下text是什么类型

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="father"><p>你好！js</p><p>你好！Html</p></div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);console.log(oFather.childNodes[0].nodeType); //3</script>
</body></html>

打印结果是3，对应上面所说的文本节点,显而易见我们并没有写文本，那是因为我们标签之间有空格，空格也属于文本类型。如果我们不想要这个文本节点，那么就将代码写成一行就可以了。
在这里插入图片描述

但是如果我们的代码都写成一行，这样会导致代码结构不清晰。

 <div id="father"><p>你好！js</p><p>你好！Html</p></div>

那么下面我们来处理一下元素之间有空格的问题，这里我们来封装一个函数来处理一下:

节点对象在各个浏览器兼容性处理：

在此函数当中判断拿到的节点是否是元素节点，如果是那么就添加到新数组中，将新数组返回。

function get_childNodes(fatherNode) {let nodes = fatherNode.childNodes;let arr = [];for (let i = 0; i < nodes.length; i++) {if (nodes[i].nodeType === 1) {arr.push(nodes[i])}}return arr;
}
let childNodes = get_childNodes(oFather)
console.log(childNodes)

3.2.2 firstChild 子节点中的第一个节点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="father"><p>你好！js</p><p>你好！Html</p></div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);console.log(oFather.childNodes[0].nodeType); //3\console.log(oFather.firstChild) //等价于console.log(oFather.childNodes[0])</script>
</body></html>

3.2.3 lastChild子节点中的最后一个节点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="father"><p>你好！js</p><p>你好！Html</p></div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);console.log(oFather.childNodes[0].nodeType); //3\console.log(oFather.firstChild) //等价于console.log(oFather.childNodes[0])console.log(oFather.lastChild) //等价于console.log(oFather.childNodes[oFather.childNodes.length-1])</script>
</body></html>

3.2.4 parentNode 获取元素节点的父节点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="father"><p>你好！js</p><p>你好！Html</p></div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);console.log(oFather.childNodes[0].nodeType); //3\console.log(oFather.firstChild) //等价于console.log(oFather.childNodes[0])console.log(oFather.lastChild) //等价于console.log(oFather.childNodes[oFather.childNodes.length-1])console.log(oFather.parentNode) //获取oFather.parentNode的父级元素</script>
</body></html>

在这里就是获取father这个节点的父节点，也就是body这个元素节点。

3.2.5 nextSibling 获取下一个兄弟元素节点

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div id="father"><p>你好！js</p><p>你好！Html</p></div><div class="next">下一个兄弟元素</div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);console.log(oFather.childNodes[0].nodeType); //3\console.log(oFather.firstChild) //等价于console.log(oFather.childNodes[0])console.log(oFather.lastChild) //等价于console.log(oFather.childNodes[oFather.childNodes.length-1])console.log(oFather.parentNode) //获取oFather.parentNode的父级元素console.log(oFather.nextSibling);//获取下一个兄弟元素</script>
</body></html>

注意，这里兄弟元素之间同样不能有空格,否则获取出来的是text,文本节点。
同样的这里我们也可以通过封装函数来处理此问题：
首先将获取到的father作为参数传入，后判断节点类型是否是元素节点，否则将一直查找，直到查找到的元素节点类型为1停止。（同样的previousSibling也可以使用此函数，只需要将属性改为previousSibling即可）

  function get_nextSilbling(n) {let x = n.nextSibling;while (x && x.nodeType != 1) {x = x.nextSibling;}return x;}
console.log(get_nextSilbling(oFather))

3.2.6 previousSibling 获取上一个兄弟元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div>上一个兄弟元素</div><div id="father"><p>你好！js</p><p>你好！Html</p></div><div class="next">下一个兄弟元素</div><script>var oFather = document.getElementById("father");console.log(oFather.childNodes);console.log(oFather.childNodes[0].nodeType); //3\console.log(oFather.firstChild) //等价于console.log(oFather.childNodes[0])console.log(oFather.lastChild) //等价于console.log(oFather.childNodes[oFather.childNodes.length-1])console.log(oFather.parentNode) //获取oFather.parentNode的父级元素console.log(oFather.nextSibling);//获取下一个兄弟元素console.log(oFather.previousSibling);//获取上一个兄弟元素</script>
</body></html>

这里与nextSibling获取下一个兄弟节点的属性相同，不能有空格。

4. 节点的方法

4.1 创建节点createElement()

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let newNode = document.createElement("p");//创建一个p标签</script>
</body></html>

4.2 插入节点appendChild()

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let newNode = document.createElement("p");//创建一个p标签oDiv.appendChild(newNode);//将新创建的节点插入到div当中</script>
</body></html>

这样就可以看到使用appendChild()方法可以将新创建的节点插入到div中，在已有元素后
在这里插入图片描述

但是现在还没有内容，这时候我们就可以使用creatTextNode()方法来创建文本节点。

4.3 创建文本节点creatTextNode()

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let newNode = document.createElement("p");//创建一个p标签oDiv.appendChild(newNode);//将新创建的节点插入到div当中let textNode=document.createTextNode("我是文本节点的内容")newNode.appendChild(textNode); //将文本节点插入到新创建的节点当中</script>
</body></html>

在这里插入图片描述

这个有助于理解，平常我们不使用这两种方法，而是使用innerHTML这个属性用于向节点当中插入内容

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let newNode = document.createElement("p");//创建一个p标签oDiv.appendChild(newNode);//将新创建的节点插入到div当中// let textNode=document.createTextNode("我是文本节点的内容")// newNode.appendChild(textNode); //将文本节点插入到新创建的节点当中// newNode.innerHTML = '<a href='#'>我是文本节点的内容</a>';//可以插入文本，也可以插入标签newNode.innerText =	'<a href='#'>我是文本节点的内容</a>';//此方法不可以渲染标签</script>
</body></html>

在这里插入图片描述

在这里虽然我们已经使用了newNode这个对象，但实际还在内存当中，我们可以将其释放

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let newNode = document.createElement("p");//创建一个p标签oDiv.appendChild(newNode);//将新创建的节点插入到div当中// let textNode=document.createTextNode("我是文本节点的内容")// newNode.appendChild(textNode); //将文本节点插入到新创建的节点当中// newNode.innerHTML = '<a href='#'>我是文本节点的内容</a>';//可以插入文本，也可以插入标签newNode.innerText =	'<a href='#'>我是文本节点的内容</a>';//此方法不可以渲染标签newNode = null; //释放对象</script>
</body></html>

4.4 在指定元素之前插入节点 insertBefore(newNode,node)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let oP =document.querySelector(".active");let newNode = document.createElement("p");//创建一个p标签let newNode2  = document.createElement("p");//第一个参数是插入的节点，第二个参数参考的节点oDiv.insertBefore(newNode2,oP)oDiv.appendChild(newNode);//将新创建的节点插入到div当中// let textNode=document.createTextNode("我是文本节点的内容")// newNode.appendChild(textNode); //将文本节点插入到新创建的节点当中// newNode.innerHTML = '<a href="#">我是文本节点的内容</a>';//可以插入文本，也可以插入标签newNode.innerText =	'<a href="#">我是文本节点的内容</a>';//此方法不可以渲染标签newNode = null; //释放对象，注意释放对象一定要在其使用完毕之后再进行释放newNode2.innerHTML = "<a href='#'>我是在节点之前创建的文本节点的内容</a>"</script>
</body></html>

在这里插入图片描述

4.5 删除节点removeChild(childNode)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let oP = document.querySelector(".active");let newNode = document.createElement("p");//创建一个p标签let newNode2 = document.createElement("p");//第一个参数是插入的节点，第二个参数参考的节点oDiv.insertBefore(newNode2, oP)oDiv.appendChild(newNode);//将新创建的节点插入到div当中// let textNode=document.createTextNode("我是文本节点的内容")// newNode.appendChild(textNode); //将文本节点插入到新创建的节点当中// newNode.innerHTML = '<a href='#'>我是文本节点的内容</a>';//可以插入文本，也可以插入标签newNode.innerText = '<a href="#">我是文本节点的内容</a>';//此方法不可以渲染标签newNode = null; //释放对象，注意释放对象一定要在其使用完毕之后再进行释放newNode2.innerHTML = "<a href='#'>我是在节点之前创建的文本节点的内容</a>"oDiv.removeChild(oP)</script>
</body></html>

在这里插入图片描述

4.6 替换节点replaceChild(newNode,node)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><div class="box"><p class="active">Javascript</p></div><script>let oDiv = document.querySelector(".box");let oP = document.querySelector(".active");let newNode = document.createElement("p");//创建一个p标签let newNode2 = document.createElement("p");let newNode3 = document.createElement("a") //创建一个a标签newNode3.setAttribute("href", "https://www.baidu.com") //设置a标签的属性newNode3.innerHTML = "百度一下" //设置a标签的内容//第一个参数是插入的节点，第二个参数参考的节点oDiv.insertBefore(newNode2, oP)oDiv.appendChild(newNode);//将新创建的节点插入到div当中oDiv.replaceChild(newNode3, oP)// let textNode=document.createTextNode("我是文本节点的内容")// newNode.appendChild(textNode); //将文本节点插入到新创建的节点当中// newNode.innerHTML = '<a href='#'>我是文本节点的内容</a>';//可以插入文本，也可以插入标签newNode.innerText = '<a href="#">我是文本节点的内容</a>';//此方法不可以渲染标签newNode = null; //释放对象，注意释放对象一定要在其使用完毕之后再进行释放newNode2.innerHTML = "<a href='#'>我是在节点之前创建的文本节点的内容</a>"// oDiv.removeChild(oP)</script>
</body></html>

在这里插入图片描述

四、动态操作样式

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><p id="box">张三</p><script type="text/javascript">//nodeObj.stylelet oP = document.getElementById("box");console.log(oP.style) //1. 直接操作样式属性oP.style.color = "red";oP.style.backgroundColor = 'black';oP.style.width = "250px";oP.style.height = "250px";</script>
</body></html>

获取对应的节点对象上的属性,调用style属性时会将添加的属性添加到行内
在这里插入图片描述

2.通过控制属性的类名来控制样式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.active {width: 250px;height: 150px;color: red;background: black;}</style>
</head><body><p id="box">张三</p><script type="text/javascript">//nodeObj.stylelet oP = document.getElementById("box");//2. 通过控制属性的类名来控制样式oP.setAttribute("class", "active")</script>
</body></html>

五、事件

在这里插入图片描述

1. onclick事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {width: 100px;height: 100px;background-color: aqua;}</style>
</head><body><div id="box" onclick="active()"></div><script>let box = document.getElementById("box");//1.操作DOM元素// box.onclick = function () {// this指向了当前的元素节点对象//     alert("事件被触发了");// }//2.在元素上添加事件function active(){//this指向了当前元素的元素节点对象// this.style.backgroundColor = 'red'box.style.backgroundColor = 'red'}</script>
</body></html>

2.onmouseover()和onmouseout()事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#box {width: 100px;height: 100px;background-color: aqua;}</style>
</head><body><div id="box"></div><script>let box = document.getElementById("box");// 鼠标滑过事件box.onmouseover = function () {this.style.backgroundColor = "green"}// 鼠标移开事件box.onmouseout = function () {this.style.backgroundColor = "aqua"}</script>
</body></html>

3. 表单控件上的事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.active {color: red;font-size: 12px;}</style>
</head><body><form action=""><p class="name"><label for="username">用户名:</label><input type="text" name="user" id="username"></p><p class="pwd"><label for="pwd">密码：</label><input type="password" name="pwd" id="pwd"></p><input type="submit" name=""></form><script>let userName = document.getElementById("username");let newNOde = document.createElement("span");// 表单聚焦事件userName.onfocus = function () {// console.log("请输入用户名")newNOde.innerHTML = "请输入用户名";newNOde.setAttribute("class", "active")userName.parentNode.appendChild(newNOde);}// 表单失焦事件userName.onblur = function () {// console.log("请输入用户名")newNOde.innerHTML = "请输入正确的用户名";newNOde.setAttribute("class", "active")userName.parentNode.appendChild(newNOde);}</script>
</body></html>

4. 内容的选中事件与内容改变事件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head><body><textarea cols="30" rows="10" name="" id="">请写入个人简介，不少于200字</textarea><input type="text" value="123"><script>let text = document.getElementsByTagName("textarea")[0];let ipt = document.getElementsByTagName("input")[0];// 内容选中事件text.onselect = function () {console.log("内容被选中")}// 内容改变事件ipt.onchange = function () {console.log("内容被改变了")}// input框内容改变事件ipt.oninput = function () {console.log("内容被实时的改变了")// 实时监听input中的内容console.log(this.value)}</script>
</body></html>

5. 窗口加载事件

在之前我们一直将script代码写在body当中，如果将代码写在head标签当中会怎么样？
下面的代码是将script标签写在body标签当中，给box盒子添加了一个点击事件。

<!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="box">你好！</div><script>let box = document.getElementById("box")box.onclick = function () {this.innerHTML = "javaScript!"}</script>
</body></html>

在这次的代码中，将script代码写进head标签当中

<!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>let box = document.getElementById("box");console.log(box);box.onclick = function () {this.innerHTML = "javaScript!";}</script>
</head><body><div id="box">你好！</div>
</body></html>

此时我们就会发现，放进head标签当中的js代码报错了，打印了我们拿到的DOM元素显示为null。也就是拿到的DOM元素有误。
原因如下：

脚本在中执行时，文档的 DOM 结构还没有加载完成
document.getElementById(“box”) 试图获取 ID 为 “box” 的元素，但此时
还没有被浏览器解析和创建
因此 box 变量会是 null，后续对 null 调用 onclick 就会导致错误

解决方案：
通过设置延时器，等待DOM结构加载：

<!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>setTimeout(function () {let box = document.getElementById("box");console.log(box);box.onclick = function () {this.innerHTML = "javaScript!";}}, 0)</script>
</head><body><div id="box">你好！</div>
</body></html>

上面的代码当中，我们设置了延时时间为0，同样的也可以设置为2000毫秒，1000毫秒，那么具体要设置为多少，这里我们并不清楚，这时候就可以使用窗口加载事件，等待DOM元素加载完成以后再执行我们的js代码：

<!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>// 等待文档加载完成之后才会调用onload()window.onload = function () {let box = document.getElementById("box");console.log(box);box.onclick = function () {this.innerHTML = "javaScript!";}}</script>
</head><body><div id="box">你好！</div>
</body></html>

但是使用onload()方法有一个弊端就是，onload()方法会覆盖之前的事件,例如下面的代码，在重新调用onload方法时，之前的代码不会再次执行。

<!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>// 等待文档加载完成之后才会调用onload()window.onload = function () {let box = document.getElementById("box");console.log(box);box.onclick = function () {this.innerHTML = "javaScript!";}}// window.onload 会有覆盖行为，之前的代码不会执行window.onload = function () {console.log("111")}</script>
</head><body><div id="box">你好！</div>
</body></html>

6. DOMContentLoaded事件

上面代码中我们使用窗口加载事件，使放在head标签当中的代码可以正常运行，这里我们可以使用DOMContentLoaded事件，使代码可以正常运行。DOMContentLoaded 是浏览器提供的一个事件，它会在 HTML 文档完全解析（DOM 树构建完成）时触发，而无需等待样式表、图片等外部资源加载完成。

<head><script>document.addEventListener("DOMContentLoaded", function() {let box = document.getElementById("box");console.log(box);box.onclick = function () {this.innerHTML = "javaScript!";}});</script>
</head>