DOM 又是个什么鬼?
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>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Kubernetes K8S之Service服务详解与示例
- Kubernetes K8S之Ingress详解与示例
- Kubernetes K8S之存储Secret详解
- 在K8s上轻松部署Tungsten Fabric的两种方式
- Linux系统如何在离线环境或内网环境安装部署Docker服务和其他服务
- Servlet执行流程
- 最新的spring boot技术实现登录、列表、分页、上传等功能
- 谈谈我对Vue钩子函数、生命周期的理解
- 浅谈Apache Shiro权限模块及数据库设计
- 企图变秃变强的第一天
- 企图变秃变强的第二天
- Lambda表达式和FastDfs文件上传
- Postman带token测试接口、找不到生产者、无法连接MySQL、禅道部署
- MyBatis-Plus调试配置,IllegaStateException,StringUtils补充
- NullException、Token的作用、Mapstruct用法