DOM编程基础

目录

一.DOM简介

什么是DOM:

DOM树 :

二.获取元素

如何获取页面元素

根据ID获取

根据标签名获取:

通过 HTML5 新增的方法获取

三.执行事件的步骤

---

一.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’);

例如：

    
盒子1
    
盒子2
    

        

            
首页
            
产品
        
    

    

获取特殊元素(body，html)
获取body元素

doucumnet.body // 返回body元素对象

获取html元素

document.documentElement // 返回html元素对象

事件基础
事件概述
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。

简单理解：事件就是一种触发-响应机制

网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个事件，然后去执行某些操作。

事件三要素
事件源 （谁）
事件类型 （什么事件）
事件处理程序 （做啥）
例如现在我们实现一个点击按钮，浏览器就可以弹出来一个对话框，上面显示：你好啊。

代码实现：

//事件源 事件被触发的对象 
var btn = document.getElementById('btn');
//onclick 事件类型 如何触发 什么事件 比如鼠标点击，鼠标经过，还是鼠标按下
//事件处理程序 通过一个函数赋值的方式完成
btn.onclick = function() {
  alert('你好吗'); 
};

三.执行事件的步骤

1. 获取事件源

2. 注册事件（绑定事件）

3. 添加事件处理程序（采取函数赋值形式）

4. 常见的鼠标事件

例如：
下拉菜单三要素：

• 事件源：下拉按钮
• 事件类型：鼠标点击或者经过
• 事件处理程序：显示表单