DOM模型中的Document节点

最新推荐文章于 2022-08-12 16:09:32 发布
最新推荐文章于 2022-08-12 16:09:32 发布
阅读量550 收藏 2
点赞数 1
分类专栏： JavaScript 前端 学习JavaScript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/helloyongwei/article/details/80142200
版权

本文根据javascript.ruanyifeng.com 整理笔记

document对象时文档的根节点, document对象是window对象的属性
document对象继承了EventTarget接口, Node接口, ParentNode接口

document的属性

快捷方式属性

  • document.defaultView 返回document对象所属的window对象, 若当前文档不属于window则返回null
    一个html文件
<!DOCTYPE html>
<html>
<head></head>
<body><body>
</html>
  • document.doctype返回的是文档的<DOCTYPE>节点, 若html没有声明DTD, 则返回null
  • document.docueentElement 返回文档的根节点, 在 html中为<html>节点
  • document.body返回html的<body>节点, 属性可写
  • document.head返回html的<head>节点, 属性可写
  • document.scrollingElement属性返回文档中的滚动节点. 标准模式下返回文档的根节点document.documentElement, 兼容模式下返回document.body节点, 若不存在则返回null
  • document.activeElement返回获得当前焦点的节点. 通常为表单节点(如: <input>, <select>)若当前没有焦点节点则返回<body> 或null
  • document.fullscreenElement返回全屏状态的节点(如<video>的全屏), 若没有则返回null

节点集合属性

  • HTMLCollection实例是类似数组的对象(array-like Object). 若成员有id和name属性则实例也可以使用这两个属性
  • HTMLCollection实例表示文档内部特定元素的集合, 集合是动态的. 原节点有任何变化, 立刻会反映在集合中
  • document.links 返回当前文档所有设定href属性的<a>和<area>节点
  • document.forms属性返回所有<form>表单节点
  • document.images属性返回页面所有<img>图片节点
  • document.embeds和+ document.plugins属性返回所有<embed>节点
  • document.scripts属性返回所有的<script>节点
    以上属性返回的是HTMLCollection实例, 可以通过instanceof属性判定
  • document.styleSheets返回文档内内嵌或引入的样式表集合. 但是返回的不是HTMLCollection

文档静态信息属性

  • document.documentURI和document.URL都返回一个字符串表示当前文档的网址. 但是documentURI继承自Document接口, 可用于所有文档, URL继承自HTMLDocument接口只能用于HTML文档. 文档中的锚点变化会反映在这两个属性中
  • document.domain返回当前文档的域名, 且不包含协议和接口
  • document.location返回浏览器的原生对象Location, 它提供URL相关的信息和操作方法. 还可以通过window.location得到这个对象
  • document.lastModified返回一个表示当前文档最后修改时间的字符串. 不同浏览器返回的日期格式不一定一样. 若页面上有JavaScript生成的内容则返回当前时间
  • document.title获取当前文档的标题, 默认返回<title>节点. 该属性可写
  • document.characterSet返回当前文档的编码
  • document.referrer返回一个表示当前文档的访问者来自哪里的字符串. 它和http头信息中的referer字段一致. 若无法获取访问者来源(如用户直接输入网址)则返回”“(空字符串)
  • document.dir返回表示文字方向的字符串, 有rlt表示文字从右到左, ltr文字从左到右
  • document.compatMode返回浏览器处理文档的模式, 有向后兼容模式BackCompat, 严格模式CSS1Compat. 一般网页有<DOCTYPE>声明则都为严格模式

