DOM扩展

来源：互联网发布：怎么通过mac地址查ip 编辑：程序博客网时间：2024/06/17 01:31

背景

尽管DOM作为API已经非常完善了，但为了实现更多功能，仍然会有一些标准或者专有的扩展。

1、选择符API

querySelector()返回与该模式匹配的第一个元素

querySelectorAll()返回一个NodeList实例Class

2、元素遍历Element Travesal API

childElementCount：返回子元素（不包括文本节点和注释）的个数

firstElementChild：指向第一个子元素

lastElementChi;d：指向最后一个子元素

previousElementChild：指向前一个同辈元素

nextElementSibling：指向后一个同辈元素

3、HTML5

3.1与类相关的扩充

getElementsByClassName()

classList属性

classList属性时新集合类型DOMTokenList的实例，

DOMTokenList有一个表示自己包含多少元素的length属性

DOMTokenList实例还定义了如下方法

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

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

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

toggle(value)：如果列表中已存在给定的值，删除它；如果列表中没有给定的值，添加它。

通过DOMTokenList实例的以上方法修改类名，可以保证其他类名不受此次修改的影响，还能减少类似操作的复杂性

eg:div.classList.remove("user")删除div对象的user类

3.2焦点管理

元素获得焦点的方式：页面加载；用户输入（Tab）；focus()方法

document.activeElement属性，始终引用DOM中当前获得了焦点的元素

页面加载完成时，document,activeElement中保存的是document,body

页面加载过程中，document.activeElement中保存的是null

document.hasFocus()确定是否获得了焦点

3.3HTMLDocument的变化

readyState属性

loading,正在加载文档

complete，已经加载完文档

使用document.readyState最恰当的方式是通过它来实现一个指示文档已经加载完的指示器。在这个属性得到广泛支持前，必须借助onload时间处理程序

设置一个标签，表示文档已经加载完毕

兼容模式

IE为document添加了一个名为conpatMode的属性

标准模式下，compatMode的值为CSS1Compat

混在模式下,compatMode的值为BackCompat

head属性

HTML5新增了document.head属性，引用文档的<head>元素，要引用文档的<head>元素，可以结合使用这个属性的另一种后背方法

var head = document.head||document.getElementByTagName("head")[0];

3.4字符集属性

HTML5新增了几个与字符集有关的属性

charset属性表示文档实际使用的字符集，也可以用来指定新字符集，默认情况下，这个属性的值为“UTF-16”，但是可以通过<meta>元素，响应头或者直接设置charset

属性修改这个值

document.charset = "UTF-8"

defaultCharset，表示默认浏览器及操作系统设置，当前默认的字符集应该是什么，如果使用的不是默认字符集，则charset和defaultCharset的值可能不一样

3.5自定义数据属性

HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息，

添加了自定义属性之后，可以通过元素的dataset属性来访问自定义属性，只需要去掉对应的data-前缀即可

var div = document.getElementById("myDiv");

var myName = div.dataset.myname

</script>

3.6插入标记

innerHTML属性（不同浏览器返回的文本格式会有所不同，如，空格及大小写的处理，所以，不要指望所有浏览器返回的innerHTML值完全相同）

在默认模式下，innerHTML的我值会被解析为DOM子树。如果设置的值仅是文本，么有HTML标签，那么结果就是设置的纯文本

outerHTML属性，作用同innerHTML，不同的是outerHTML在取代时，包括调用对象自身，而innerHTML在取代时，仅去掉调用对象的子节点

insertAdjacentHTML()方法，接收两个参数，插入位置和要插入的HTML文本

insertAdjacentHTML插入位置的取值

beforebegin：在当前元素之前插入一个紧邻的同辈元素

afterbegin：在当前元素之下插入一个新的子元素或在第一个子元素之前在插入新的子元素

beforeend：在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素

afterend：在当前元素之后插入一个紧邻的同辈元素

记忆方法：前面的before、after表示相对位置，后面的begin、end表示当前元素的HTML标签的开始标签和结束标签

内存与性能问题

在使用前述某个属性将元素从文档树删除之后，元素与事件处理程序之间的绑定关系在内存中并没有一并删除，如果这种情况频繁出现，

