document节点

document节点

1. 属性

1.快捷方式属性
  • document.defaultView 属性返回document对象所属的window对象。如果当前文档不属于window对象,该属性返回null
  • document.doctype 对于 HTML 文档来说,document对象一般有两个子节点。第一个子节点是document.doctype,指向<DOCTYPE>节点,即文档类型(Document Type Declaration,简写DTD)节点。HTML 的文档类型节点,一般写成<!DOCTYPE html>。如果网页没有声明 DTD,该属性返回null。
  • document.documentElement 属性返回当前文档的根元素节点(root)。它通常是document节点的第二个子节点,紧跟在document.doctype节点后面。HTML网页的该属性,一般是<html>节点。
  • document.body document.body属性指向<body>节点
  • document.head document.head属性指向<head>节点。
  • document.scrollingElement 属性返回文档的滚动元素。也就是说,当文档整体滚动时,到底是哪个元素在滚动。
  • document.activeElement 属性返回获得当前焦点(focus)的 DOM 元素。通常,这个属性返回的是<input>、<textarea>、<select>等表单元素,如果当前没有焦点元素,返回<body>元素或null。
  • document.fullscreenElement 属性返回当前以全屏状态展示的 DOM 元素。如果不是全屏状态,该属性返回null。
2.节点集合属性
  • document.links 属性返回当前文档所有设定了href属性的<a>及<area>节点。
  • document.forms 属性返回所有<form>表单节点。
  • document.images 属性返回页面所有<img>图片节点。
  • document.embeds,document.plugins document.embeds属性和document.plugins属性,都返回所有<embed>节点。
  • document.scripts 属性返回所有<script>节点。
  • document.styleSheets 属性返回文档内嵌或引入的样式表集合
3.文档静态信息属性
  • document.documentURI,document.URL都返回一个字符串,表示当前文档的网址。不同之处是它们继承自不同的接口,documentURI继承自Document接口,可用于所有文档;URL继承自HTMLDocument接口,只能用于 HTML 文档。
  • document.domain 属性返回当前文档的域名,不包含协议和接口。比如,网页的网址是http://www.example.com:80/hello.html,那么domain属性就等于www.example.com。如果无法获取域名,该属性返回null。
  • document.location Location对象是浏览器提供的原生对象,提供 URL 相关的信息和操作方法。通过window.location和document.location属性,可以拿到这个对象。
  • document.lastModified 属性返回一个字符串,表示当前文档最后修改的时间。不同浏览器的返回值,日期格式是不一样的。
  • document.title 属性返回当前文档的标题。默认情况下,返回<title>节点的值。但是该属性是可写的,一旦被修改,就返回修改后的值。
  • document.characterSet 属性返回当前文档的编码,比如UTF-8、ISO-8859-1等等。
  • document.referrer 属性返回一个字符串,表示当前文档的访问者来自哪里。
  • document.dir 返回一个字符串,表示文字方向。它只有两个可能的值:rtl表示文字从右到左,阿拉伯文是这种方式;ltr表示文字从左到右,包括英语和汉语在内的大多数文字采用这种方式。
  • document.compatMode 属性返回浏览器处理文档的模式,可能的值为BackCompat(向后兼容模式)和CSS1Compat(严格模式)
4.文档状态属性
  • document.hidden属性返回一个布尔值,表示当前页面是否可见。如果窗口最小化、浏览器切换了 Tab,都会导致导致页面不可见,使得document.hidden返回true。
  • document.visibilityState返回文档的可见状态。
  • document.readyState 属性返回当前文档的状态,共有三种可能的值。
    • baseloading:加载 HTML 代码阶段(尚未完成解析)
    • interactive:加载外部资源阶段
    • complete:加载完成
  • document.cookie 属性用来操作浏览器 Cookie
  • document.designMode 属性控制当前文档是否可编辑。该属性只有两个值on和off,默认值为off。一旦设为on,用户就可以编辑整个文档的内容。
  • document.implementation属性返回一个DOMImplementation对象。该对象有三个方法,主要用于创建独立于当前文档的新的 Document 对象。
    • DOMImplementation.createDocument():创建一个 XML 文档。
    • DOMImplementation.createHTMLDocument():创建一个 HTML 文档。
    • DOMImplementation.createDocumentType():创建一个 DocumentType 对象。

