JS--DOM拓展

关于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属性:该属性是对文档中元素的引用。因为实现的浏览器并不多可以通过兼容写法: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。

你可能感兴趣的:(JS--DOM拓展)