JavaScript——DOM文档对象模型
@[TOC]
DOM
DOM：文档对象模型（Document Object Model），将标记语言文档的各个组成部分，封装为对象，可以使用这些对象对标记语言文档进行CRUD（增删改查）的动态操作
HTML DOM 模型被结构化为对象树（DOM树）
对应的HTML文档
<html>
<head>
<title>文档标题</title>
</head>
<body>
<a href="#">我的连接</a>
<h1>我的标题</h1>
</body>
</html>
对象
一. Node：节点对象，父对象
所有DOM对象都可以被认为是一个节点（Node）
○ 方法
CRUD DOM树
① appendChild()：向节点的子节点列表的末尾添加新的子节点
需要一个参数，为添加的新节点
div1.appendChild(div3); //将div3添加为div1的子节点
② removeChild()：删除并返回当前节点的指定子节点
需要一个参数，为要删除的子节点
div1.removeChild(div2); //删除div1的子节div2
③ replaceChild()：用新节点替换一个子节点
需要两个参数，第一参数为新节点，第二参数为要替换的节点
div1.replaceChild(div3,div2); //用div3替换div1的子节点div2
○ 属性
parentNode：返回节点的父节点
var d2 = document.getElementById("div2");
document.write(d2.parentNode); //输出 [object HTMLDivElement]
二. Document：文档对象
○ 创建对象
Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问，也可以单独使用
window.document
docunment
○ 方法
(1). 获取Element对象
html < body >标签内代码
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="class1">class1</div>
<div class="class1">class2</div>
<input type="text" name="input1">
① getElementById()：根据id属性值获取元素对象
var div1 = document.getElementsById("div1");
alert(div1); //弹出 [object HTMLDivElement]
② getElementsByTagName()：根据元素名称获取元素对象们，返回值为数组
var divs = document.getElementsByTagName("div");
alert(divs.length); //弹出 5
③ getElementsByClassName()：根据class属性值获取元素对象们，返回值为数组
var class1 = document.getElementsByClassName("class1");
alert(class1.length); //弹出 2
④ getElementsByName()：根据name属性值获取元素对象们，返回值为数组
var input = document.getElementsByName("input1");
alert(input.length); //弹出 1
(2).创建其他DOM对象
① createElement()：创建元素节点，返回一个Element对象
var table = document.createElement("table");
document.write(table); //输出 [object HTMLTableElement]
② createComment()：创建注释节点，返回一个Comment对象
③ createTextNode()：创建文本节点，返回一个Text对象
④ createAttribute()：创建新的Attribute节点
三. Element：元素对象
○ 获取/创建
通过document对象来获取和创建
○ 方法
① removeAttribute()：删除指定的属性
② setAttribute()：设置指定的属性
使用两个方法来给html标签添加/移除属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Element</title>
</head>
<body>
<div>This is a div</div>
<input id="btn_set" type="button" value="change color">
<input id="btn_remove" type="button" value="remove color">
<script>
// 获取三个标签对象
var btn_set = document.getElementById("btn_set");
var btn_remove = document.getElementById("btn_remove");
var element_div = document.getElementsByTagName("div")[0];
// 给设置颜色按钮绑定事件
btn_set.onclick = function () {
// 给element_div对象添加style属性
element_div.setAttribute("style","color: red");
}
btn_remove.onclick = function () {
// 移除element_div对象的style属性
element_div.removeAttribute("style");
}
</script>
</body>
</html>
innerHTML
innerHTML 属性设置或返回标签体内容
修改标签体内容
<div id="div1">
div
</div>
<script>
var div = document.getElementById("div1");
div.innerHTML = "div123";
</script>
获取标签体内容
<div id="div1">
div
</div>
<script>
var div = document.getElementById("div1");
var div_text = div.innerHTML;
document.write(div_text); // 输出div
</script>
在标签体内部追加标签
<div id="div1">
div
</div>
<script>
var div = document.getElementById("div1");
div.innerHTML += "<a href='#'>A</a>";
</script>
控制元素样式
1. 对象.style.css属性
div.style.color = "red";
注意：在css中，属性名为单独单词可以直接使用，多单词如margin-top，应写为marginTop
div.style.marginTop = "5px";
2. 使用className属性通过类选择器引入样式
<!-- Css -->
<style>
.d1{
border: 1px solid black;
width: 50px;
height: 50px;
}
</style>
<!-- HTML -->
<div id="div1">
div
</div>
<!-- JS -->
<script>
var div = document.getElementById("div1");
div.onclick = function () {
div.className = "d1";
}
</script>
- 作者：Melonico
- 发表时间：2021-03-15 17:39
- 更新时间：2021-03-15 17:39
评论