JavaScript高级程序设计（第三版）学习笔记第11章

DOM 扩展

1. 选择符API

Selectors API 使浏览器原生支持CSS查询

1. querySelector

	// body元素
	document.querySelector("body");
	// 根据id
	document.querySelector("#content");
	// 类名为bd的第一个元素
	document.querySelector(".bd");
	// 取得类为“button”的第一个图像元素
	document.body.querySelector('img.button');

2. querySelectorAll
   与querySelector类似，返回值为对象列表

2. 元素属性

var div = document.getElementsById("myDiv")
div.childElementCount	//	返回子元素的个数
div.firstElementChild
div.lastElementChild
div.previousElementSibling
div.nextElementSibling

3. HTML5

3.1 类的操作扩充

1. getElementsByClassName

	// 可以同时多个类名
	document.getElementsByClassName("class1 class2")

2. 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 焦点管理

1. 获取焦点

	var test = document.getElementById("test");
	test.focus()

2. 检测是否获取了焦点, 知道用户是否正在与页面交互

	document.hasFocus() // bool

3.3 HTMLDocument 的变化

1. readyState 属性

	// loading - 正在加载文档
	// complete - 已经加载完成
	document.readyState

3.4 插入标记

1. innerHTML
   - 通过innerHTML直接插入<script>元素在大多数浏览器中并不会执行其中的脚本；
   - 通过innerHTML直接插入<style>在一些浏览器中无效。

	var div = document.getElementsByTagName("div")[0]
	div.innerHTML = "HTML代码"

2. outerHTML
3. innerText / outerText
   innerText和outerText在获取时是相同效果, 都是获取标签中的文字