DOM(Document Object Model)，文档对象模型，独立于平台和语言，以统一方式访问和修改一个文档的内容和结构。DOM技术可以使用户界面动态的变化，使得页面的交互性增强。
DOM是以1面向对象方式描述的文档模型，定义了表示和修改文档所需的对象、对象的行为和属性以及对象之间的关系。
通过JavaScript可以重构整个HTML文档，添加、移除、改变或重排页面上的元素。JavaScript可以获得对HTML文档中所有元素的访问入口，根据此入口，对HTML元素进行操作。
1.基础
1.1基本构成
DOM遵循W3C标准，定义了访问HTML和XML文档的标准，文档对象模型是中立于平台和语言的接口。分为核心、XML及HTML三大部分。核心DOM是针对任何结构化文档的标准模型；HTMLDOM是针对HTML文档的标准模型，提供访问和操纵HTML的标准编程接口。
1.2文档树
HTML文档中所有节点组成了一个文档树，节点之间有等级关系，即标签的包含关系。HTML中的每个元素、属性和文本都代表一个节点。文档树的根为“文档”节点，伸出根元素“html”节点，并继续伸出分支，直至展开所有叶子节点为止。
| 名称 | 解释 |
|---|---|
| 节点 | 元素、属性和文本等 |
| 父节点 | 当前节点的上一被包含节点 |
| 子节点 | 当前节点的下一包含的节点 |
| 后代 | 当前节点的子节点以及子节点的子节点 |
| 先辈(祖先) | 当前节点的父节点以及父节点的父节点 |
1.3访问节点
1.3.1getElementById()和getElementsByTagName()方法
这两中方法在查找时都会忽略文档结构。在一个文档中id唯一标识一个html元素，通过id查找，可以返回id标识的元素。通过tagname查找，会查找到一组tagname相同的元素。
document.getElementById("flower");
document.getElementsByTagName("p");
1.3.2parentNode、firstChild及lastChild属性
通过与已知元素的相对关系，用这些属性可以访问到当前节点的亲属
2.DOM功能
通过可编程的对象模型，JavaScript可以改变页面中的元素、属性和样式以及对事件作出反映
2.1DOM HTML
2.1.1改变HTML输出流
使用document.write()可直接向html输出流中写内容
<body>
<script>
document.write(Date());
</script>
</body>
2.1.2改变HTML内容
document.getElementById("id").innerHTML="新文本"
<body>
<h1 id="title">试着改变这个标题</h1>
<script>
document.getElementById("title").innerHTML="已经改变了";
</script>
</body>
2.1.3改变HTML属性
document.getElementById("id").属性name=属性value
<body>
<img id="image" src="first.jpg" width="128" height="128" >
<script>
document.getElementById("image").width="256";
</script>
</body>
2.2DOM CSS
HTML允许JavaScript改变元素样式
document.getElementById("id").style.属性name = 属性value
<body>
<h1 id="title">改变我的颜色</h1>
<script>
document.getElementById("title").style.color = "red";
</script>
</body>
2.3DOM事件
HTML DOM可以通过触发事件来执行代码。
2.3.1事件分类
事件分类为一般事件、页面相关事件、表单相关事件、滚动字幕事件、编辑事件、数据绑定和外部事件https://www.w3school.com.cn/jsref/dom_obj_event.asp
2.3.2事件触发
将事件属性添加到元素中，并设置响应函数
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function mousein (id){ id.innerHTML = "教务系统"; }
function mouseout(id) {id.innerHTML = "提示信息"; }
</script>
</head>
<body>
<h1 onmouseover="mousein(this)" onmouseout=" mouseout(this)" >提示信息</h1>
</body>
</html>
也可以通过JavaScript分配事件
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function mousein(id) { document.getElementById(id).innerHTML = "教务系统"; }
function mouseout(id) { document.getElementById(id).innerHTML = "提示信息"; }
</script>
</head>
<body>
<h1 id="tips">提示信息</h1>
<script>
document.getElementById("tips").onmouseover = function () { mousein("tips") };
document.getElementById("tips").onmouseout = function () { mouseout("tips") };
</script>
</body>
</html>
2.4HTML DOM元素
2.4.1添加HTML元素
首先创建该元素，然后向一个已存在的元素添加该元素
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="div1">
<p id=" p1">第一段</p>
<p id=" p2">第二段</p>
</div>
<script>
var paragraph = document.createElement("p");
var node = document.createTextNode("第三段");
paragraph.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(paragraph);
</script>
</body>
</html>
2.4.2删除HTML元素
<html>
<head>
<meta charset="utf-8" />
<title></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>
3.HTML BOM
BOM(Browser Object Document)浏览器对象模型，提供独立于内容而与窗口进行交互的功能。BOM主要管理窗口与窗口之间的通信，核心对象为window。
| 对象 | 功能 |
|---|---|
| window | 移动、调整浏览器大小 |
| location、history | 导航 |
| navigator、screen | 获取屏幕信息 |
| document | 访问html文件的入口 |
| frames | 管理框架 |
3.1window对象
BOM使得JavaScript可以和浏览器对话，由于现代浏览器已经实现了JavaScript交互性方面的相同方法和属性，常被认为是BOM的方法和属性。window对象表示浏览器窗口，所有JavaScript全局对象、函数以及变量都为window对象的成员。全局变量是window的属性，函数是window的方法。经常省略window，直接写作document.
https://www.w3school.com.cn/jsref/dom_obj_window.asp
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function fun() {
window.alert("点他");
}
</script>
</head>
<body>
<input type="button" value="fun" onclick="fun();"/>
</body>
</html>
3.2计时事件
计时事件即为在设定一个事件间隔后执行JavaScript代码，而不是在函数被调用后立即执行
3.2.1setInterval()方法
setInterval(函数定义, 毫秒数);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function fun() {
window.alert("沙雕");
}
</script>
</head>
<body>
<input type="button" value="fun" onclick="fun();" />
<script>
setInterval(function(){ alert("点他") }, 1000)
</script>
</body>
</html>
3.2.2
停止时使用clearInterval(intervalVarible);
创建时使用intervalVarible=setInterval(函数定义, 毫秒数);
下面是一个简单的例子，通过点击按钮定时切换颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
var temp = 0;
var flag_display = null;
var flag_change=null;
var color = [ "AliceBlue", "Aqua", "Blue", "Chartreuse", "DeepPink"];
function change() {
temp++;
if (temp >= 5)
temp = 0;
}
function display() {
document.getElementById("shift").innerHTML = color[temp];
document.getElementById("shift").style.color = color[temp];
}
function start() {
if (flag_change == null && flag_display == null) {
flag_change = setInterval(function () { change() }, 1000);
flag_display = setInterval(function () { display() }, 1000);
}
}
function end() {
if (flag_change != null && flag_display != null) {
clearInterval(flag_display);
clearInterval(flag_change);
flag_display = null;
flag_change = null;
}
}
</script>
</head>
<body>
<h1 id="shift" style="color:red;">red</h1>
<input type="button" value="开始变换颜色" onclick="start();"/>
<input type="button" value="停止变换颜色" onclick="end();"/>
</body>
</html>
3.3Cookie
Cookie用于存储Web页面的用户信息，将用户数据以文本形式存储于本地电脑中。Cookie的作用是记录客户端的用户信息。cookie以名/值对形式存储
username=mike
当浏览器从服务器上请求web时，属于该页面的cookie会被添加到请求中，服务器通过此获得用户信息。JavaScript可以使用document.cookie属性来创建、读取以及删除cookie。
3.3.1创建Cookie
可以为cookie添加一个过期时间和cookie的路径
document.cookie ="username=mike;expires=Thu, 12 Feb 2020 12:00:00 GMT;path=/";
3.3.2修改Cookie
创建一个新的cookie覆盖旧的cookie
3.3.3读取cookie
document.cookie将以字符串形式返回所有的cookie，需要创建函数将其分割开。
网友评论