DOM在前面的JavaScript学习笔记(一)–JS基础里简单提到过,它是浏览器厂商提供的用来控制html / css 的代码的文档对象模型,是JavaScript的重要组成部分,现在带大家详细了解一下什么是DOM。
基本概念
DOM的全称是Document Object Model,即文档对象模型,是一套对文档的内容进行抽象和概念化的方法,它允许脚本控制Web页面、窗口和文档。
DOM不是JavaScript语言的一部分,而是内置在浏览器中的一个应用程序接口。 如果没有DOM,JavaScript将是另外一种脚本语言;而有了DOM,它将成为制作动态页面的强有力工具。当然,我们可以简单的理解为一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。
DOM是一组用来描述脚本怎样与结构化文档进行交互和访问的web标准。他的功能是把浏览器支持的文档(包括HTML、XML、XHTML)当作一个对象来解析。DOM实际上是一个操作文档里面所包含内容的一个编程的API,允许开发人员从文档中读取、搜索、修改、增加和删除数据。DOM与平台和语言无关,只要是支持DOM的平台和编程语言,都可以用来编写文档。
DOM定义了一系列对象、方法和属性,用于访问、操作和创建文档中的内容、结构、样式以及行为。每一个网页元素(一个HTML标签)都对应着一个对象。我们可以把DOM认为是页面上数据和结构的一个树形表示,树根是window或document对象,相当于最外层的标签的外围,也就是整个文档。
节点(node)
节点这个词是一个网络用语,代表了网络中的一个连接点,一个网络就是由一些节点构成的集合。在现实世界中,一切事物都由原子构成,原子就是现实世界的节点。原子还可以进一步分解为更细小的亚原子微粒,这些亚原子微粒同样也是节点。
在DOM中,文档是由节点构成的集合,HTML文档中所有内容都被视为节点,DOM被视为节点树的HTML。通过以下代码来认识一下节点的类型。
<!--头部-->
<div title="a gentle reminder">hello world</div>
-
文档节点(document):当前html文档。
-
注释节点(comment):< !–头部–>
-
元素节点(Element):< div>< /div>
-
属性节点(attribute):title=“a gentle reminder”
-
文本节点(text):hello world
节点信息相关属性 | 层次结构相关属性 | 方法 |
---|---|---|
nodeType | childNodes | appendChild(child) |
nodeName | firstChild | insertBefore(new,ref) |
nodeValue | lastChild | removeChild(child) |
nextSibling | replaceChild(new,old) | |
parentNode | cloneNode([boolean]) 参数为true时,表示除了克隆当前对象,还克隆子元素 | |
parentElement | ||
ownerDocument |
需要注意的是,nodeType 属性返回节点的类型,用数字来表示。如果是元素节点,返回 1;如果是属性节点, 返回 2;如果是文本节点,返回 3;如果是注释节点,返回 8。该属性是只读的。
基本的DOM方法
-
document.getElementById(): 返回对拥有指定 ID 的第一个对象的引用。
-
document.getElementsByName() : 返回带有指定名称的对象的集合。
-
document.getElementsByTagName() : 返回带有指定标签名的对象的集合。
-
document.getElementsByClassName(): 返回带有指定类名的对象的集合。
-
document.querySelector() : 返回匹配指定 CSS 选择器的一个对象的引用。
-
document.querySelectorAll() : 返回匹配指定 CSS 选择器的的对象的集合。
-
document.body: 提供对 < body> 元素的直接访问。
-
document.forms: 返回对文档中所有 Form 对象引用。
-
表单名.控件名.value: 获取表单控件的值。
-
document.title: 返回当前文档的标题。
-
createElement(): 创建一个节点。
-
innerText: 向当前元素内部添加文本节点。
-
innerHTML: 向当前元素内部添加HTML代码片段。
-
style: 获取或者设置样式。
-
getAttribute(key): 返回指定属性名的属性值。
-
getAttributeNames(): 返回指定对象的属性名。
-
setAttribute(key,val): 添加指定的属性,并为其赋指定的值。如果这个指定的属性已存在,则仅设置/更改值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>添加</button>
<button>导入</button>
<button>批量删除</button>
<a href="" id="btn_export">导出</a>
<div id="content"></div>
<script>
var btns = document.querySelectorAll("button");
var $content = document.querySelector("#content");
// 点击添加后,向content中添加一个h2元素
btns[0].onclick = function(){
var $h2 = document.createElement("h2");
$h2.innerText = "这是一个新标题";
$content.appendChild($h2)
}
// 移除$content中所有的孩子节点
btns[2].onclick = function(){
Array.from(document.querySelectorAll("#content > *")).forEach((item)=>{
$content.removeChild(item)
})
}
document.querySelector("#btn_export").onclick = function(event){
alert(1);
console.log(event);
//取消事件的默认动作
event.preventDefault();
}
</script>
</body>
</html>
DOM事件机制
javascript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
事件三要素
- 事件源:dom对象(元素节点)。
- 事件处理函数:匿名函数。(在未来的某个时刻执行,由浏览器来调用,浏览器在调用的时候会将事件对象传递给我们这个函数)。
- 事件对象:与特定事件相关且包含有关该事件详细信息的对象。
事件类型
- onclick:用户点击时执行。
- onload:用户进入时执行。
- onunload。用户离开时执行。
- onmouseover:鼠标移入时执行。
- onmouseout:鼠标移出时执行。
- onmousedown:鼠标摁下时执行。
- onmouseup:鼠标松开时执行。
事件流(事件冒泡)
- 元素具有嵌套关系。
<style>
#outer,#center,#inner {
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 50%;
}
#outer {
width: 500px;
margin: 0 auto;
height: 500px;
padding: 50px;
}
#center , #inner{
height: 100%;
padding: 50px;
}
</style>
<div class="outer">
<div class="center">
<div class="inner"></div>
</div>
</div>
- 每层元素都绑定事件处理函数。
var $outer = document.querySelector("#outer")
var $center = document.querySelector("#center")
var $inner = document.querySelector("#inner")
$outer.onclick = function(event){
console.log('outer',event.target);
}
$center.onclick = function(event){
console.log('center',event.target);
event.stopPropagation();
}
$inner.onclick = function(event){
console.log('inner',event.target);
event.stopPropagation();
}
- 操作。
比如:当我们点击inner的时候,实际上也点击center、outer。
事件捕获: outer -> center -> inner
事件冒泡: inner -> center -> outer
需要注意的是,事件处理函数的调用默认是按照事件冒泡的顺序来调用。
事件绑定
事件源 . on事件类型 = 事件处理函数(事件对象){ }
dom.onClick = function(event){
addEventListener(); //事件绑定
//attachEvent()
removeEventListener(); //事件移除
//detachEvent();
}
事件对象
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象包含着所有与事件相关的信息,包括导致事件的元素,事件的类型以及其他与特定事件相关的信息。兼容DOM的浏览器默认会将event对象传入到事件处理函数中。
dom.onclick=function(event){
console.log(event);
}
dom.addEventListener("click",function(event){
console.log(event);
},false);
对象属性 | 说明 |
---|---|
event.target | 事件的目标元素(操作的元素) |
event.clientX、event.clientY | 事件触发时候的坐标 |
event.preventDefault() | 取消事件的默认行为 |
event.stopPropagation() | 取消事件冒泡 |
事件代理
将事件绑定在父元素上而非子元素上。
添加业务: 点击添加按钮 -> 弹模态框 -> 输入数据 -> 保存 -> ajax -> 后台服务器 -> 关闭模态框 ->刷新页面 -> 通知保存成功。
Javascript dom与jQuery的对比
业务 | javascript dom | jQuery |
---|---|---|
选择元素 | querySelector() | 选择器 $("") |
dom操作 | 无法进行批量操作 | 可以实现批量操作 |
事件绑定 | 兼容性较差 | 兼容性,高效,批量 ,方法简洁 |
dom.onClick = function(event){} | $(’.btn_del’).click | |
dom层级关系 | 操作繁杂 | 操作简练 |
jQuery 实际上是对于dom api封装,让用户使用dom方法变得更加简洁,下一篇文章将对jQuery展开详细说明~