Document节点

摘要:
概述document节点对象代表整个文档,每张网页都有自己的document对象。document对象有不同的办法可以获取。正常的网页,直接使用document或window.document。内部节点的ownerDocument属性。它通常是document节点的第二个子节点,紧跟在document.doctype节点后面。document.body,document.headdocument.body属性指向节点,document.head属性指向节点。document.activeElementdocument.activeElement属性返回获得当前焦点的DOM元素。注意,document.write会当作HTML代码解析,不会转义。document.querySelectorAll方法与querySelector用法类似,区别是返回一个NodeList对象,包含所有匹配给定选择器的节点。

概述

document节点对象代表整个文档,每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用。

document对象有不同的办法可以获取。

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

属性

以下属性是指向文档内部的某个节点的快捷方式。

(1)document.defaultView

document.defaultView属性返回document对象所属的window对象。如果当前文档不属于window对象,该属性返回null。

document.defaultView === window // true

(2)document.doctype

对于 HTML 文档来说,document对象一般有两个子节点。第一个子节点是document.doctype,指向<DOCTYPE>节点,即文档类型(Document Type Declaration,简写DTD)节点。HTML 的文档类型节点,一般写成<!DOCTYPE html>。如果网页没有声明 DTD,该属性返回null。

(3)document.documentElement

document.documentElement属性返回当前文档的根元素节点(root)。它通常是document节点的第二个子节点,紧跟在document.doctype节点后面。HTML网页的该属性,一般是<html>节点。

(4)document.body,document.head

document.body属性指向<body>节点,document.head属性指向<head>节点。

这两个属性总是存在的,如果网页源码里面省略了<head>或<body>,浏览器会自动创建。另外,这两个属性是可写的,如果改写它们的值,相当于移除所有子节点。

(5)document.scrollingElement

document.scrollingElement属性返回文档的滚动元素。也就是说,当文档整体滚动时,到底是哪个元素在滚动。

标准模式下,这个属性返回的文档的根元素document.documentElement(即<html>)。兼容(quirk)模式下,返回的是<body>元素,如果该元素不存在,返回null。

(6)document.activeElement

document.activeElement属性返回获得当前焦点(focus)的 DOM 元素。通常,这个属性返回的是<input>、<textarea>、<select>等表单元素,如果当前没有焦点元素,返回<body>元素或null。

(7)document.fullscreenElement

document.fullscreenElement属性返回当前以全屏状态展示的 DOM 元素。如果不是全屏状态,该属性返回null。

节点集合属性

以下属性返回一个HTMLCollection实例,表示文档内部特定元素的集合。这些集合都是动态的,原节点有任何变化,立刻会反映在集合中。

(1)document.links

document.links属性返回当前文档所有设定了href属性的<a>及<area>节点。

(2)document.forms

document.forms属性返回所有<form>表单节点。

除了使用位置序号,id属性和name属性也可以用来引用表单。

(3)document.images

document.images属性返回页面所有<img>图片节点。

(4)document.embeds,document.plugins

document.embeds属性和document.plugins属性,都返回所有<embed>节点。

(5)document.scripts

document.scripts属性返回所有<script>节点。

(6)document.styleSheets

document.styleSheets属性返回文档内嵌或引入的样式表集合,详细介绍请看《CSS 对象模型》一章。

(7)小结

除了document.styleSheets,以上的集合属性返回的都是HTMLCollection实例。

document.links instanceof HTMLCollection // true

document.images instanceof HTMLCollection // true

document.forms instanceof HTMLCollection // true

document.embeds instanceof HTMLCollection // true

document.scripts instanceof HTMLCollection // true

方法

document.open(),document.close()

document.open方法清除当前文档所有内容,使得文档处于可写状态,供document.write方法写入内容。

document.close方法用来关闭document.open()打开的文档。

document.write(),document.writeln()

document.write方法用于向当前文档写入内容。

在网页的首次渲染阶段,只要页面没有关闭写入(即没有执行document.close()),document.write写入的内容就会追加在已有内容的后面。

注意,document.write会当作 HTML 代码解析,不会转义。

document.querySelector(),document.querySelectorAll()

document.querySelector方法接受一个 CSS 选择器作为参数,返回匹配该选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null。

document.querySelectorAll方法与querySelector用法类似,区别是返回一个NodeList对象,包含所有匹配给定选择器的节点。

document.getElementsByTagName()

document.getElementsByTagName方法搜索 HTML 标签名,返回符合条件的元素。它的返回值是一个类似数组对象(HTMLCollection实例),可以实时反映 HTML 文档的变化。如果没有任何匹配的元素,就返回一个空集。

document.elementFromPoint(),document.elementsFromPoint()

document.elementFromPoint方法返回位于页面指定位置最上层的元素节点。

document.createElement()

document.createElement方法用来生成元素节点,并返回该节点

document.createTextNode()

document.createTextNode方法用来生成文本节点(Text实例),并返回该节点。它的参数是文本节点的内容。

document.createAttribute()

document.createAttribute方法生成一个新的属性节点(Attr实例),并返回它。

免责声明:文章转载自《Document节点》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇将u盘的文件复制到虚拟机上的linux系统上面—》文件挂载(文字+图解)k8s入门系列之介绍篇下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

JavaWeb学习之Servlet(二)----Servlet的生命周期、继承结构、修改Servlet模板

【声明】 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4140466.html 联系方式:smyhvae@163.com  一、http协议回顾: 在上一篇文章中:JavaWeb学习之Servlet(一)----MyEclipse及Tomcat的配置,我们通过在浏览器输入url,就能看到...

CSS美化自己的完美网页

CSS美化自己的完美网页 CSS概述 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观。基本上所有的html页面都或多或少的使用css。 CSS 指层叠样式表 (CascadingStyleSheets) 样式定义如何显示HTML 元素 样式通常存储在样式表...

Flask-爱家租房项目ihome-01-项目框架的搭建

项目介绍 该项目是一个简易版的租房平台项目, 房东可以在平台上发布自己的房源, 房客可以搜索心仪的房源并进行一定时间的租赁. 主要功能模块包括用户模块(注册/登录/个人信息), 租房首页, 房屋列表页,房屋详情页, 房屋预订页, 支付宝支付等. 该项目属于不完全的前后端分离, 前端使用的是html+css+jquery, 后端使用的是flask框架, 后端...

页面导出为PDF文件时为每页增加页眉

接上篇文章,https://www.cnblogs.com/boytnt/p/11711439.html,继续探索如何给每页加页眉,其实思想很简单,比如页眉上想添加logo,那就在jspdf创建每页时多加个图片上去就好了。 先上效果图,借华为LOGO一用: 再放代码,主体还是上篇文章的分页导出算法: 1 <!DOCTYPE html> 2...

【使用 DOM】使用事件

1. 使用简单事件处理器 可以用几种不同的方式处理事件。最直接的方式是用事件属性创建一个简单事件处理器(simple event handler)。元素为它们支持的每一种事件都定义了一个事件属性。举个例子,onmouseover事件属性对应全局事件mouseover,后者会在用户把光标移动到元素占据的浏览器屏幕的上方时触发。(这是一种通用的模式:大多数事件...

HTML控件篇 -- input

1. 取消input提示框及自动填充: <input type="text" autocomplete="off" /> 处理chrome下自动填充黄底样式问题: /*input样式特殊处理*/input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-...