Web开发——HTML DOM基础
文档资料参考：
- 参考：HTML DOM 参考手册
- 参考：HTML DOM 教程
目录：
- 1、HTML DOM （文档对象模型）
- 2、查找 HTML 元素
- 3、改变 HTML 输出
- 4、改变CSS（样式）
- 5、HTML DOM事件
- 5.1 对事件做出反应
- 5.2 HTML 事件属性
- 5.3 使用 HTML DOM 来分配事件
- （1）onload 和 onunload 事件
- （2）onchange 事件
- （3）onmouseover 和 onmouseout 事件
- （4）onmousedown、onmouseup 以及 onclick 事件
- （5）onfocus 事件
- 6、添加和删除节点（HTML元素）
1、HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
2、查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
- 通过 id 找到 HTML 元素（id）
- 通过标签名找到 HTML 元素（<p>, <h1>...）
- 通过类名找到 HTML 元素（class）
2.1 通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。
举例1（HTML内嵌JavaScript）：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body>
<p id="intro">Hello, world!</p> <script>
var x = document.getElementById("intro");
document.write('<p>id="intro"的段落中的文本是：' + x.innerHTML + '</p>');
</script>
</body>
</html>
输出结果：
Hello, world!
id="intro"的段落中的文本是：Hello, world!
举例2（HTML + JavaScript）：
test.html代码：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body>
<p id="intro">Hello, world!</p> <script src="my-js-file.js"></script>
</body>
</html>
my-js-file.js代码：
var x = document.getElementById("intro");
document.write('<p>id="intro"的段落中的文本是：' + x.innerHTML + '</p>');
输出结果：
Hello, world!
id="intro"的段落中的文本是：Hello, world!
2.2 通过标签名查找 HTML 元素
举例（本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素）：
提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> <div id="main">
<p>The DOM is very useful.</p>
<p>本例演示 <b>getElementByTagName</b> 方法</p>
</div> <script>
var x = document.getElementById("main");
var y = document.getElementsByTagName("p");
document.write('id为"main"的div中的第一段文本是：' + y[0].innerHTML);
</script>
</body>
</html>
输出结果：略。
3、改变 HTML 输出
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
3.1 改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容：
今天的日期是： Sun Oct 14 2018 17:06:00 GMT+0800 (中国标准时间)
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body>
<script>
document.write(Date());
</script>
</body>
</html>
输出结果：Sun Oct 14 2018 17:15:26 GMT+0800 (中国标准时间)
3.2 改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
举例（本例改变了p元素的内容）：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> <p id="p1">Hello, world!</p>
<script>
var x = document.getElementById("p1");
x.innerHTML = "New text!"
</script>
</body>
</html>
输出结果：New text!
3.3 改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
举例（本例改变了 <img> 元素的 src 属性）：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> <img id="image1" src=hello.jpg> <script>
var x = document.getElementById("image1");
x.src = "baidu.jpg";
</script>
</body>
</html>
输出结果：略。
4、改变CSS（样式）
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
4.1 改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
举例1（下面的例子会改变 <p> 元素的样式）：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> <p id="p1">Hello, world!</p> <script>
var x = document.getElementById("p1");
p1.style.color = "red";
</script>
</body>
</html>
输出结果：
Hello, world!
举例2（本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时）：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> <h1 id="header1">Header 1!</h1>
<!--<button type="button" onclick="document.getElementById('header1').style.color='red'">点击这里！</button>-->
<button type="button" onclick='document.getElementById("header1").style.color="red"'>点击这里！</button>
<script>
</script>
</body>
</html>
输出结果：
Header 1!
点击这里！
4.2 HTML DOM Style 对象参考手册
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> <p id="p1">这是一段文本。</p> <input type="button" value="隐藏文本" onclick='document.getElementById("p1").style.visibility="hidden"' />
<input type="button" value="显示文本" onclick='document.getElementById("p1").style.visibility="visible"' /> <script>
</script>
</body>
</html>
输出结果：
这是一段文本。
5、HTML DOM事件
5.1 对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
1 onclick=JavaScript
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
举例1（在本例中，当用户在 <h1> 元素上点击时，会改变其内容）：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> <h1 onclick='this.innerHTML="谢谢"'>请点击该文本</h1> <script>
</script> </body>
</html>
输出结果：略。
举例2（例1和例2实现效果一致，本例从事件处理器调用一个函数）：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> <h1 onclick=changetext(this)>请点击该文本</h1> <script>
function changetext(id) {
id.innerHTML = '谢谢！';
}
</script> </body>
</html>
输出结果：略。
5.2 HTML 事件属性
如需向 HTML 元素分配 事件，您可以使用事件属性。
举例1（向 button 元素分配 onclick 事件）：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p> <button onclick="displayDate()">点击这里</button>
<p id='demo'></p> <script>
function displayDate() {
<!--document.write("Date()");<!--这个语句会重写页面内容-->-->
var demo = document.getElementById("demo");
demo.innerHTML = Date();
}
</script> </body>
</html>
输出结果：略。
5.3 使用 HTML DOM 来分配事件
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p> <button id="myBtn">点击这里</button>
<p id='demo'></p> <script>
var button = document.getElementById("myBtn");
button.onclick = function() {displayDate()} function displayDate() {
<!--document.write("Date()");<!--这个语句会重写页面内容-->-->
var demo = document.getElementById("demo");
demo.innerHTML = Date();
}
</script> </body>
</html>
输出结果：略。
（1）onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
举例1：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body onload="checkCookies()"> <script>
function checkCookies() {
if (navigator.cookieEnabled === true) {
alert("已启用cookies");
} else {
alert("未启用cookies");
}
}
</script> </body>
</html>
输出结果：略。
举例2（当页面完成加载时，显示一个提示框。）：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body onload="myMessage()"> <script>
function myMessage() {
alert("这段消息由 onload 事件触发");
}
</script> </body>
</html>
输出结果：略。
（2）onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> 请输入英文字符：
<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>
</input> <script>
function myFunction() {
var myText = document.getElementById("fname");
myText.value = myText.value.toUpperCase();
}
</script> </body>
</html>
输出结果：略。
（3）onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> <div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">
把鼠标移动到上面
</div> <script>
function mouseOver(obj) {
obj.innerHTML = "谢谢";
}
function mouseOut(obj) {
obj.innerHTML = "把鼠标移到上面";
}
</script> </body>
</html>
输出结果：略。
（4）onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
举例1（当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色）：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body>
<h1 onmouseover="style.color='red'" onmouseout="style.color='blue'">请把鼠标移动到这段文本上</h1> <script>
</script> </body>
</html>
输出结果：
请把鼠标移动到这段文本上
举例2：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> <div onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">
把鼠标移动到上面
</div> <script>
function mouseDown(obj) {
obj.style.backgroundColor = "#1ec5e5";
obj.innerHTML = "请释放鼠标按钮";
}
function mouseUp(obj) {
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script> </body>
</html>
输出结果：略。
举例3（当用户按下鼠标按钮时，更换一幅图像（图片已经提前准备好））：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> <img id="image1" onmousedown="lightOn()" onmouseup="lightOff()" src="eg_bulboff.gif">
<p>按住鼠标不放可以点亮这盏灯！</p> <script>
function lightOn() {
document.getElementById("image1").src="eg_bulbon.gif";
}
function lightOff() {
document.getElementById("image1").src="eg_bulboff.gif";
}
</script> </body>
</html>
输出结果：略。
（5）onfocus 事件
当输入字段获得焦点时，改变其背景色。
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body> 请输入英文字符：<input type="text" onfocus="myFunction(this)"></input>
<p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p> <script>
function myFunction(id) {
id.style.background="yellow";
}
</script> </body>
</html>
输出结果：
请输入英文字符：
当输入字段获得焦点时，会触发改变背景颜色的函数。
6、添加和删除节点（HTML元素）
6.1 创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div> <script>
var para = document.createElement("p"); <!--创建新的<p>元素-->
var node = document.createTextNode("这是新段落。"); <!--如需向<p>元素添加文本，必须首先创建文本节点-->
para.appendChild(node); <!--必须向<p>元素追加这个文本节点-->
<!--最后必须向一个已有的元素追加这个新元素-->
var element = document.getElementById("div1"); <!--找到一个已有的元素-->
element.appendChild(para); <!--向这个已有的元素追加新元素--> </script> </body>
</html>
输出结果：
这是一个段落。
这是另一个段落。
这是新段落。
6.2 删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div> <script>
var parent = document.getElementById("div1"); <!--获取父元素-->
var child = document.getElementById("p1");
parent.removeChild(child);
</script> </body>
</html>
输出结果：
这是另一个段落。
提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
<!DOCTYPE html>
<html>
<head>
<!--<meta charset="utf-8">-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>My test page</title> </head> <body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div> <script>
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
</script> </body>
</html>
输出结果：
这是另一个段落。
Web开发——HTML DOM基础的更多相关文章
- WEB开发之路——基础部分
WEB开发之路 受BBC的<BBC: Brain Story>和<BBC: The Brain - A Secret History>的影响,我一直有志于探究人类大脑,2015 ...
- web开发必备-网络基础知识---记录一下
1.osi 7层网络模型 2.socket 套接字编程 PS:一个从事web开发的人来说,我们是使用http协议来和服务器来进行交互.后面会详细的分析这个过程.
- web开发：css基础
一.w3c架构分析 二.css三种引入 三.三种引入的优先级 四.基础选择器 五.长度单位与颜色 六.文件样式操作 七.display 一.w3c架构分析 <!DOCTYPE html> ...
- 高性能WEB开发：DOM编程
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和Javascript(这里指ECMscript)各自想象为一个岛屿,它们之间用 ...
- web开发：javascript基础
一.js引入 二.变量的定义 三.三种弹出框 四.调试方式 五.数据类型 六.数据类型转换 七.运算符 八.分支机构 九.循环结构 十.异常处理 十一.函数 一.js引入 - ES: ECMAScri ...
- Spring入门（二）：SpringBoot之基础Web开发
接上回 现在,我们已经能自行完成SpringBoot的初级项目搭建了,接下来看如何实现一些Web开发中的基础功能. 先看项目完整的目录结构: 1. 返回Json数据 创建model文件夹,并新建Per ...
- 高性能WEB开发：重排与重绘
DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件——HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数据结构——DOM树和渲染树. D ...
- java web 开发三剑客 -------电子书
Internet,人们通常称为因特网,是当今世界上覆盖面最大和应用最广泛的网络.根据英语构词法,Internet是Inter + net,Inter-作为前缀在英语中表示“在一起,交互”,由此可知In ...
- Python Web框架本质——Python Web开发系列一
前言:了解一件事情本质的那一瞬间总能让我获得巨大的愉悦感,希望这篇文章也能帮助到您. 目的:本文主要简单介绍Web开发中三大基本功能:Socket实现.路由系统.模板引擎渲染. 进入正题. 一. 基础 ...
随机推荐
- [转]tensorflow中的gather
原文链接 tensorflow中取下标的函数包括:tf.gather , tf.gather_nd 和 tf.batch_gather. 1.tf.gather(params,indices,vali ...
- Select逻辑顺序图
Select逻辑顺序图
- SNF软件开发机器人-子系统-功能-【列表】自由排序-如何配置？
[列表]自由排序 1.效果展示: 2.使用说明: 打开显示页面,点击开发者选项的简单配置按钮.在功能表信息中选择自由排序复选框后保存.
- vue-router的router.go(n)问题？
<template> <div> <mt-navbar v-model="selected" class="container" ...
- Spring钩子方法和钩子接口的使用详解
本文转自:http://www.sohu.com/a/166804449_714863 前言 SpringFramework其实具有很高的扩展性,只是很少人喜欢挖掘那些扩展点,而且官方的Refrenc ...
- halcon 特征测量
Features 1. line_orientation 功能:计算线的方位. 2. line_position 功能:计算一条线的重心.长度和方位. 3. partition_lines ...
- .NET Core 2.1中的HttpClientFactory最佳实践
ASP.NET Core 2.1中出现一个新的HttpClientFactory功能, 它有助于解决开发人员在使用HttpClient实例从其应用程序发出外部Web请求时可能遇到的一些常见问题. 介绍 ...
- [转]SASS用法指南
[转]SASS用法指南 转自阮一峰 SASS用法指南 一.什么是SASS SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 本文总结了 ...
- Vim替换查找
##一.字符的替换及撤销(Undo操作) ###1.替换和撤销(Undo)命令 替换和Undo命令都是针对普通模式下的操作 命令 | 说明 -----|---- ...
- SpringBoot------ActiveMQ安装
1.官网下载地址 http://activemq.apache.org/activemq-5156-release.html springboot文档 https://docs.spring.io/s ...