JavaScript DOM
一、概念
DOM:Document Object Model 文档对象模型
将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作。
W3C DOM 标准被分为3个不同的部分:
1.核心 DOM - 针对任何结构化文档的标准模型
①Document:文档对象
②Element :元秦对象
③Attribute:属性对象
④Text:文本对象
⑤Comment:注释对象
⑥Node:节点对象,其他5个的父对象
2.XML DOM - 针对 XML 文档的标准模型
3.HTML DOM - 针对 HTML 文档的标准模型
二、核心DOM模型
2.1 Document:文档对象
1.创建(获取):在html dom模型中可以使用window对象来获取
①window.document
②document
2.获取Element对象:
①getElementById() ∶根据id属性值获取元秦对象。id属性值一般唯一
②getElementsByTagName():根据元素名称获取元秦对象们。返回值是一个数组
③getElementsByclassName():根据class属性值获取元素对象们。返回值是一个数组
④getElementsByName():根据name属性值获取元秦对象们。返回值是一个数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document对象</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="cls1">div4</div>
<div class="cls1">div5</div>
<input type="text" name="username">
<script>
// 2.根据元素名称获取元素对象们。返回值是一个数组
var divs = document.getElementsByTagName("div");
alert(divs.length);
// 3.根据Class属性值获取元素对象们。返回值是一个数组
var div_cls = document.getElementsByClassName("cls1");
alert(div_cls.length);
// 4.根据name属性值获取元素对象们。返回值是一个数组
var ele_username = document.getElementsByName("username");
alert(ele_username.length);
var table = document.createElement("table");
alert(table)
</script>
</body>
</html>
⑤querySelector(): 获取文档中 class=“example” 的第一个元素:
document.querySelector(".example");
⑥querySelectorAll():获取文档中所有 class=“example” 的
元素, 并为匹配的第一个
元素 (索引为 0) 设置背景颜色:
var x=document.querySelectorAll("p.example");
x[0].style.backgroundColor='red';
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h2 id="test"></h2>
<h3 class="demo"></h3>
<ul>
<li>无序列表第1项</li>
<li class="demo">无序列表第2项</li>
<li>无序列表第3项</li>
<li>无序列表第4项</li>
<li>无序列表第5项</li>
</ul>
</body>
<script>
var liEle=document.querySelector("li");
console.log(liEle);
var liEles = document.querySelectorAll("li");
console.log(liEles);
console.log(liEles[1]);
var ele =document.querySelector("#test");
console.log(ele);
var eles = document.querySelector(".demo");
console.log(eles);
var demoEles =document.querySelectorAll(".demo");
console.log(demoEles);
</script>
</html>
3.创建其他DOM对象:
①createAttribute(name)
②createComment()
③createElement()
④createTextNode()
2.2 Element:元秦对象
获取/创建: 通过document来获取和创建
方法:
removeAttribute(): 删除属性
setAttribute():设置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element对象</title>
<script>
</script>
</head>
<body>
<a>点我试一试</a>
<input type="button" id="btn_set" value="设置属性">
<input type="button" id="btn_remove" value="删除属性">
<script>
// 获取btn
var btn_set = document.getElementById("btn_set");
btn_set.onclick = function () {
// 1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.setAttribute("href", "https://www.baidu.com");
};
// 获取btn
var btn_remove = document.getElementById("btn_remove");
btn_remove.onclick = function () {
// 1.获取a标签
var element_a = document.getElementsByTagName("a")[0];
element_a.removeAttribute("href");
};
</script>
</body>
</html>
2.3 Node:节点对象,其他5个的父对象
特点: 所有dom对象都可以被认为是一个节点
方法:
CRUD dom树:
appendChild():向节点的子节点列表的结尾添加新的子节点。
removeChild():删除(并返回)当前节点的指定子节点。
replaceChild():用新节点替换一个子节点。
属性:
parentNode 返回节点的父节点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node对象</title>
<style>
div {
border: 1px solid red;
}
#div1 {
width: 200px;
height: 200px;
}
#div2 {
width: 100px;
height: 100px;
}
#div3 {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">div2</div>
div1
</div>
<a id="del" href="javascript:void(0);">删除子节点</a>
<a id="add" href="javascript:void(0);">添加子节点</a>
<!-- <input type="button" id="del" value="删除子节点">-->
<script>
// 1.获取超链接
var element_a = document.getElementById("del");
// 2.绑定单击事件
element_a.onclick = function () {
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
div1.removeChild(div2);
}
// 1.获取超链接
var element_add = document.getElementById("add");
// 2.绑定单击事件
element_add.onclick = function () {
var div1 = document.getElementById("div1");
// 给div1添加子节点
// 创建div节点
var div3 = document.createElement("div");
div3.setAttribute("id", "div3");
div1.appendChild(div3);
};
/*
超链接功能:
1.可以被点击:样式
2.点击后跳转到href指定的url
需求:保留1功能,去掉2功能
实现:href="javascript:void(0);"
*/
// parentNode 返回节点的父节点。
var div2 = document.getElementById("div2");
var div1 = div2.parentNode;
alert(div1);
</script>
</body>
</html>