在了解了javascript的语言基础和特性后
javascript真正大放光彩的地方来了——这就是javascript DOM
Javascript DOM
DOM(Document Object Model)，文档对象模型。
是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口；W3C已经定义了一系列DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
简单的说就是一套操作文档内容的方法。
需要注意的是，我们需要把DOM当作一个整体，不能分割看待，即DOM（文档对象模型）是一套操作文档内容的方法。
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中的所有标签都是元素，DOM中使用element表示
- 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示
DOM把以上内容看作都是对象
实例：
-
<!DOCTYPE html> -
<html> -
<head> -
<title>Shopping list</title> -
<meta charset="utf-8"> -
</head> -
<body> -
<h1>What to buy</h1> -
<p id="buy" title="a gentle reminder">Don't forget to buy this stuff</p> -
<ul id="purchases"> -
<li>A tin od beans</li> -
<li>Cheese</li> -
<li>Milk</li> -
</ul> -
</body> -
</html>
用树表示这个网页的结构：
1、获取DOM四种基本方法
1、getElementById()
2、getElementsByTagname()
3、getAttribute()
4、setAttribute()
常用的两种解析：
1. getElementById()：
参数：元素的ID值。 （元素节点简称元素）
返回值：一个有指定ID的元素对象（元素是对象）
注：这个方法是与document对象相关联，只能由document对象调用。
用法：document.getElementById(Id)
例：
typeof document.getElementById("purchases");//object代码演练：
-
<!DOCTYPE html> -
<html lang="zh"> -
<head> -
<meta charset="UTF-8"> -
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
<meta http-equiv="X-UA-Compatible" content="ie=edge"> -
<title>Document</title> -
</head> -
<body> -
<div id="time">2020-04-16</div> -
<script> -
// 1. 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面 -
// 2. get 获得 element 元素 by 通过 驼峰命名法 -
// 3. 参数 id是大小写敏感的字符串 -
// 4. 返回的是一个元素对象 -
var timer = document.getElementById('time'); -
console.log(timer); -
console.log(typeof timer); -
// 5. console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法 -
console.dir(timer); -
</script> -
</body> -
</html>
看一下控制台打印的是什么
可以看到 console.log(timer)打印出来的是整个div标签
timer类型是个对象
2. getElementsByTagName():
参数：元素名
返回值：一个对象数组。这个数组里每个元素都是对象，每个对象分别对应着文档里给定标签的一个元素。
注：这个方法可和一般元素关联。这个方法允许我们把通配符当作它的参数，返回在某份html文档里总共有多少个元素节点。
用法：element.getElementsByTagName(TagName)
例：
-
var items=document.getElementsByTagName("li"); -
items.length;//3 -
document.getElementsByTagName(“*”);//12
2、事件基础
3.1 事件概述
JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解：触发——>响应机制
网页中每个元素都可以产生某些可以触发JavaScript的事件，例如，我们可以在用户点击某按钮产生一个事件，然后去执行某些操作
3.2 事件三要素
事件源 、事件类型、事件处理程序，我们也称为事件三要素
(1) 事件源 事件被触发的对象 谁
(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下
(3) 事件处理程序 通过一个函数赋值的方式 完成
代码实例
-
<!DOCTYPE html> -
<html lang="zh"> -
<head> -
<meta charset="UTF-8"> -
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
<meta http-equiv="X-UA-Compatible" content="ie=edge"> -
<title>Document</title> -
</head> -
<body> -
<button id="btn">唐伯虎</button> -
<script> -
// 点击一个按钮，弹出对话框 -
// 1. 事件是有三部分组成 事件源 事件类型 事件处理程序 我们也称为事件三要素 -
//(1) 事件源 事件被触发的对象 谁 按钮 -
var btn = document.getElementById('btn'); -
//(2) 事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 还是键盘按下 -
//(3) 事件处理程序 通过一个函数赋值的方式 完成 -
btn.onclick = function() { -
alert('点秋香'); -
} -
</script> -
</body> -
</html>
运行结果
3.3 执行事件的步骤
1、获取事件源
2、注册事件（绑定事件）
3、添加事件处理程序（采取函数赋值形式）
代码实战
-
<!DOCTYPE html> -
<html lang="zh"> -
<head> -
<meta charset="UTF-8"> -
<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
<meta http-equiv="X-UA-Compatible" content="ie=edge"> -
<title>Document</title> -
</head> -
<body> -
<div>123</div> -
<script> -
// 执行事件步骤 -
// 点击div 控制台输出 我被选中了 -
// 1. 获取事件源 -
var div = document.querySelector('div'); -
// 2.绑定事件 注册事件 -
// div.onclick -
// 3.添加事件处理程序 -
div.onclick = function() { -
console.log('我被选中了'); -
} -
</script> -
</body> -
</html>
运行结果
鼠标点击123—>控制台打印
常用的DOM事件
- onclick事件---当用户点击时执行
- onload事件---当用户进入时执行
- onunload事件---用用户离开时执行
- onmouseover事件---当用户鼠标指针移入时执行
- onmouseout事件---当用户鼠标指针移出时执行
- onmousedown事件---当用户鼠标摁下时执行
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
