DOM

定义

根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点：

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

元素操作

获取元素

1
2
3
4
5
6
7
8
9
10
11
12
13
document.getElementById("time");        // 根据ID获取标签，return：一个对象
document.getElementsByTagName("li")     // 根据标签名获取标签，return：对象数组
document.getElementsByClassName("box")  //根据class获取标签，return：对象数组
document.querySelector(str)             //str=".box",str="li",str="#time"，返回选择器的第一个元素，传递规则和css一样
document.querySelectorAll(str)          //与面不同的是，返回所有查询的对象数组
document.body                           //获取dbody元素
document.documentElement                //获取html（整个网页）


document.querySelector('p').innerText   //获取p的内容，不识别内容中嵌套的标签，去除空格和换行
document.querySelector('p').innerHTML   //获取p的内容，识别嵌套的标签(原封不动)，包含空格和换行

document.querySelector('img').title = '这是img的title'  //修改元素属性，其他同

事件

事件三要素：事件源，事件类型，处理程序

1
2
3
4
btn.onclick = function(){
  this.disabled =  true     // 处理程序中的this指向世间源btn
  this.display = 'none'
}