zoukankan      html  css  js  c++  java
  • Document节点

    概述

        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实例),并返回它。

  • 相关阅读:
    YII框架实现排序
    YII2 实现登录时候修改最新登录时间
    YII框架下实现密码修改
    json在PHP中应用技巧
    更换Python pip库镜像地址
    Python3创建RIDE桌面快捷方式的另一种方法
    谈谈测试人员的基本素养
    《微软的软件测试之道》阅读笔记
    PPT如何一页多张打印且铺满整个页面
    Linux 在线模拟器
  • 原文地址:https://www.cnblogs.com/hjy-21/p/12332747.html
Copyright © 2011-2022 走看看