DOM详解-CSDN博客

本文链接：https://blog.csdn.net/Demo_Null/article/details/106676835

1.1 DOM 简介

1.1.1 概述

DOM(Document Object Model 即：文档对象模型)，是一项 W3C 标准，是针对 HTML 和 XML 的一个 API(应用程序接口)。它将 web 页面和 JavaScript 连接起来，允许程序和脚本动态地访问、更新文档的内容、结构和样式。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之，它会将 web 页面和脚本或程序语言连接起来。

在这里插入图片描述

1.1.2 DOM 核心对象

对象	描述
Document	文档对象
Element	元素对象
Attribute	属性对象
Text	文本对象
Comment	注释对象
Node	节点对象，上述五个对象又统称为节点对象

1.2 Document

每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

1.2.1 常用方法

方法	描述
getElementById()	根据 id 属性值获取元素对象。id属性值一般唯一
getElementsByName()	根据 name 属性值获取元素对象们。返回值是一个数组
getElementsByTagName()	根据元素名称获取元素对象们。返回值是一个数组
getElementsByClassName()	根据 Class 属性值获取元素对象们。返回值是一个数组
write()	向文档写 HTML 表达式或 JavaScript 代码
writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符
createAttribute()	创建属性对象
createComment()	创建注释对象
createElement()	创建元素对象
createTextNode()	创建文本对象

1.2.2 示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<script>
			document.write("输出一段文字到 HTML")
		</script>
	</head>
	<body>
	
	
	</body>
</html>

在这里插入图片描述

1.3 Element

在 HTML DOM 中，Element 对象表示 HTML 元素。Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

1.3.1 常用方法

方法	描述
appendChild()	向元素添加新的子节点，作为最后一个子节点
removeChild()	从元素中移除子节点
replaceChild()	替换元素中的子节点
firstChild	返回元素的首个子元素
lastChild	返回元素的最后一个子元素
parentNode	返回元素的父节点
getAttribute()	返回元素节点的指定属性值
setAttribute()	把指定属性设置或更改为指定值
removeAttribute()	元素中移除指定属性
innerHTML	设置或返回元素的内容

注意
innerHTML 获取/设置标签体内容【该标签会刷新父标签内所有内容，会导致id绑定的监听失效，需要设置属性绑定】

1.3.2 示例

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			table {
				width: 500px;
				margin: auto;
				border: 2px silver solid;
				text-align: center;
			}
			tr, td, th {
				border: 2px silver solid;
			}
		</style>
	</head>
	<body>
		<table id="table">
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>性别</th>
			</tr>
		</table>
	
		<script>
			//获取table元素
			var table = document.getElementById("table");
			
			//追加一行数据
			table.innerHTML +=
								"<tr>" +
								   "<td>1</td>" +
								   "<td>张三</td>" +
								   "<td>男</td>" +
								"</tr>";
		
		</script>
	</body>
</html>

在这里插入图片描述

1.4 Attribute

在 HTML DOM 中，Attribute 对象表示 HTML 属性。HTML 属性始终属于 HTML 元素。

1.4.1 常用方法

方法	描述
name	返回属性的名称
value	设置或返回属性的值

1.5 事件

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会在事件发生前被执行！

1.5.1 事件句柄

点击事件

事件	描述
onclick	单击事件
ondblclick	双击事件

焦点事件

事件	描述
onblur	失去焦点
onfocus	元素获得焦点

加载事件

事件	描述
onload	一张页面或一幅图像完成加载

鼠标事件

事件	描述
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onmousemove	鼠标被移动
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开

键盘事件

事件	描述
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开
onkeypress	某个键盘按键被按下并松开

选择和改变

事件	描述
onchange	域的内容被改变
onselect	文本被选中

表单事件

事件	描述
onsubmit	确认按钮被点击
onreset	重置按钮被点击

1.5.2 示例

//动态添加表格数据，实现全选
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            table {
                width: 500px;
                margin: auto;
                border: 2px silver solid;
                text-align: center;
            }
            tr, td, th {
                border: 2px silver solid;
            }
            .div {
                margin-bottom: 20px;
                text-align: center;
            }
            a:link {
                color: red;
                text-decoration: none;
            }
        </style>
    
    </head>
    <body>
    <div class="div">
        <input type="text" name="num" id="num"/>
        <input type="text" name="name" id="name"/>
        <input type="text" name="gender" id="gender"/>
        <input type="button" name="but" value="提交" id="but"/>
    </div>
        <table id="table">
            <tr>
                <th>
                    <input type="checkbox" id="box" οnclick="f(this)"/>
                </th>
                <th>
                    序号
                </th>
                <th>
                    姓名
                </th>
                <th>
                    性别
                </th>
                <th>
                    操作
                </th>
            </tr>
        </table>
    
    <script>
        //获取table元素
        var table = document.getElementById("table");
        //获取按钮元素
        var but = document.getElementById("but");
     
        //设置按钮单击事件
        but.onclick = function () {
     
           //追加一行数据
           table.innerHTML +=
                   "<tr>" +
                       "<td>" + "<input type='checkbox' name='checked'/>" + "</td>" +
                       "<td>" + document.getElementById("num").value + "</td>" +
                       "<td>" + document.getElementById("name").value + "</td>" +
                       "<td>" + document.getElementById("gender").value + "</td>" +
                       "<td>" + "<a href='javascript:void(0)' οnclick='del(this)'>删除</a>" + "</td>" +
                   "</tr>";
        };
     
        //删除节点方法
        function del(obj) {
            var b = confirm("真的要删除吗");
            if (b) {
                //获取table节点  删除   获取tr节点
                obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
            }
        }
     
        var a = document.getElementById("a");
        a.onclick = function () {
            var b = confirm("真的要删除吗");
            if (b) {
                //获取table节点  删除   获取tr节点
                this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
            }
        };
     
        function f(box) {
            var cd = document.getElementsByName("checked");
            if (box.checked === true) {
                for (var i = 0; i < cd.length; i++) {
                    cd[i].checked = true;
                }
            } else {
                for (var i = 0; i < cd.length; i++) {
                    cd[i].checked = false;
                }
            }
        }
    </script>
</body>
</html>