啥是Document类型

☆ 文档的子节点

Document类型可以表示HTML页面或者其他基于XML的文档。
不过,最常见的应用还是作为HTMLDocument实例的document对象。
通过这个文档对象,
不仅可以取得与页面有关的信息,
而且还能操作页面的外观及其底层结构。

虽然DOM标准规定Document节点的子节点可以是
DocumentType
Element
ProcessingInstruction
Comment

但还有两个内置的访问其子节点的快捷方式。

第一个就是documentElement属性
该属性始终指向HTML页面中的元素。

另一个就是通过childNodes列表访问文档元素,
但通过documentElement属性则能更快捷、更直接地访问该元素。

作为HTMLDocument的实例,
document对象还有一个body属性
直接指向元素。
因为开发人员经常要使用这个元素,
所以document.body在JavaScript代码中出现的频率非常高,


☆ 查找元素

说到最常见的DOM应用,
恐怕就要数取得特定的某个或某组元素的引用,
然后再执行一些操作了。

取得元素的操作可以使用document对象的几个方法来完成。
其中,
Document类型为此提供了两个方法:
getElementById()getElementsByTagName()。

◇ 第一个方法

第一个方法
getElementById(),接收一个参数:
要取得的元素的ID。
如果找到相应的元素则返回该元素,
如果不存在带有相应ID的元素,
则返回null。
注意,
这里的ID必须与页面中元素的id特性(attribute)严格匹配,
包括大小写。

IE8及较低版本不区分ID的大小写,
因此”myDiv”和”mydiv”会被当作相同的元素ID。

如果页面中多个元素的ID值相同,
getElementById()只返回文档中第一次出现的元素。
IE7及较低版本还为此方法添加了一个有意思的“怪癖”:
【name特性与给定ID匹配的表单元素】也会被该方法返回。
(、、及)
如果有哪个表单元素的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。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值