DOM

DOM 树

获取元素

使用 ID 选取

使用 var element = document.getElementById(id)； 来获取

使用标签名获取

var lis = document.getElementsByTagName（'li'）；

返回的是获取元素对象的集合，用伪数组形式存储

使用类名获取

注意：这里是 H5 兼容的

var boxs = document.getElementsByClassName（'box’）；

getElementsByClassName 返回的是元素的集合

querySelector 选择

querySelector 返回指定选择器的第一个元素对象

var firstBox = document.querySelector（'.box'）；

例如，里面是 .box 说明选择一个 class 选择器，选择一个 #xx 说明选择一个 id 选择器

querySelectorAll 返回的是所有元素对象的集合

获取 body

document.body

获取 html

document.documentElement

事件

事件就是一种 触发 - 相应 的机制

事件三要素：

• 事件源：事件被触发的对象
• 事件类型：如何触发（鼠标点击...）
• 事件处理程序：

var btn = document.querySelector('button');
    btn.onclick = function(){
        alert('Hello World');
    }

操作元素

element.innerHTML

element.innerText

• innerHTML 能识别 HTML 标签
• innerText 不能识别 HTML 标签

使用 对象名.属性 = ... 可以改变属性的值