JSDOM简介

crainyday

前端 / JS

发布于：2019年4月5日

字数：1.3k字

时长：5分钟

JS中的宿主对象, JSDOM

一.DOM简介

1.什么是DOM

DOM, 即Document Object Model 文档对象模型

JS中通过操作DOM来对HTML文档进行操作.只要了解DOM就可以随心所欲的操作WEB页面

文档: 表示的是整个HTML网页文档

对象: 表示将页面中的每一个部分(包括那些HTML标签)都转换为了对象.

模型: 表示对象(即HTML中的节点)之间的关系, 这样方便我们获取、操作对象.

2.节点

节点(也即对象): Node——构成html文档最基本的单元, 网页中的每个部分都可以称为一个节点
常用节点分为四类:
------①文档节点: 整个HTML文档(即document对象)
------②元素节点: HTML文档中的html标签
------③属性节点: 元素的属性
------④文本节点: HTML标签中的文本内容
节点的类型不同, 它们的属性也可能不同

节点的属性

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

练习: JS操纵网页中的按钮

<body>
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
        console.log(document);//object HTMLDocument
        //获取button对象
        var btn = document.getElementById("btn");
        console.log(btn);//object HTMLButtonElement
        console.log(btn.innerHTML);//我是一个按钮
        //修改按钮的文字
        btn.innerHTML = "I'm a button";
    </script>
</body>

二.事件

事件, 即文档或浏览器窗口发生的一些特定的交互瞬间, 用户和浏览器之间的交互行为
比如: 点击按钮、鼠标移动、关闭浏览器窗口…
我们往往比较关注对事件的处理, 即响应事件

1.事件句柄

属性	此事件发生在何时
onabort	图像的加载被中断
onblur	元素失去焦点
onchange	域的内容被改变
onclick	当用户点击某个对象时调用的事件句柄
ondblclick	当用户双击某个对象时调用的事件句柄
onerror	在加载文档或图像时发生错误
onfocus	元素获得焦点
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开
onload	一张页面或一幅图像完成加载
onmousedown	鼠标按钮被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标移到某元素之上
onmouseup	鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被重新调整大小
onselect	文本被选中
onsubmit	确认按钮被点击
onunload	用户退出页面

2.设置事件属性

我们可以在事件对应的属性中设置一些JS代码, 当该事件被触发时, 这些代码将会执行

<!--鼠标被移动时触发-->
<body>
    <button id="btn" onmousemove="alert('讨厌,移到我上面干嘛~~~')">我是一个按钮</button>
</body>

注意: 这种响应方式, 结构与行为发生耦合, 不方便维护, 我们一般不这样使用.

3.绑定响应函数

<body>
    <!--双击某个对象时触发-->
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
        var btn = document.getElementById("btn");
        btn.ondblclick = function(){
            alert('讨厌,点我两下干嘛~~~');
        };
    </script>
</body>

或

<body>
    <!--单击某个对象时触发-->
    <button id="btn" onclick="showMsg();">我是一个按钮</button>
    <script type="text/javascript">
        var showMsg = function(){
            alert('讨厌,点我干嘛~~~');
        };
    </script>
</body>

三.文档的加载

注意到, 我们上面的代码中, script标签都写在button标签之后, 为什么呢?

这与页面的加载顺序有关, 页面是顺序加载(自上往下)的, 假如把script标签写在button标签之前, 这时在script里获取button对象时获取不到button对象, 因为它还没被加载, 再为一个null添加一个事件就会报错.

故我们需要在该DOM对象加载之后再获取它, 要么把script标签放到要获取的DOM对象之后, 要么将获取及操作该DOM对象的JS代码放在window.onload事件的响应函数中.

1.onload事件

onload 事件会在页面或图像加载完成后立即发生, 该事件支持的JS对象: image, layer, window

先弹出消息对话框, 点击确定后, 再加载出按钮:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>JSDOM</title>
        <script type="text/javascript">
            alert("hello");
        </script>
    </head>
    <body>
        <button id="btn">我是一个按钮</button>
    </body>
</html>

先加载出按钮, 再弹出消息对话框:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>JSDOM</title>
        <script type="text/javascript">
			window.onload = function(){
				alert("hello");
			};
		</script>
    </head>
    <body>
        <button id="btn">我是一个按钮</button>
    </body>
</html>