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>