百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程文章 > 正文

HTML DOM Document 对象 html dom操作

qiyuwang 2024-10-15 14:43 14 浏览 0 评论

HTML DOM 节点

在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:

  • 文档是一个文档。

  • 所有的HTML元素都是元素节点。

  • 所有 HTML 属性都是属性节点。

  • 文本插入到 HTML 元素是文本节点。are text nodes。

  • 注释是注释节点。



Document 对象

当浏览器载入 HTML 文档, 它就会成为 document 对象

document 对象是HTML文档的根节点与所有其他节点(元素节点,文本节点,属性节点, 注释节点)。

Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。

提示:Document 对象是 Window 对象的一部分,可通过 window.document 属性对其进行访问。

浏览器支持

所有主要浏览器都支持 Document 对象。

Document 对象属性和方法

HTML文档中可以使用以上属性和方法:

属性 / 方法描述
document.activeElement返回当前获取焦点元素
document.addEventListener()向文档添加句柄
document.adoptNode(node)从另外一个文档返回 adapded 节点到当前文档。
document.anchors返回对文档中所有 Anchor 对象的引用。
document.applets返回对文档中所有 Applet 对象的引用。
document.baseURI返回文档的绝对基础 URI
document.body返回文档的body元素
document.close()关闭用 document.open() 方法打开的输出流,并显示选定的数据。
document.cookie设置或返回与当前文档有关的所有 cookie。
document.createAttribute()创建一个属性节点
document.createComment()createComment() 方法可创建注释节点。
document.createDocumentFragment()创建空的 DocumentFragment 对象,并返回此对象。
document.createElement()创建元素节点。
document.createTextNode()创建文本节点。
document.doctype返回与文档相关的文档类型声明 (DTD)。
document.documentElement返回文档的根节点
document.documentMode返回用于通过浏览器渲染文档的模式
document.documentURI设置或返回文档的位置
document.domain返回当前文档的域名。
document.domConfig返回normalizeDocument()被调用时所使用的配置
document.embeds返回文档中所有嵌入的内容(embed)集合
document.forms返回对文档中所有 Form 对象引用。
document. getElementsByClassName()返回文档中所有指定类名的元素集合,作为 NodeList 对象。
document.getElementById()返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()返回带有指定名称的对象集合。
document.getElementsByTagName()返回带有指定标签名的对象集合。
document.images返回对文档中所有 Image 对象引用。
document.implementation返回处理该文档的 DOMImplementation 对象。
document.importNode()把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding返回用于文档的编码方式(在解析时)。
document.lastModified返回文档被最后修改的日期和时间。
document.links返回对文档中所有 Area 和 Link 对象引用。
document.normalize()删除空文本节点,并连接相邻节点
document.normalizeDocument()删除空文本节点,并连接相邻节点的
document.open()打开一个流,以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.querySelector()返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()document.querySelectorAll() 是 HTML5中引入的新方法,返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState返回文档状态 (载入中……)
document.referrer返回载入当前文档的文档的 URL。
document.removeEventListener()移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()重命名元素或者属性节点。
document.scripts返回页面中所有脚本的集合。
document.strictErrorChecking设置或返回是否强制进行错误检查。
document.title返回当前文档的标题。
document.URL返回文档完整的URL
document.write()向文档写 HTML 表达式 或 JavaScript 代码。
document.writeln()等同于 write() 方法,不同的是在每个表达式之后写一个换行符。

警告 !!!

在 W3C DOM核心,文档对象 继承节点对象的所有属性和方法。

很多属性和方法在文档中是没有意义的。

HTML 文档对象可以避免使用这些节点对象和属性:

属性 / 方法避免的原因
document.attributes文档没有该属性
document.hasAttributes()文档没有该属性
document.nextSibling文档没有下一节点
document.nodeName这个通常是 #document
document.nodeType这个通常是 9(DOCUMENT_NODE)
document.nodeValue文档没有一个节点值
document.ownerDocument文档没有主文档
document.ownerElement文档没有自己的节点
document.parentNode文档没有父节点
document.previousSibling文档没有兄弟节点
document.textContent文档没有文本节点

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

相关推荐

别再乱找了!这才是 Alist 本地安装挂载的正确打开方式

