DOM相关知识
1.1.dom元素
-
document 对象
-
element 节点
-
attribute属性
-
event事件
1.2.dom主要功能：
- 通过document获取element，进行相关的增删查改
- 通过element获取attribute，进行属性的增删查改
- 通过element进行event的绑定，进行js相关操作
2.1.DOM节点
在html dom中所有的事物都是节点。包括注释也是节点
2.2.DOM方法
常用方法
getElementByID(id) //获取带有id的节点
appendChild(node) //插入新的子节点
removeChild(node) //删除子节点
常用属性
innerHTML --节点的文本值
parentNode --节点父元素
childNodes --节点子节点
attributes --节点的属性节点
常用事件
onclick //点击事件
onload 和 onunload 事件
onchange 事件
onmouseover 和 onmouseout 事件
onmousedown、onmouseup 事件
生命周期
HTML页面的生命周期有以下三个重要事件：
DOMContentLoaded— 浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像是<img>和样式表等外部资源可能并没有下载完毕。load— 浏览器已经加载了所有的资源（图像，样式表等）。beforeunload/unload-- 当用户离开页面的时候触发。每个事件都有特定的用途
DOMContentLoaded-- DOM加载完毕，所以js可以访问所有DOM节点，初始化界面。load-- 附加资源已经加载完毕，可以在此事件触发时获得图像的大小（如果没有被在HTML/CSS中指定）beforeunload/unload-- 用户正在离开页面：可以询问用户是否保存了更改以及是否确定要离开页面。
<body onLoad="onloadEvent()">
<script>
function onloadEvent() {
console.log("dom已经加载完毕")
}
//该方法会覆盖body中的onload
window.onload = function () {
console.log("---window onload")
}
//离开页面时提示是否要离开，必须有return XXX；
window.onbeforeunload = function () {
return "onbeforeunload is work";
}
</script>
</body>
例子
<!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>
.isRed {
color: red;
}
.bgBlue {
background-color: blue;
}
.isBlue {
color: blue;
}
.bgRed {
background-color: red;
}
</style>
</head>
<body>
<!--第一部分 获取元素 修改元素-->
<div id="main" class="main">idMain</div>
<div class="main">classMain </div>
<div>tagMain</div>
<button id="btn1" onclick="addNodeFunc(this)" <a href="">wwww</a>
增删元素
</button>
<button id="testBtn" class="isRed bgBlue" disabled>
用于测试按钮
</button>
<button onclick="changeHtml(this)">
改变html
</button>
<button onclick="changeCss(this)">
改变css
</button>
<button onclick="changeAttr(this)">
改变属性
</button>
<script>
//节点或者元素，为一个意思； 属性：节点的属性，依附于节点
// 第一部分 1.获取元素
//获取通过id节点 返回节点对象
let mainIdDiv = document.getElementById("main");
//通过class获取 返回满足条件节点对象的数组
let mainClassDiv = document.getElementsByClassName("main");
//通过标签tag（div、a、p等）获取 返回满足条件节点对象的数组
let tagDiv = document.getElementsByTagName("div");
console.log(mainClassDiv[0]) //<div id="main" class="main">idMain</div>
console.log(mainClassDiv[0] === mainIdDiv); //true
// 2.修改元素
//2.1节点、属性的增删
function addNodeFunc() {
//1.生成一个节点
let addNode1 = document.createElement("div")
//2.生成一个属性，必须挂载与节点
let attr = document.createAttribute("customHeight");
//3.生成一个文本节点，但是没有任何tag标签
let textNode = document.createTextNode("这是文本内容,没有标签");
//添加方法：append appendChild均是添加子节点
//区别：append 可以添加多个子节点 appendChild只能添加一个子节点
//4.向mainDiv添加空的子节点<div><div>;
mainIdDiv.append(addNode1);
//5.向addNode1节点添加属性 setAttribute /setAttributeNode
//区别：setAttribute(key,value) setAttributeNode(node)//node:key=value;
attr.value = "true";
addNode1.setAttributeNode(attr);
//6.1.添加文本节点
addNode1.append(textNode);
//运行结果： <div id="main" class="main">idMain<div customheight="true">这是文本内容,没有标签</div></div>
//6.2.添加至某个元素前边 //6.1同时存在时，后面会覆盖前边，因为只有一个textNode
mainIdDiv.insertBefore(textNode, addNode1); //参数1 要添加的元素 参数2：新元素后边的第一个元素
//7.移除属性
addNode1.removeAttribute("customHeight");
//运行结果：<div id="main" class="main">idMain<div>这是文本内容,没有标签</div></div>
//8.移除节点
// addNode1.remove();
//运行结果：<div id="main" class="main">idMain</div>
//9.other 替换元素
// mainIdDiv.replaceChild(newChild, oldChild);//替换新旧元素
// mainIdDiv.replaceWith(addNode1,textNode);
}
// 2.2动态修改
let testBtn = document.getElementById("testBtn");
function changeHtml() {
testBtn.innerHTML = '修改后的btn'
}
function changeCss() {
// testBtn.className = 'isBlue'; //覆盖全部
let classFunc = testBtn.classList; //包含多种方法 add 、remove 、toggle等
classFunc.add("isBlue", 'bgRed'); //添加类名 不会覆盖
}
function changeAttr() {
// testBtn.setAttribute("disabled",false); //改变属性了，但是disabled只要带有就是禁用
testBtn.removeAttribute("disabled");
}
//3.生命周期
function onloadEvent() {
console.log("dom已经加载完毕")
}
window.onload = function () {
console.log("---window onload")
}
window.onbeforeunload = function () {
return "onbeforeunload is work";
}
</script>
</body>
</html>
