DOM 扩展
1. 选择符API
Selectors API 使浏览器原生支持CSS查询
- querySelector
// body元素
document.querySelector("body");
// 根据id
document.querySelector("#content");
// 类名为bd的第一个元素
document.querySelector(".bd");
// 取得类为“button”的第一个图像元素
document.body.querySelector('img.button');
- querySelectorAll
与querySelector类似,返回值为对象列表
2. 元素属性
var div = document.getElementsById("myDiv")
div.childElementCount // 返回子元素的个数
div.firstElementChild
div.lastElementChild
div.previousElementSibling
div.nextElementSibling
3. HTML5
3.1 类的操作扩充
- getElementsByClassName
// 可以同时多个类名
document.getElementsByClassName("class1 class2")
- classList 属性
var test = document.getElementById("test");
// 增加
test.classList.add("newClass");
// 删除
test.classList.remove("oldClass");
// 存在则删除,不存在则添加
test.classList.toggle("class");
//判断是否包含
test.classList.contains("class");
//替换
test.classList.remove("oldClass");
test.classList.add("newClass");
3.2 焦点管理
- 获取焦点
var test = document.getElementById("test");
test.focus()
- 检测是否获取了焦点, 知道用户是否正在与页面交互
document.hasFocus() // bool
3.3 HTMLDocument 的变化
- readyState 属性
// loading - 正在加载文档
// complete - 已经加载完成
document.readyState
3.4 插入标记
- innerHTML
- 通过innerHTML直接插入<script>
元素在大多数浏览器中并不会执行其中的脚本;
- 通过innerHTML直接插入<style>
在一些浏览器中无效。
var div = document.getElementsByTagName("div")[0]
div.innerHTML = "HTML代码"
- outerHTML
- innerText / outerText
innerText和outerText在获取时是相同效果, 都是获取标签中的文字