2.方法

  • document.open(),document.close() document.open方法清除当前文档所有内容,使得文档处于可写状态,供document.write方法写入内容。
  • document.write(),document.writeln() document.write方法用于向当前文档写入内容。document.writeln方法与write方法完全一致,除了会在输出内容的尾部添加换行符。
  • document.querySelector(),document.querySelectorAll() document.querySelector 方法接受一个 CSS 选择器作为参数,返回匹配该选择器的元素节点。如果有多个节点满足匹配条件,则返回第一个匹配的节点。如果没有发现匹配的节点,则返回null. document.querySelectorAll方法与querySelector用法类似,区别是返回一个NodeList对象,包含所有匹配给定选择器的节点。
  • document.getElementsByTagName() 方法搜索 HTML 标签名,返回符合条件的元素。它的返回值是一个类似数组对象(HTMLCollection实例),可以实时反映 HTML 文档的变化。如果没有任何匹配的元素,就返回一个空集。
  • document.getElementsByClassName() 方法返回一个类似数组的对象(HTMLCollection实例),包括了所有class名字符合指定条件的元素,元素的变化实时反映在返回结果中。
  • document.getElementsByName() 方法用于选择拥有name属性的 HTML 元素(比如<form>、<radio>、<img>、<frame>、<embed>和<object>等),返回一个类似数组的的对象(NodeList实例),因为name属性相同的元素可能不止一个。
  • document.getElementById() 方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点,则返回null。
  • document.elementFromPoint(),document.elementsFromPoint() document.elementFromPoint方法返回位于页面指定位置最上层的元素节点。
    document.elementsFromPoint()返回一个数组,成员是位于指定坐标(相对于视口)的所有元素。
  • document.caretPositionFromPoint() 返回一个 CaretPosition 对象,包含了指定坐标点在节点对象内部的位置信息。CaretPosition 对象就是光标插入点的概念,用于确定光标点在文本对象内部的具体位置。
  • document.createElement() 方法用来生成元素节点,并返回该节点。
  • document.createTextNode() 方法用来生成文本节点(Text实例),并返回该节点。它的参数是文本节点的内容。
  • document.createAttribute() 方法生成一个新的属性节点(Attr实例),并返回它。
  • document.createComment() 方法生成一个新的注释节点,并返回该节点。
  • document.createDocumentFragment() 方法生成一个空的文档片段对象(DocumentFragment实例)。
  • document.createEvent() 方法生成一个事件对象(Event实例),该对象可以被element.dispatchEvent方法使用,触发指定事件。
  • document.addEventListener(),document.removeEventListener(),document.dispatchEvent() 这三个方法用于处理document节点的事件。它们都继承自EventTarget接口,
// 添加事件监听函数
document.addEventListener('click', listener, false);

// 移除事件监听函数
document.removeEventListener('click', listener, false);

// 触发事件
var event = new Event('click');
document.dispatchEvent(event);
  • document.hasFocus()方法返回一个布尔值,表示当前文档之中是否有元素被激活或获得焦点。

  • document.adoptNode(),document.importNode()
    document.adoptNode方法将某个节点及其子节点,从原来所在的文档或DocumentFragment里面移除,归属当前document对象,返回插入后的新节点。插入的节点对象的ownerDocument属性,会变成当前的document对象,而parentNode属性是null。
    document.importNode方法的第一个参数是外部节点,第二个参数是一个布尔值,表示对外部节点是深拷贝还是浅拷贝,默认是浅拷贝(false)。虽然第二个参数是可选的,但是建议总是保留这个参数,并设为true

  • document.createNodeIterator() document.createNodeIterator方法返回一个子节点遍历器
    document.createNodeIterator方法第一个参数为所要遍历的根节点,第二个参数为所要遍历的节点类型,这里指定为元素节点(NodeFilter.SHOW_ELEMENT)。几种主要的节点类型写法如下。

    • 所有节点:NodeFilter.SHOW_ALL
    • 元素节点:NodeFilter.SHOW_ELEMENT
    • 文本节点:NodeFilter.SHOW_TEXT
    • 评论节点:NodeFilter.SHOW_COMMENT
  • document.createTreeWalker() 方法返回一个 DOM 的子树遍历器。它与document.createNodeIterator方法基本是类似的,区别在于它返回的是TreeWalker实例,后者返回的是NodeIterator实例。另外,它的第一个节点不是根节点。

  • document.execCommand(),document.queryCommandSupported(),document.queryCommandEnabled() 如果document.designMode属性设为on,那么整个文档用户可编辑;如果元素的contenteditable属性设为true,那么该元素可编辑。这两种情况下,可以使用document.execCommand()方法,改变内容的样式,比如document.execCommand('bold')会使得字体加粗。
    document.execCommand(command, showDefaultUI, input)
    该方法接受三个参数。

  • command:字符串,表示所要实施的样式。
  • showDefaultUI:布尔值,表示是否要使用默认的用户界面,建议总是设为false。
  • input:字符串,表示该样式的辅助内容,比如生成超级链接时,这个参数就是所要链接的网址。如果第二个参数设为true,那么浏览器会弹出提示框,要求用户在提示框输入该参数。但是,不是所有浏览器都支持这样做,为了兼容性,还是需要自己部署获取这个参数的方式。
  • document.getSelection() 这个方法指向window.getSelection();
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,864评论 6 494
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,175评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,401评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,170评论 1 286
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,276评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,364评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,401评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,179评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,604评论 1 306
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,902评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,070评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,751评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,380评论 3 319
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,077评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,312评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,924评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,957评论 2 351

推荐阅读更多精彩内容

  • 一、概述 document节点是整个文档树的顶层节点,每张网页都有自己的document节点。window.doc...
    周花花啊阅读 1,322评论 0 1
  • 概述 document节点是文档的根节点,每张网页都有自己的document节点。window.document属...
    许先生__阅读 630评论 0 2
  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 1,434评论 1 3
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 3,625评论 0 7
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,113评论 0 21