关于DOM的内容实在是太丰富了，前面我们简单的介绍了DOM中关于DOM特性和内容还有DOM节点相关的知识点。其实主要的就是关于DOM1级的主要概念：其将HTML或XML形象的看成是一个层次化的节点树，可以通过JavaScript操作这个节点树，进而改变其外观和结构。接下来进一步拓展一下DOM相关的内容。
一、选择符拓展
以下的方法可以通过Document和Element类型的实例调用他们。
（1）document.querySelector()，level1，该方法接受一个CSS选择符，返回该模式匹配的第一个元素。如果没有则返回null。如果传入不被支持的CSS选择符则会报错。
（2）document.querySelectorAll()，level1，该方法和上面方法接受的参数是一样的，但是返回的不仅是一个元素，返回的是一个NodeList实例。具体来说，返回的值是带有所有属性和方法的NodeList。返回的仅仅是NodeList的快照，并不是动态查询的，这样避免了常见的性能问题。
（3）matchesSelector()，level2，该方法是level2级别的方法，是为Element类型新增的一个方法。这个方法接受一个参数（CSS选择符），如果调用元素和该选择符匹配则返回TRUE，否则返回FALSE。注意，该方法在很多浏览器上并未实现，注意使用。
二、元素遍历拓展
之前关于获得某个元素的子节点提供了一些方法，例如firstChild，lastChild，childNodes。关于节点之间的空格在IE9之前是不会当做文本节点返回的，但是在其他的浏览器中会当做一个文本节点返回。这样就导致了一些兼容性问题。接下来提供了一些新的方法可以使用，这样可以避免空白文本节点：
（1）childElementCount，返回子元素的个数，不包括文本节点和注释节点。
（2）firstElementChild，指向的是第一个子元素，是firstChild的元素版。
（3）lastElementChild，指向的是最后一个子元素，是lastChild的元素版。
（4）previousElementSibiling，指向前一个同辈元素，是previousSibling的元素版。
（5）nextElementSibling，指向是下一个同辈元素，是nextSibling的元素版。
三、HTML5关于DOM的拓展
（1）getElementsByClassName()，该方法可以通过所有的HTML元素或者document对象进行调用。该方法接受一个参数，即一个包含一个或者多个类名的字符串，返回带有指定类的所有NodeList，传入多个类时，顺序不重要。
（2）classList属性，所有元素都具有这个属性，这个也是一个类数组，具有length属性可以通过item()方法进行访问。此外该属性还有以下方法：（支持该属性的浏览器貌似有FF3.6和chrome）
add(value) :将给定的value添加到列表中，如果存在则不添加。
contains(value):表示列表中是否存在value，如果存在则返回TRUE，否则返回FALSE。
remove(value):从列表中删除给定的value 。
toggle(value): 如果列表中有value则删除，如果没有的话则添加。
------华丽的分割线-------
四、焦点管理
（1）document.activeElement属性，这个属性始终会引用DOM中当前获得了焦点的元素。默认情况下，当文档加载完毕后，该属性中保存的是document.body元素。在加载期间其值为null。
（2）document.hasFocus()方法，该方法用来确定文档或者元素是否获得了焦点。通过这个方法可以判断用户是否正在和页面进行交互操作。
五、HTMLDocument新变化
（1）document.readyState属性：该属性可以用来判断文档是否加载完成，其有两个值。第一，loading表示正在加载文档。第二，complete表示已经加载完成文档。
（2）document.compatMode属性：可以用来检测页面的模式是标准模式还是混杂模式，在标准模式下该属性的值为'CSS1Compat'，在混杂模式下该属性的值为'BackCompat'。
（3）document.head属性：该属性是对文档中<head>元素的引用。因为实现的浏览器并不多可以通过兼容写法：document.head || document.getElementsByTagName('head')[0]。
六、自定义数据的属性
我们知道在HTML5中可以为元素添加自定义属性，其格式为data-name的格式，name是自己进行命名的。
（1）element.dataset属性：我们可以通过元素获得dataset属性，该属性包括的是自定义属性的一个键值对，是一个DOMStringMap的实例。例如：
var box = document.getElementById('id');
var appid = box.dataset.appid;//取得属性为data-appid的值
box.dataset.appid = 12345; //设置自定义属性data-appid的值。
七、专有扩展
（1）文档模式：在IE8中引入这个概念表示页面可以用什么级别的CSS，可以用JavaScript的哪些API。要强制浏览器已某种模式进行渲染，可以使用HTTP头部信息X-UA-Compatible或者通过等价的meta头部进行设置。
（2）children属性：之前关于处理文本节点中的空白有差异，这里出现了children属性，这个属性也是HTMLCollection的实例。只包含元素中同样还是元素的节点。
（3）contains()方法：该方法可以判断某个节点是不是另一个节点的后代。IE是第一个引入该方法的。调用该方法的应该是祖先节点。接受的参数是检测的后代节点。如果检测到了返回TRUE否则返回FALSE。
网友评论