页面占用的内存数量就会明显增加。因此，在使用innerHTML、outerHTML和insertAdjacentHTML时，最好先手工删除要被替换的元素的

所有是哪处理程序和JavaScript对象属性

在插入大量新HTML标记时，使用innerHTML属性比多次DOM操作先创建节点再指定它们之间的关系，效率高得多

但是，创建和销毁HTML解析器会带来新能损失，所以最好控制innerHTML和outerHTML的次数在合理的范围内，

比如，对于循环，可以单独构构建字符串，然后再一次性地将结果字符串赋值给innerHTML

3.7scrollIntoView()方法

通过浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入true参数，或者不传入任何参数，

那么窗口滚动之后会让调用元素的顶部与视口的顶部尽可能平齐。如果传入false参数，调用元素会尽可能全部出现在视口中，

注意：这个方法调用对象和作用对象是同一个对象

4、专有扩展

在发现某项功能缺失时，开发商都向DOM中添加专有扩展，以弥补功能上的不足

4.1文档模式

IE8引入了文档模式，文档模式决定了可以使用哪个级别的CSS，可以在JavaScript中使用哪些API，以及如何对待文档类型

总共有4种文档模式

IE5：以混杂模式渲染页面

IE7：以IE7标准模式渲染页面
IE8：以IE8标准模式渲染页面，可以使用Selectors AP、更多CSS2级选择符合某些CSS3，还有一些HTML5

IE9：以IE9标准模式渲染页面

要强制浏览器以某种模式渲染页面，可以使用HTTP头部信息X-UA-Compatible，或者等价的<meta>标签来设置

IEVersion的取值

Edge:始终以最新的文档模式来渲染页面，忽略文档类型声明

EmulateIE9:如果有文档类型声明，则以IE9标准模式渲染页面，否则将文档模式设置为IE5

EmulateIE8：如果有文档类型声明，则以IE8标准模式渲染页面，否则将文档模式设置为IE5

EmulateIE7：如果有文档类型声明，则以IE7标准模式渲染页面，否则将文档模式设置为IE5

9:强制以IE9标准模式渲染页面，忽略文档类型声明

8:强制以IE8标准模式渲染页面，忽略文档类型声明

7:强制以IE7标准模式渲染页面，忽略文档类型声明

5:强制以IE5标准模式渲染页面，忽略文档类型声明

4.2children属性

由于IE9之前与其他浏览器在处理文本节点中的空白符时有差异，故出现了children属性

children属性只返回元素节点

IE9之后，childNodes属性也只返回元素节点，不再包括空白节点等

4.3contains()方法

调用contains方法的应该是祖先节点，这个方法接收一个参数，即要检测的后代节点，如果是后代节点，返回true，否则返回false

alert(document.documentElement.contains(document.body));//true

DOM3中compareDocumentPosition()也能确定节点间的关系

掩码节点关系

1 无关

2 居前（给定的节点再DOM树中位于参考节点之前）

4 居后

8 包含

16 被包含

compareDocumentPosition()方法怎么用呢？有重叠部分？

4.4插入文本（IE专有）

innerText

设置InnerHTML永远只会生成当前节点的一个子文本节点，而为了确保只生成一个子文本节点，就必须要对文本进行HTML编码。

利用这一点，可以通过innerText属性过滤掉HTML标签。方法是将innerText设置为等于innerText，这样就可以去掉所有HTML标签

div.innerText = div.innerText

执行这行代码后，就用原来的文本内容替换了容器元素中所有内容（包括子节点，因而也就去掉了HTML标签）

outerHTML

4.5滚动

在HTML5将scrollIntoView()纳入规范之后，仍然有其他几个专有方法可以在不同的浏览器中使用

下面给出的几个方法都是对HTMLElement类型的扩展，因此可以在所有元素中使用

scrollIntoViewIfNeeded(alignCenter)

scrollByLines(lineCount)

scrollByPages(pageCount)

注意：scrollIntoView()和scrollIntoViewIfNeeded()作用对象都是元素的容器

scrollByLines()和scrollByPages()影响的则是元素自身

阅读全文

0 0