目录
一.DOM简介
什么是DOM:
文档对象模型
(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
DOM树 :
- 文档:一个页面就是一个文档,DOM 中使用 document 表示
- 元素:页面中的所有标签都是元素,DOM 中使用 element 表示
- 节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM 中使用 node 表示.
DOM把以上内容都看作是对象.
二.获取元素
如何获取页面元素
DOM在我们实际开发中主要用来操作元素。
获取页面中的元素可以使用以下几种方式:
- 根据 ID 获取
- 根据标签名获取
- 通过 HTML5 新增的方法获取
- 特殊元素获取
根据ID获取
使用 getElementById() 方法可以获取带有 ID 的元素:
document.getElementById('id');
参数:
-
要查找的元素的 ID。ID是区分大小写的字符串,在文档中是唯一的;只有一个元素可以具有任何给定的 ID。
返回值:
-
描述与指定 ID 匹配的 DOM 元素对象的 Element 对象,或者如果在文档中找不到匹配的元素则返回null。
-
使用 console.dir() 可以打印我们获取的元素对象,更好的查看对象里面的属性和方法。
根据标签名获取:
-
使用 getElementsByTagName() 方法可以返回带有指定标签名的对象的集合。
-
哪怕只有一个元素,或者说压根就没有元素,也是返回一个伪数组
伪数组:
-
即arrayLike,也称为类数组。是一种按照索引存储数据且具有length属性的对象。因为是对象,所以不能调用数组的方法,比如forEach()、push()等。
语法:
document.getElementsByTagName('标签名');
返回的是一个Element对象的集合,以伪数组的的方式存储的。
注意:
- 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历。
- 得到元素对象是动态的
- 还可以获取某个元素(父元素)内部所有指定标签名的子元素
- element.getElementsByTagName('标签名');
- 注意:父元素必须是单个对象(必须指明哪一个是元素对象).获取的时候不包括父元素自己。
通过 HTML5 新增的方法获取
-
document.getElementsByClassName(‘类名’);// 根据类名返回元素对象集
-
document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
-
document.querySelectorAll('选择器'); // 根据指定选择器返回
-
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(‘#nav’);
例如:
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// 1. getElementsByClassName 根据类名获得某些元素集合
var boxs = document.getElementsByClassName('box');
console.log(boxs);
// 2. querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var li = document.querySelector('li');
console.log(li);
// 3. querySelectorAll()返回指定选择器的所有元素对象集合
var allBox = document.querySelectorAll('.box');
console.log(allBox);
var lis = document.querySelectorAll('li');
console.log(lis);
</script>
获取特殊元素(body,html)
获取body元素
doucumnet.body // 返回body元素对象
获取html元素
document.documentElement // 返回html元素对象
事件基础
事件概述
JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。
简单理解:事件就是一种触发-响应机制
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个事件,然后去执行某些操作。
事件三要素
事件源 (谁)
事件类型 (什么事件)
事件处理程序 (做啥)
例如现在我们实现一个点击按钮,浏览器就可以弹出来一个对话框,上面显示:你好啊。
代码实现:
//事件源 事件被触发的对象
var btn = document.getElementById('btn');
//onclick 事件类型 如何触发 什么事件 比如鼠标点击,鼠标经过,还是鼠标按下
//事件处理程序 通过一个函数赋值的方式完成
btn.onclick = function() {
alert('你好吗');
};
三.执行事件的步骤
-
获取事件源
-
注册事件(绑定事件)
-
添加事件处理程序(采取函数赋值形式)
-
常见的鼠标事件
例如:
下拉菜单三要素:
- 事件源:下拉按钮
- 事件类型:鼠标点击或者经过
- 事件处理程序:显示表单