document 学习笔记

一、概述
document 对象是文档的根节点每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用。
document对象有不同的办法可以获取。

			正常的网页,直接使用document或window.document。
			iframe框架里面的网页,使用iframe节点的contentDocument属性。
			Ajax 操作返回的文档,使用XMLHttpRequest对象的responseXML属性。
			内部节点的ownerDocument属性。

document对象继承了EventTarget接口、Node接口、ParentNode接口。这意味着,这些接口的方法都可以在document对象上调用。除此之外,document对象还有很多自己的属性和方法。
二、属性
2.1 快捷方式属性
以下属性是指向文档内部的某个节点的快捷方式。
(1)document.defaultView
document.defaultView属性返回document对象所属的window对象。如果当前文档不属于window对象,该属性返回null。

document.defaultView === window // true

(2)document.doctype
对于 HTML 文档来说,document对象一般有两个子节点。第一个子节点是document.doctype,指向节点,即文档类型(Document Type Declaration,简写DTD)节点。HTML 的文档类型节点,一般写成。如果网页没有声明 DTD,该属性返回null。
(3)document.documentElement
document.documentElement属性返回当前文档的根节点(root)。它通常是document节点的第二个子节点,紧跟在document.doctype节点后面。HTML网页的该属性,一般是节点。
(4)document.body,document.head
document.body属性指向节点,document.head属性指向节点。
这两个属性总是存在的,如果网页源码里面省略了或,浏览器会自动创建。另外,这两个属性是可写的,如果改写它们的值,相当于移除所有子节点。
(5)document.scrollingElement
document.scrollingElement属性返回文档的滚动元素。也就是说,当文档整体滚动时,到底是哪个元素在滚动。

// 页面滚动到浏览器顶部
document.scrollingElement.scrollTop = 0;

(6)document.activeElement
document.activeElement属性返回获得当前焦点(focus)的 DOM 元素。通常,这个属性返回的是、、等表单元素,如果当前没有焦点元素,返回元素或null。
(7)document.fullscreenElement
document.fullscreenElement属性返回当前以全屏状态展示的 DOM 元素。如果不是全屏状态,该属性返回null。

if(documet.fullscreenElement.nodeName == 'VIDEO'){
	console.log('全屏播放视频');
}

2.2节点集合属性
以下属性返回一个HTMLCollection实例,表示文档内部特定元素的集合。这些集合都是动态的,原节点有任何变化,立刻会反映在集合中。
(1)document.links
document.links属性返回当前文档所有设定了href属性的及节点。

var links = document.links;
for(var i = 0; i<links.length;i++){
	console.log(links[i]);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

是十年是思念

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值