文档状态属性

  • document.hidden返回布尔值表示当前页面是否可见, 若不可见则返回true. 窗口的最小化, 浏览器切换窗口都会导致页面不可见
  • document.visiblityState返回文档的可见状态. 它有四种可能:
    visible：页面可见。注意，页面可能是部分可见，即不是焦点窗口，前面被其他窗口部分挡住了。
    hidden： 页面不可见，有可能窗口最小化，或者浏览器切换到了另一个 Tab。
    prerender：页面处于正在渲染状态，对于用于来说，该页面不可见。
    unloaded：页面从内存里面卸载了。
  • document.readyState返回当前文档的状态, 有三种值
    loading：加载 HTML 代码阶段（尚未完成解析）
    interactive：加载外部资源阶段
    complete：加载完成
    浏览器加载HTML文档过程如下:
    1浏览器开始解析 HTML 文档，+ document.readyState属性等于loading。
    2浏览器遇到 HTML 文档中的<script>元素，并且没有async或defer属性，就暂停解析，开始执行脚本，这时document.readyState属性还是等于loading。
    3HTML 文档解析完成，document.readyState属性变成interactive。
    4浏览器等待图片、样式表、字体文件等外部资源加载完成，一旦全部加载完成，document.readyState属性变成complete。

其他属性

  • document.cookie用来操作Cookie对象
  • document.designMode控制当前文档是否可编辑, 属性值为on或者off, 默认为off. 这个属性常用在所见即所得的编辑器
  • document.implementation返回一个DOMImplementation对象, 这个对象有三个方法
    DOMImplementation.createDocument()：创建一个 XML 文档。
    DOMImplementation.createHTMLDocument()：创建一个 HTML 文档。
    DOMImplementation.createDocumentType()：创建一个 DocumentType 对象。

方法

  • document.open()方法清除当前文档的内容并使文档处于可写状态.
    docuemnt.close()关闭open()方法打开的文档
  • document.write()向文档写入内容, 内容也会被当做html代码解析,但不会转义. 这个方法一定在open()和close()方法之间.
    如果页面已经解析完成（DOMContentLoaded事件发生之后），再调用write方法，它会先调用open方法
  • document.writeln()方法与write方法用法一致,不同的是这个方法在写入内容的末尾加上换行符. 可在显示上并不换行, 因为html会将连续的多个空格,换行符等解析为一个空格.
  • document.querySelector()接受一个css选择器作为参数, 返回满足条件的第一个节点, 没有返回null
  • document.querySelectorAll()也接受一个css选择器作为参数, 但是返回满足条件的所有节点, 返回值为NodeList对象
    querySelector和querySelectorAll不支持伪元素选择器和伪类, 返回的结果不是动态集合
  • document.getElementsByTagName()接受标签名做参数返回满足条件的元素节点, 返回值是HTMLCollection实例, 实时反映文档节点变化, 可以在任意元素节点调用
  • document.getElementsByClassName()接受类名做参数返回满足条件的元素节点, 返回值也是
    HTMLCollection实例,实时反映文档节点变化, 可以在任意元素节点调用
  • document.getElementsByName() 接受的参数是一个属性名, 返回拥有这个属性名的元素节点, 注意返回值是NodeList实例, 因为属性名相同的元素可能不止一个
  • document.getElementById() 接受一个id参数,返回这个id所在的元素, 这是个单个节点. 注意这个方法只能在document对象上使用, 其他元素节点不可用
  • document.elementFromPoint方法接受连个参数x, y. 返回位于页面指定位置最上层的元素
  • document.elementsFromPoint()返回一个数组，成员是位于指定坐标（相对于视口）的所有元素节点。
  • document.caretPositionFromPoint()返回一个CaretPosition对象, 用于确定光标点在文本对象内部的具体位置, 它有两个属性
    CaretPosition.offsetNode：该位置的节点对象
    CaretPosition.offset：该位置在offsetNode对象内部，与起始位置相距的字符数
  • document.createElement()方法用来生成元素节点，并返回该节点. 参数为标签名, 不可以有尖括号
  • document.createTextNode()用于生成文本节点并返回该节点, 参数为文本节点的内容. 该方法不对单双引号转义
  • document.createAttribute()生成新的属性节点并返回, 参数为属性名
  • document.createComment()用于生成注释节点并返回
  • document.createDocumentFragment()生成一个空的文档片段对象, 即DocumentFragment实例, 它不属于当前文档
  • document.createEvent()方法用于生成一个Event实例
  • document.addEventListener()用于添加时间监听函数
  • document.removeEventListener()移除事件监听函数
  • document.dispatchEvent()用于触发事件
  • document.hasFocus()返回一个表示当前文档中是否有元素激活或者获得焦点的布尔值. 若有元素被激活或者获得焦点则返回true. 注意有焦点的文档必定被激活, 激活的文档未必有焦点
  • document.adoptNode()，document.importNode()都用于移动节点

  • document.createNodeIterator()方法返回一个子节点遍历器, 它是NodeFilter实例。document.createNodeIterator()方法第一个参数为所要遍历的根节点，第二个参数为所要遍历的节点类型，这里指定为元素节点（NodeFilter.SHOW_ELEMENT）
    几种主要的节点类型写法如下
    所有节点：NodeFilter.SHOW_ALL
    元素节点：NodeFilter.SHOW_ELEMENT
    文本节点：NodeFilter.SHOW_TEXT
    评论节点：NodeFilter.SHOW_COMMENT

  • document.createTreeWalker方法返回一个 DOM 的子树遍历器, 但它时TreeWalker实例. 使用方法和createNodeIterator()类似

  • document.getSelection()指向window.getSelection()方法
