DOM学习之获取元素及事件基础（附实例、源码）

目录

1. DOM树
2. 获取元素
   2.1 根据ID对象
   2.2 根据标签名获取
   2.3 通过H5新增的方法获取（不考虑兼容用这个最好）
   2.4 获取特殊的元素
3. 事件基础
   3.1 事件概述
   3.2 事件三要素
   3.3 事件执行的步骤

正文

DOM

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可拓展标记语言（HTML或者XML）的标准编程接口

1. DOM树

• 文档：一个页面就是一个文档，DOM中使用document表示
• 元素：页面中所有的标签都是元素，DOM中使用element表示
• 节点：网页中所有的内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都当做是对象

2. 获取元素

2.1 根据ID对象

使用getelementById获得

• 参数
  element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
  id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.

• 返回值
  返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到，则返回 null。

例子：

• Console.dir();方法
  打印返回的元素对象，更好的查看里面的属性和方法

2.2 根据标签名获取

语法：

var elements = document.getElementsByTagName(name);

• elements 是一个由发现的元素出现在树中的顺序构成的动态的HTML集合 HTMLCollection (但是看下面的提示) 。
• name 是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。

注意:

最新的 W3C 规范 说明这些元素是 HTMLCollection（HTML集合）； 然而, 这个方法在WebKit内核的浏览器中返回一个 NodeList 。

这样做会获取文档中所有叫这个标签的元素，但是往往我们只要特定的一些，这时，我们要先获取这些元素的父元素再通过ele.getElementsByTagName()的方式获取我们要的

var nav = document.getElementById("nav");
var navList = nav.getElementsByTagName("li");
console.log(navList);

2.3 通过H5新增的方法获取（不考虑兼容用这个最好）

1. getElementByClassName(‘类名’);

根据类型获取某些元素的集合

var box = document.getElementsByClassName("box");
console.log(box);

结果：

2. document.querySelector(‘选择器’);

根据指定选择器返回第一个元素对象（注意加符号的记得加符号）

• 类

  var firstBox = document.querySelector('.box');
  console.log(firstBox);

• id

 var nav = document.querySelector('#nav');
 console.log(nav);

• 标签

var li = document.querySelector('li');
console.log(li);

3. document.querySelectorAll(‘选择器’);

根据指定选择器返回所有元素对象集合（伪数组）

var allBox = document.querySelectorAll('.box');
console.log(allBox);

2.4 获取特殊的元素

• 获取body元素

document.body

var bodyEle = document.body;
console.log(bodyEle);

• 获取HTML元素

document.documentElement

var htmlEle = document.documentElement;
console.log(htmlEle);

3. 事件基础

3.1 事件概述

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

简单理解：触发—响应机制。

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

3.2 事件三要素

事件是由三部分组成（事件三要素） 事件源 事件类型 事件处理程序

a.事件源 事件被触发的对象 谁 按钮

b. 事件类型 如何触发 比如说鼠标点击、鼠标经过

c.事件处理程序 通过一个函数赋值的方式完成

例：

    // 匿名函数赋值的方式
    btn.onclick = function() {
        alert('点');
    }

3.3 事件执行的步骤

• 获取事件源
• 注册事件（绑定事件）
• 添加事件处理程序（添加函数赋值形式）