目录
DOM树获取元素
2.1 根据ID对象
2.2 根据标签名获取
2.3 通过H5新增的方法获取(不考虑兼容用这个最好)
2.4 获取特殊的元素事件基础
3.1 事件概述
3.2 事件三要素
3.3 事件执行的步骤
正文
DOM
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可拓展标记语言(HTML或者XML)的标准编程接口
DOM树 文档:一个页面就是一个文档,DOM中使用document表示元素:页面中所有的标签都是元素,DOM中使用element表示节点:网页中所有的内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
DOM把以上内容都当做是对象
获取元素
2.1 根据ID对象
使用getelementById获得
参数
element是一个 Element 对象。如果当前文档中拥有特定ID的元素不存在则返回null.
id是大小写敏感的字符串,代表了所要查找的元素的唯一ID.
返回值
返回一个匹配到 ID 的 DOM Element 对象。若在当前 Document 下没有找到,则返回 null。
例子:
Console.dir();方法
打印返回的元素对象,更好的查看里面的属性和方法
2.2 根据标签名获取
语法:
elements 是一个由发现的元素出现在树中的顺序构成的动态的HTML集合 HTMLCollection (但是看下面的提示) 。name 是一个代表元素的名称的字符串。特殊字符 “*” 代表了所有元素。var elements = document.getElementsByTagName(name);
注意:
最新的 W3C 规范 说明这些元素是 HTMLCollection(HTML集合); 然而, 这个方法在WebKit内核的浏览器中返回一个 NodeList 。
这样做会获取文档中所有叫这个标签的元素,但是往往我们只要特定的一些,这时,我们要先获取这些元素的父元素再通过ele.getElementsByTagName()的方式获取我们要的
var nav = document.getElementById("nav");var navList = nav.getElementsByTagName("li");console.log(navList);
2.3 通过H5新增的方法获取(不考虑兼容用这个最好)
getElementByClassName(‘类名’);
根据类型获取某些元素的集合
var box = document.getElementsByClassName("box");console.log(box);
结果:
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.1 事件概述
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。
简单理解:触发—响应机制。
网页中的每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击一个按钮后产生一个事件,然后去执行某些操作。
3.2 事件三要素
事件是由三部分组成(事件三要素) 事件源 事件类型 事件处理程序
a.事件源 事件被触发的对象 谁 按钮
b. 事件类型 如何触发 比如说鼠标点击、鼠标经过
c.事件处理程序 通过一个函数赋值的方式完成
例:
// 匿名函数赋值的方式btn.onclick = function() {alert('点');}
3.3 事件执行的步骤
获取事件源注册事件(绑定事件)添加事件处理程序(添加函数赋值形式)