CSDN认证用户
关注
专栏目录
HTML DOM Document 对象
sworddancing is the best one
07-30 380
HTML DOM Document 对象 DOM（文档对象模型）是将html文档和编码语言（说白了就是javascript）结合起来的一种模型（与之相对应的bom就是将浏览器和编码语言结合起来的一种模型） 在了解Document 对象之前我们先来看一下什么是HTML DOM 节点 HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元...
Document节点的操作
a335178388的博客
10-19 408
1.Document 对象的概述 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问 2.通过获取id进行操作 getElementById() 返回对拥有指定 id 的第一个对象的引用。 例：document.getElementById("id"); 3.通过docu.
什么是DOM(Document Object Model)文档对象模型
12-09
D:document 文档 浏览器加载的页面 DOM O:object 对象 页面及页面中的任何元素都是对象 M:module 模型 页面中的元素的组织形式 DOM被W3C组织设计为一种平台无关、语言无关的API，程序或脚本通过其动态访问、修改文档的内容、样式、结构。 DOM是web 浏览器的运行规范，javascript借助DOM成就了其web标准语言的地位，在web领域实现了所谓“一次编写到处运行”的目标。 文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关
DOM document对象简单介绍
u013277456的博客
09-26 371
js的一个重要的功能就是解析DOM（文档对象模型，一种独立于平台和语言的方式访问和修改一个文档的内容和结构，换句话说，这是表示和处理一个HTML或xml文档的常用方法） 一个HTML页面会被浏览器解析为一个DOM树，而js就是可以操作这种树的语言，我们可以用js来获取DOM树的一个节点了，然后修改它，也可以添加或者删除一个节点，从而达到修改HTML页面的目的。 在HTML DO
DOM（Document）模型
weixin_72786602的博客
08-12 168
DOM（Document）模型
DOM基础教程之模型中的模型节点
12-09
下面我们将详细讨论DOM模型中的三种主要节点类型：元素节点、文本节点和属性节点。 1. 元素节点（Element Node） 元素节点是DOM树中最基本的构建块，它们对应HTML或XML文档中的所有标签，如`<p>`、`<ul>`等。元素...
DOM对象中的节点操作.pdf
06-16
例如，在JavaScript中，可以通过document.createElement()方法创建一个新的元素节点，通过appendChild()或insertBefore()方法将新节点插入到DOM树中，通过removeChild()或replaceChild()方法来删除或者替换一个节点...
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
10-18
JavaScript是一种基于对象和事件驱动的脚本语言，其在Web开发中扮演着核心角色，特别是在处理DOM（文档对象模型）时。DOM是一个跨平台和语言独立的接口，允许程序和脚本动态地访问和更新文档的内容、结构和样式。在...
JavaScript 节点操作 以及DOMDocument属性和方法
10-30
DOMDocument对象是这个模型的核心，它代表了整个文档，并提供了访问和操作文档中各个元素的方法和属性。 首先，DOMDocument对象的一些重要属性包括： 1. `Attributes`: 这个属性是一个只读的NamedNodeMap，存储了...
DOM（document object model）文档对象模型
最新发布
10-12
本文概述DOM分类,document的方法以及属性、element的方法和属性document获取全局内容和创建全局内容，其中包括了节点属性和节点的相关方法和分类，本文结尾拓展了操作节点的方法和删除空文本节点的相关方法
DOM节点方法介绍
weixin_30279315的博客
07-03 70
obj.appendChild(newe) 将子节点添加父节点的末尾。obj：要添加的节点的父元素引用；newe：要添加的新节点。注意：本人发现，在添加子节点的时候不能对其父节点进行引用，如果引用其父节点，就行造成溢出（好像是用这个词吧）现象，而导致浏览器崩溃。obj.cloneNode(boolen) 得到当前节点的副本obj：当前节点的引用； boolen：布尔值，true：包括当前节点的子节...
DOM-添加元素、节点
weixin_30271335的博客
03-27 228
createElement()方法能够根据参数指定的标签名称创建一个新元素，并返回新建元素的引用，用法如下 var element=document.createElement("tagName"); 其中element表示新建元素的引用，createElement()是document对象的一个方法，该方法只有一个参数，用来指定创建元素的标签名称。 <!DOCTYPE html&...
DOM(文档对象模型节点）
share_free的博客
03-06 730
DOM(文档对象模型节点） 节点类型NodeTypeNamed ConstantnodeName的返回值nodeValue的返回值Element1ELEMENT_NODEelement namenullAttr2ATTRIBUTE_NODE属性的名称属性值Text3TEXT_NODE#text文本内容 jQuery的基本选择器底层就是js的由document调用的getElementsByName
文档对象模型（Document Object Model）
pretty_young_thing的博客
10-08 1751
DOM(Document Object Model,文档对象模型) 最早于1998年由万维网联盟（W3C）标准化，只是表现和处理XML、XHTML和HTML数据的一种方法。简而言之，DOM为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。 DOM将数据表示为一棵树，从单一的主干（称为根）开始。在HTML页面中，起始点是HTM
DOM模型结构——节点类型
a55684471的博客
12-04 643
转载于:https://www.cnblogs.com/JMLiu/p/6130361.html
html文档domtree结构图,DOM tree （文档翻译）
weixin_42461035的博客
06-09 314
DOM treeHTML文档的脊背是标签(tags)。根据文档对象模型(DOM)，每个HTML标签都是一个对象(object)。嵌套的标签是封闭标签的子集。标签内的文本也是一个对象。所有的这些对象都可通过JavaScript访问，我们可以用它们来修改页面。举个例子，document.body是标签的对象。运行以下的代码会使变红3秒。document.body.style.background = ...
DOM节点类型
佳佳的博客
11-22 425
nodeType 节点名称 nodeName属性 nodeValue属性 其它 Node.ELEMENT_NODE(1) 元素节点 html中返回元素的大写标签名(tagName)，xml中返回小写标签名 null Node.ATTRIBUTE_NODE(2) 属性节点 属性名称（name） 属性值(value) Node.TEXT_DO
在 DOM 中创建新节点
weixin_33852020的博客
07-06 146
XmlDocument 为所有节点类型提供了 create 方法。 为该方法提供名称（需要时）以及那些具有内容的节点（如文本节点）的内容或其他参数，这样便可创建节点。 下面的方法需要填充名称和几个其他参数以创建相应的节点。 CreateCDataSection CreateComment CreateDocumentFragment CreateDocume...
理解DOM：节点操作与模型解析
"DOM对象中的节点操作.pdf" 在深入探讨DOM节点之前，首先理解DOM（Document Object Model）的本质至关重要。DOM是一种国际标准，它允许程序和脚本动态地访问和更新HTML、XML以及SVG等文档的结构、内容和样式。它将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值