DOM事件扩展

选择符API(Selectors API)

querySelector();方法

querySelector();方法:接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到返回null

1
2
3
4
5
6
// 通过元素名
var body = document.querySelector("body");
// 通过ID
var myDiv = document.querySelector("#myDiv");
// 通过类名
var btn = document.querySelector(".btn");

通过Document类型调用该方法时,会在文档元素的范围内查找匹配的元素。

通过Element类型调用该方法时,只会在该元素的后代元素范围内查找匹配元素。

querySelectorAll();方法

querySelectorAll();方法 :接收一个CSS选择符,返回一个NodeList实例。

使用方法与querySelector();方法大致相同

matchesSelector();方法

matchesSelector();方法:接收一个CSS选择符,如果调用元素与该选择符匹配,返回true

元素遍历(Element Traversal API)

Element Traversal APIDOM元素添加的5个属性:

  • childElementCount:返回子元素(不包括文本节点和注释)的个数。
  • firstElementChild:指向第一个子元素;firstChild的元素版
  • lastElementChild:指向最后一个子元素;lastChild的元素版
  • previousElementSibling:指向前一个同辈元素;previousSibling元素版
  • nextElementSibling:指向后一个同辈元素;nextSibling元素版

HTML5

与类相关的扩容:

getElementsByClassName(classnames);方法:传入一个或多个类名为参数,返回对象为NodeList。

classList属性:获取元素所有的class名,并以数组的形式返回。

  • add(value):将给定的字符串添加到列表中,如果已存在则不添加。
  • contains(value):表示列表中是否存在给定的值,如果存在返回true
  • remove(value):从列表中删除给定的字符串
  • toggle(value):如果列表有给定的值,则删除;如果没有,则添加

焦点管理

focus();方法:使元素获取焦点

document.activeElement属性:返回DOM中当前获得了焦点的元素,没有返回null

document.hasFocus();方法:判断元素是否获得了焦点

HTMLDocument的变化

readyState属性:

document.readyState属性:检查文档是否加载完毕。

  • loading:正在加载文档
  • complete:已经加载完文档
兼容模式:

document.readyState属性:区分渲染页面的模式是标准的还是混杂的

  • CSSCompt:标准模式
  • BackCompt:混杂模式
head属性:

document.head属性:引用文档元素的补充。

仅Chrome和Safari5支持

字符集属性

document.charset属性:设置文档字符集属性,等同于标签下的charset属性。

例:document.charset = 'UTF-8'

document.defaultCharset属性:根据默认浏览器和操作系统设置,当前文档的默认字符集。

自定义数据属性

HTML5可以为元素添加非标准属性,但是要添加前缀data-

访问和定义自定义属性的值:元素的dataset属性。

1
2
3
4
5
6
7
8
<div id="myDiv" data-myName="Xuchao">
<script>
var div = document.getElementById("#myDiv");
// 获取自定义属性的值
var data = div.dataset.myName; //data="Xuchao"
// 设置自定义属性的值
div.datasetmyName = "Chaoge";
</script>

插入标记

innerHTML属性:

用于子元素创建新的DOM树或返回子节点对应的HTML标记。

  • 读模式:会返回子元素下所有的HTML标记。
  • 写模式:会根据指定的值创建新的DOM树,替换所有的子节点。

设置innerHTML后在从中读取HTML字符串,会得到与设置时不一样的值。原因在于用于返回的字符串是根据原始HTML字符串创建的DOM树经过序列化之后的结果。

插入

客官里面请~