CRainyDay

JS中的宿主对象, JSDOM

一.DOM简介

1.什么是DOM

  • DOM, 即Document Object Model 文档对象模型
  • JS中通过操作DOM来对HTML文档进行操作.只要了解DOM就可以随心所欲的操作WEB页面
  • 文档: 表示的是整个HTML网页文档
  • 对象: 表示将页面中的每一个部分(包括那些HTML标签)都转换为了对象.
  • 模型: 表示对象(即HTML中的节点)之间的关系, 这样方便我们获取、操作对象.

DOMTree

2.节点

  • 节点(也即对象): Node——构成html文档最基本的单元, 网页中的每个部分都可以称为一个节点

  • 常用节点分为四类:

  • ——①文档节点: 整个HTML文档(即document对象)
  • ——②元素节点: HTML文档中的html标签
  • ——③属性节点: 元素的属性
  • ——④文本节点: HTML标签中的文本内容
  • 节点的类型不同, 它们的属性也可能不同

Node

节点的属性

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

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

1
2
3
4
5
6
7
8
9
10
11
12
<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代码, 当该事件被触发时, 这些代码将会执行

1
2
3
4
<!--鼠标被移动时触发-->
<body>
<button id="btn" onmousemove="alert('讨厌,移到我上面干嘛~~~')">我是一个按钮</button>
</body>
注意: 这种响应方式, 结构与行为发生耦合, 不方便维护, 我们一般不这样使用.

3.绑定响应函数

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

1
2
3
4
5
6
7
8
9
<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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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>

个人觉得script标签写在DOM对象加载之后更好一些, 这样的话, 加载性能好点, 用户体验好. 但是现在的网速和浏览器内核已经很好了, 其实写在哪里没什么太大的差别.


 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有