DOM节点类型-Document类型

什么是Document类型?

JavaScript通过 Document 类型表示文档。在浏览器中,document 对象是 HTMLDocument(继承自 Document 类型)的一个实例,表示整个 HTML页面。而且,document 对象是 window 对象的一个 属性,因此可以将其作为全局对象来访问。

Document节点特征

  • nodeType 的值为 9;
  • nodeName 的值为"#document";
  • nodeValue 的值为 null;
  • parentNode 的值为 null;
  • ownerDocument 的值为 null;
  • 其子节点可能是一个 DocumentType(最多一个)、Element(最多一个)、ProcessingInstruction 或 Comment。

文档的子节点

Document 节点的子节点可以是文 DocumentType(文档类型)、Element(元素)、ProcessingInstruction 或 Comment(注释)。
内置访问节点的快捷方式:

  • documentElement属性指向<html>元素。
  • 通过 childNodes 列表访问文档元素
  • document.body 属性指向<body>元素。

doctype 属性:
通常将<!DOCTYPE>标签看成一个与文档其他 部分不同的实体,可以通过 doctype 属性(在浏览器中是 document.doctype)来访问它的信息。
例如:

var doctype = document.doctype;     //取得对<!DOCTYPE>的引用 

由于浏览器对 document.doctype 的支持不一致,因此这个属性的用处很有限。

文档信息

title属性:
属性title,包含着 <title>元素中的文本——显示在浏览器窗口的标题栏或标签页上。通过这个属性可以取得当前页面的标题,也可以修改当前页面的标题并反映在浏览器的标题栏中。

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button>移动</button>
<script>
    //获取标题
    var title = document.title;
    console.log(title);  //Document
    //修改标题
    document.title = "hello";
    console.log(document.title);  //hello
</script>
</body>
</html>

URL、domain 和 referrer属性:
URL 属性中包含页面完整的 URL(即地址栏中显示的 URL),domain 属性中只包含页面的域名,而 referrer 属性中则保存着链接到当前页面的那个页面的 URL。在没有来源页面的情况下,referrer 属性中可能会包含空字符串。

在这 3个属性中,只有 domain 是可以设置的。但由于安全方面的限制,也并非可以给 domain 设置任何值。如果 URL中包含一个子域名,例如 p2p.wrox.com,那么就只能将 domain 设置为"wrox.com" 。不能将这个属性设置为 URL 中不包含的域。

当页面中包含来自其他子域的框架或内嵌框架时,通过将每个页面的 document.domain 设置为相同的值,这些页面就可以互相访问对方包含的 JavaScript 对象了。

浏览器对 domain 属性还有一个限制,即如果域名一开始是“松散的”(loose),那么不能将它再设 置为“紧绷的”(tight)。换句话说,在将 document.domain 设置为"wrox.com"之后,就不能再将其 设置回"p2p.wrox.com",否则将会导致错误。

查找元素

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

getElementsByName()方法
这个方法会返回带有给定 name 特性的所有元素。getElementsByName()方法也会返回一个 HTMLCollectioin。常使用 getElementsByName()方法的情况是取得单选按钮;为了确保发送给浏览器的值正确无误,所有单选按钮必须具有相同的 name 特性,对于这里的单选按钮来说,namedItem()方法则只会取得第一项。

getElementsByTagName() 方法
这个方法接受一个参数,即要取得元素的标签名,而返回的是包含零或多个元素的 NodeList。

这个方法会返回一个 HTMLCollection 对象,作为一个“动态”集合,该对象与 NodeList 非常类似。

获取HTMLCollection 对象中的项:

  • 可以使用方括号语法或 item()方法来访问 HTMLCollection 对象中的项。而这个对象中元素的数量则可以通过其 length 属性取得。

  • HTMLCollection 对象还有一个方法,叫做 namedItem(),使用这个方法可以通过元素的 name 特性取得集合中的项。

  • 在提供按索引访问项的基础上,HTMLCollection 还支持按名称访问项,这就为我们取得实际想要的元素提供了便利。而且,对命名的项也可以使用方括号语法来访问,如下所示:
    var myImage = images[“myImage”];

对 HTMLCollection 而言,我们可以向方括号中传入数值或字符串形式的索引值。在后台,对数值索引就会调用 item(),而对字符串索引就会调用 namedItem()。

要想取得文档中的所有元素,可以向 getElementsByTagName()中传入"*"。*在 JavaScript及 CSS 中,星号*(*)通常表示“全部”。下面看一个例子。

var allElements = document.getElementsByTagName("*"); 

仅此一行代码返回的 HTMLCollection 中,就包含了整个页面中的所有元素。

特殊集合

  • document.anchors,包含文档中所有带 name 特性的<a>元素; 
  • document.applets,包含文档中所有的元素,因为不再推荐使用元素, 所以这个集合已经不建议使用了; 
  • document.forms,包含文档中所有的元素,与document.getElementsByTagName(“form”) 得到的结果相同; 
  • document.images,包含文档中所有的元素,与 document.getElementsByTagName (“img”)得到的结果相同; 
  • document.links,包含文档中所有带 href 特性的<a>元素。 这个特殊集合始终都可以通过 HTMLDocument 对象访问到,而且,与 HTMLCollection 对象类似, 集合中的项也会随着当前文档内容的更新而更新。

DOM一致性检测

由于 DOM分为多个级别,也包含多个部分,因此检测浏览器实现了 DOM的哪些部分就十分必要了。document.implementation 属性就是为此提供相应信息和功能的对象。

文档写入

有一个 document 对象的功能已经存在很多年了,那就是将输出流写入到网页中的能力。这个能力体现在下列 4个方法中:write()、writeln()、open()和 close()。其中,write()和 writeln() 方法都接受一个字符串参数,即要写入到输出流中的文本。write()会原样写入,而 writeln()则会 在字符串的末尾添加一个换行符(\n)。在页面被加载的过程中,可以使用这两个方法向页面中动态地加入内容,如下面的例子所示。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值