一、探秘Alist的神奇世界在这个数据爆炸的时代,我们的生活里充斥着各种各样的网盘服务,百度网盘、阿里云盘、腾讯微云等等,它们成了我们存储资料的得力助手。但随着网盘数量的增多,管理这些分散在不同平...

如何将数据从旧iPhone传输到新iPhone 16?这五个方法你必须知道!

前不久,苹果发布了备受期待的iPhone16系列,新机型搭载了更强大的芯片、更流畅的操作体验,还有备受热议的全新摄像系统。无论你是冲着A18仿生芯片,还是更丰富的动态岛功能,相信很多果粉早已跃跃欲试...

大数据传输的定义与大数据传输解决方案的选择

当我们需要处理大量的数据时,我们就要把数据从一个地方移动到另一个地方。这个过程就叫做大数据传输。它通常需要用到高速的网络连接、分散的存储系统和数据传输协议,以保证数据的快速、可靠和安全的移动。常用的大...

【工具】在线传输文件工具(在线文件互传)

前言在线传输文件工具主要是用于在不同的设备之间,如手机、电脑、平板等快速便捷地传送文件。告别使用USB传统传输文件的方式。...

如何使用 CAN-FD 在 LPC5500 上传输数据

目录1引言2CAN-FD3示例演示1引言...

轻松同步:将照片从三星手机传输到iPad的简便方法

概括想要在新iPad上查看三星照片吗?但是,如果您不知道如何将照片从三星手机传输到iPad,则无法在iPad上查看图片。为此,本文分享了7个有用的方法,以便您可以使用它们在不同操作系统之...

常见又地道的网络缩写:美剧中常说的SFW到底是个啥?

在这堂课中,让我们来学习更多在数字网络世界中常用的有趣网络用语。7shifts/unsplashhttp,https“http”和“https”是万维网(www)传输文件用的协议。“http”是hy...

每天学会一个计算机网络协议之FTP

开始行文之前提出一个问题,相信大家在看完本文后一定可以回答当我们在网站上填写注册信息的时候,需要我们上传照片,上传的过程发生了什么?下面引入我们的主角,FTP文件传输协议FTPFileTransf...

即用即走,这3款文件分享工具真香

打工人的日常,免不了「文件分享存储服务」的需求。我们一般会选择不同的网盘,但是大家也知道,网盘不是限速就是叫你充值。今天跟大家简单推荐3款文件分享工具,既可以免登录匿名使用,而且操作简单稳定性也不错。...

安卓手机里的文件和照片与Mac互传的办法

因为HandShake一段时间未更新,似乎目前不可操作。我一时间未找到更好的「传输」办法,经实践操作,向大家介绍一下「安卓手机」,包括「一加」、「索尼」,都可用此方法,来进行文件传输到Mac的...

软网推荐:同一个平台选择不同的传输方法

平时上网的时候,我们经常要分享一些文件给其他朋友,一般通过云服务平台来实现。今天笔者给大家介绍的Worksphere传输服务,它提供了两种不同的分享方式,方便我们根据实际需要进行选择。一个链接分享所有...

跨平台不限速的免费文件传输网站(跨平台不限速的免费文件传输网站是什么)

大家好,欢迎来到天天惠分享,不知道各位平时都是用什么方法来进行文件跨平台传输的呢?是百度网盘?微信还是QQ?亦或是有线传输。虽然这些方法都可以达到传输的目的,但都有各自的缺陷,使用起来一言难尽。比如百...

全网最全最详细的全平台文件传输方法,解决你文件传输问题(一)

前言想必现在大多数人文件传输的方法还是使用qq微信,但是qq微信的文件传输有时候真是,...

文件传输工具有哪些?这3款堪称办公必备!

在不同设备间,想把文件从一台设备传输到另一台,尤其是大体积文件,更是免不了用到文件传输工具,可以说文件传输工具已成为提升效率的关键载体。面对海量文档、设计素材、会议纪要的流转需求,传统邮件附件、U盘拷...

小白也能用的跨网文件交换系统!10款简单易上手的文件摆渡工具

跨网文件交换系统对于需要频繁在不同网络环境中进行文件共享的用户来说至关重要。以下是10款简单易上手的文件摆渡工具,适合小白用户使用,帮助他们高效地分享和传输文件。10款简单易上手的跨网文件交换工具1....

取消回复欢迎 发表评论: