什么是DOM?(JavaScript DOM是什么?)

这篇具有很好参考价值的文章主要介绍了什么是DOM?(JavaScript DOM是什么?)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

什么是DOM?(JavaScript DOM是什么?),JavaScript,Web专区,javascript,js,DOM

1、DOM简洁

DOM是js中最重要的一部分,没有DOM就不会通过js实现和用户之间的交互。
window是最大的浏览器对象,在它的下面还有很多子对象,我们要学习的DOM就是window对象下面的document对象
DOM(Document Object Model)是由W3C指定的用于访问诸如XML和HTML等结构化文档的标准

W3C DOM标准被分为三个不同的部分:

  • 核心DOM:针对任何结构化文档的标准模型
  • XML DOM:针对XML文档的标准模型
  • HTML DOM:针对HTML文档的标准模型
    什么是DOM?(JavaScript DOM是什么?),JavaScript,Web专区,javascript,js,DOM
    DOM的设计是以对象管理组织(OMG)的规约为基础的,可以用于任何编程语言,DOM以基于对象的方式来描述整个文档,让我们可以很方便的操作整个文档,包括:文档内容的添加、修改、隐藏、显示,对HTML央视的添加和替换等。
// 例子
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<button onclick="createImg()">点击生成图片</button>
<script>
    function createImg(){
        var img = document.createElement('img'); // 创建图片标签
        img.src = 'https://www.zhishunet.com/static/zhishuindex/picture/weixin.jpg'; // 设置src属性
        // 显示到页面上
        document.getElementsByTagName('body')[0].appendChild(img);
    }
</script>
</script>
</body>
</html>

2、DOM中的D是什么

DOM中的D指的是document(文档),在我们进行的web开发中指的就是HTML文档。我们向服务器请求页面,服务器返回的就是一个HTML文档,在浏览器收到HTML文档后会把这个文档处理成一个document对象,然后显示在浏览器中,如果其中有js代码则会被一一顺序执行显示出相应的动态效果

3、DOM中的O是什么

DOM中的O指的是object对象,服务器返回HTML文档之后欧浏览器会把HTML文档解析成DOMN对象,放入到内存中,再从内存中取出这个document对象显示在浏览器中。
正是由于浏览器把服务器返回的HTML文档转换成document对象并存储与内存中,js才可以操作这些标签元素,呈现出不同的动态效果。

4、DOM中的M是什么

DOM中的M指的是Model,就是模型的意思,就是浏览器在把HTML文档处理成document对象时所使用的组织形式,也可以说documeng对象是一种表现形式。
DOM在组织HTML文档的时候以树状形式实现的。在收到服务器返回的HTML文档之后,DOM会把这个HTML文档以家谱树的形式组织起来并存储到内存中,在显示到浏览器中供用户查看。
家谱树本身就是一种模型,==使用父(parent)、子(child)、兄弟(sibling)==等记号表示之间的关系,最大的优点就是可以把复杂的方式简单化
什么是DOM?(JavaScript DOM是什么?),JavaScript,Web专区,javascript,js,DOM
像这样大家一看就明白<html>标签是树的根,代表整个HTML文档,在它下面<head>和<body>标签是并列的兄弟关系,在<head>标签中有<meta>和<title>标签。像这样再复杂的文档也能一层层的表示出来,而且标签元素所在的位置也非常容易描述,这就是树状结构模型所带来的好处。文章来源地址https://www.toymoban.com/news/detail-809276.html

到了这里,关于什么是DOM?(JavaScript DOM是什么?)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • web前端框架JS学习之JavaScript类型转换

    vascript有多种数据类型,如字符串、数字、布尔等,可以通过typeof语句来查看变量的数据类型。数据类型转换就是数据类型之间相互转换,比如把数字转成字符串、把布尔值转成字符串、把字符串转成数字等,这在工作也是经常碰到的。 本期我们就给大家说说web前端框架JS学

    2024年02月10日
    浏览(59)
  • 一文读懂JavaScript DOM节点操作(JavaScript DOM节点操作详解)

    一、什么是节点 DOM模型是树状结构模型,二组成这棵树的就是一个个点,在网络术语中称之为节点。 节点是一个模型中最基本的组成单位。DOM模型是由一个个节点组成的,DOM节点也有其不同的类型。 二、节点类型 DOM节点分为5种类型: 文档节点(就是整个HTML文档,也就是

    2024年01月22日
    浏览(45)
  • 连接区块链节点的 JavaScript 库 web3.js

    通过前面的文章我们可以知道基于区块链开发一个DApp,而DApp结合了智能合约和用户界面(客户端),那客户端是如何与区块链进行连接交互的、如何调用智能合约的、如何发送一个交易到区块链、如何获取区块链上的数据,这就是本文要介绍的 web3.js。 如下图,区块链网络

    2024年02月15日
    浏览(52)
  • 【javaScript】DOM编程入门

    概念:DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化的编程 为什么要由DOM编程来动态修改呢?我们就得先理解网页的运行原理: 如上图,程序员编写的html文件存储在服务器端,而用户使用的浏览器则由u

    2024年04月09日
    浏览(33)
  • 【DOM重点核心--javascript】

    DOM重点核心     //动态创建元素有3种方法     1.document.write() 如果页面文档加载完毕,在调用会导致页面重绘(不推荐)     2.innerHTML创建多个元素的效率更高(不要拼接字符串,采取数组形式拼接),结构稍微复杂。     3.document.createElement()创建多个元素效率稍微低一点,

    2024年02月07日
    浏览(32)
  • JavaScript 基础 DOM (二)

    事件流是对事件执行过程的描述 事件捕获 从DOM的根元素开始去执行对应的事件 (从外到里) 事件冒泡 当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒 泡 addEventListener  第3个参数决定了事件是在捕获阶段触发还是在

    2024年02月05日
    浏览(27)
  • JavaScript:DOM对象

    严格意义上讲,我们在 JavaScript 语法阶段学习的知识绝大部分属于 ECMAScript 的知识体系,ECMAScript 简称 ES 它提供了一套语言标准规范,如变量、数据类型、表达式、语句、函数等语法规则都是由 ECMAScript 规定的。浏览器将 ECMAScript 大部分的规范加以实现,并且在此基础上又扩

    2024年02月02日
    浏览(30)
  • JavaScript HTML DOM

    JavaScript HTML DOM(文档对象模型)是一种用于访问和操作HTML文档元素的编程接口。它将HTML文档表示为一个树形结构,使开发人员可以使用JavaScript来操作和修改HTML元素、属性、样式和事件。 通过使用HTML DOM,你可以使用JavaScript来执行以下操作: 1. 访问和修改元素:你可以使用

    2024年02月09日
    浏览(37)
  • JavaScript---获取、修改DOM元素

    1. 获取元素 1.1.  获取第一个元素,一个HTMLElement对象,可以修改   document.querySelector(\\\'css选择器\\\')    1.2. 获取多个元素,一个HTMLElement对象,不可以修改,得到的是伪数组 document.querySelectorAll(\\\'css选择器\\\')   2. 操作元素内容 2.1. 元素.innerText      只显示纯文本,不解析标签 

    2024年02月15日
    浏览(39)
  • 【JavaScript 】DOM操作快速入门

    目录 1.概述 2.操作 2.1.document对象 2.2.选中元素 2.2.1.get 2.2.2.query 2.3.操作属性 2.4.添加响应 2.5.修改文本 在Web开发中,JavaScript(JS)的DOM(Document Object Model,文档对象模型)是一种用来表示网页文档结构的编程接口。它将整个文档抽象为一个树形结构,每个节点都是文档中的一

    2024年02月06日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包