Document类型
Posted 前端精髓
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Document类型相关的知识,希望对你有一定的参考价值。
1.文档的子节点
Document类型可以表示html页面或者其他基于XML的文档。不过,最常见的应用还是作为HTMLDocument实例的document对象。通过这个文档对象,不仅可以取得与页面有关的信息,而且还能操作页面的外观及其底层结构。
虽然DOM标准规定Document节点的子节点可以是DocumentType、Element、ProcessingInstruction或Comment,但还有两个内置的访问其子节点的快捷方式。第一个就是documentElement属性,该属性始终指向HTML页面中的<html>元素。另一个就是通过childNodes列表访问文档元素,但通过documentElement属性则能更快捷、更直接地访问该元素。
作为HTMLDocument的实例,document对象还有一个body属性,直接指向<body>元素。因为开发人员经常要使用这个元素,所以document.body在javascript代码中出现的频率非常高,
3.查找元素
说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用,然后再执行一些操作了。取得元素的操作可以使用document对象的几个方法来完成。其中,Document类型为此提供了两个方法:getElementById()和getElementsByTagName()。
第一个方法,getElementById(),接收一个参数:要取得的元素的ID。如果找到相应的元素则返回该元素,如果不存在带有相应ID的元素,则返回null。注意,这里的ID必须与页面中元素的id特性(attribute)严格匹配,包括大小写。
说到最常见的DOM应用,恐怕就要数取得特定的某个或某组元素的引用,然后再执行一些操作了。取得元素的操作可以使用document对象的几个方法来完成。其中,Document类型为此提供了两个方法:getElementById()和getElementsByTagName()。
第一个方法,getElementById(),接收一个参数:要取得的元素的ID。如果找到相应的元素则返回该元素,如果不存在带有相应ID的元素,则返回null。注意,这里的ID必须与页面中元素的id特性(attribute)严格匹配,包括大小写。
IE8及较低版本不区分ID的大小写,因此"myDiv"和"mydiv"会被当作相同的元素ID。
如果页面中多个元素的ID值相同,getElementById()只返回文档中第一次出现的元素。IE7及较低版本还为此方法添加了一个有意思的“怪癖”:name 特性与给定 ID匹配的表单元素(<input>、<textarea>、<button>及<select>)也会被该方法返回。如果有哪个表单元素的name特性等于指定的ID,而且该元素在文档中位于带有给定ID的元素前面,那么IE就会返回那个表单元素。
如果页面中多个元素的ID值相同,getElementById()只返回文档中第一次出现的元素。IE7及较低版本还为此方法添加了一个有意思的“怪癖”:name 特性与给定 ID匹配的表单元素(<input>、<textarea>、<button>及<select>)也会被该方法返回。如果有哪个表单元素的name特性等于指定的ID,而且该元素在文档中位于带有给定ID的元素前面,那么IE就会返回那个表单元素。
为了避免IE中存在的这个问题,最好的办法是不让表单字段的name特性与其他元素的ID相同。另一个常用于取得元素引用的方法是getElementsByTagName()。这个方法接受一个参数,即要取得元素的标签名,而返回的是包含零或多个元素的NodeList。在HTML文档中,这个方法会返回一个HTMLCollection对象,作为一个“动态”集合,该对象与NodeList非常类似。
对HTMLCollection而言,我们可以向方括号中传入数值或字符串形式的索引值。在后台,对数值索引就会调用item(),而对字符串索引就会调用namedItem()。
要想取得文档中的所有元素,可以向getElementsByTagName()中传入"*"。在JavaScript及CSS中,星号(*)通常表示“全部”。
第三个方法,也是只有HTMLDocument类型才有的方法,是getElementsByName()。顾名思义,这个方法会返回带有给定name特性的所有元素。最常使用getElementsByName()方法的情况是取得单选按钮;为了确保发送给浏览器的值正确无误,所有单选按钮必须具有相同的name特性,与getElementsByTagName()类似,getElementsByName()方法也会返回一个HTMLCollectioin。
以上是关于Document类型的主要内容,如果未能解决你的问题,请参考以下文章