DOM的扩展

最新推荐文章于 2022-03-24 17:51:24 发布

肉肉是超人会飞

最新推荐文章于 2022-03-24 17:51:24 发布

阅读量412

点赞数

本文链接：https://blog.csdn.net/wurourouzhang/article/details/85641570

版权

1. 选择符API：

核心的方法：querySelector(CSS选择符)、querySelectorAll(CSS选择符)和matchesSelector()。可以通过Document（会在文档范围内查找匹配元素）和Element（在该元素的后代元素的范围内查找匹配元素）类型的实例调用。

① querySelector()：返回与该模式（CSS选择符）匹配的第一个元素，如果没有找到匹配的元素，就返回空。

② querySelectorAll()：返回与该模式（CSS选择符）匹配的一个NodeList的实例--迭代时要注意，如果没有找到匹配的元素，就返回空的NodeList。

③ matchesSelector()：如果调用元素与该选择符匹配，则返回true，否则返回false

myDiv.matchesSelector(".red")-----现在的浏览器都有自己的函数，前面带有前缀。

2. 针对IE9及之前的版本不会返回文本节点，而其余浏览器都会返回文本节点的应对办法。

为DOM元素新定义了一些属性：

① childElementCount：返回子元素的个数（不包含文本节点）

② firstElementChild：指定第一个子元素（不包含文本节点即firstChild的元素版）

③ lastElementChild：指定最后一个子元素（不包含文本节点即lastChild的元素版）

④ previousElementSibling：指向前一个同辈元素（不包含文本节点即previousSibling的元素版）

⑤ nextElementSibling：指向后一个同辈元素（不包含文本节点即nextSibling的元素版）

3. HTML5的部分新功能

① getElementsByClassName() 方法：可以通过document及所有的HTML元素调用该方法。该方法接收一个参数---即包含一个或多个类名的字符串，返回带有指定类的所有元素的NodeList。

② classList属性：该属性是新集合类型DOMTokenList的实例。取得每个元素可以使用方括号语法或者调用item()方法。火狐3.6+和谷歌浏览器支持

包含length属性（表示自己包含多少个元素）和以下几个方法：

add(value)：将给定的字符串添加到列表中，如果值已经存在就不添加

contains(value)：表示列表中是否存在给定的值。存在返回true，不存在返回false

remove(value)：从列表中删除给定字符串

toggle(value)：如果列表中已经存在给定值就删除他，不存在就添加他。

在以前不存在classList属性时，操作类名时，需要通过className属性添加、删除和替换类名。className是字符串，即使只修改字符串的一部分，也必须设置整个字符串。比如：

删除其中的一个属性很麻烦

使用新类型的方法：很方便

③ 焦点管理：document.activeElement属性---引用DOM中当前获得了焦点的元素。document.hasFocus()---确定文档是否获得了焦点。

元素获得焦点的方式有页面加载、用户输入（通常是按Tab键）、在代码中调用focus()方法。

在文档刚刚加载完成时，document.activeElement保存的是document.body元素的引用。文档加载期间，document.activeElement的值为null

④ readyState属性：HTMLDocument增加的新功能，document.readyState有两个值--loading（正在加载文档），complete（已经加载完文档）。该属性的作用是用来实现一个可以指示文档已经加载完成的指示器。比如：

if(document.readyState=="complete"){

//执行操作

}

⑤ 兼容模式：document.compatMode用来检测页面的渲染模式，值为CSS1Compat--标准模式，值为BackCompat--混杂模式

⑥ head属性：document.head用来引用head元素。引用head元素有两种方法，可以结合使用：

var h = dcument.head || document.getElementsByTagName("head")[0];

⑦ 字符集属性：

document.charset属性---表示文档中实际使用的字符集，也可以用来指定新的字符集。如果有默认值，那么该值为UTF-16。

document.defaultCharset属性--根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。

⑧ 自定义数据属性：为了为元素提供与渲染无关的信息，或者提供语义信息，可以为元素添加非标准属性（但要添加前缀data-）。添加完自定义属性之后，可以通过元素的dataset属性（dataset属性的值是DOMStringMap的一个实例，也就是一个名值对的映射。不过在这个映射中，属性名没有data-的前缀）来访问自定义属性的值。

⑨ innerHTML属性：读模式下--返回调用元素的所有子节点对应的HTML标记。写模式下--根据指定的HTML标记创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。

读模式下：

写模式下：

innerHTML属性的限制：

在大多数浏览器中，通过innerHTML插入<script>元素并不会执行其中的脚本（IE8及更早的版本是唯一能在这种情况下执行脚本的浏览器，但必须满足一些条件---1、必须为script元素指定defer【延迟脚本的执行】属性。2、script元素必须位于有作用域【在页面中可以看到的元素】）的元素之后。）script和style都是无作用域的元素。

IE8中无作用域的元素应该在有作用域的元素之后。比如：

div.innerHTML = "_<script defer>alert('hi');<\/script>";

div.innerHTML = "<div> </div><script defer>alert('hi');<\/script>";

div.innerHTML = "<input type=\"hidden\"><script defer>alert('hi');<\/script>"; //首选方法

无论什么时候，只要使用innerHTML从外部插入HTML，都应该首先以可靠的方式处理HTML。IE8为此提供了window.toStaticHTML()方法，这个方法接收一个参数即一个HTML字符串，返回一个经过无公害处理后的版本---即从源HTML中删除所有脚本节点和事件处理程序属性。