javascript基础从小白到高手系列五百九十八：DOM

最新推荐文章于 2024-06-13 10:05:02 发布
最新推荐文章于 2024-06-13 10:05:02 发布
阅读量277 收藏 4
点赞数 7
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanmeijuhao/article/details/138108572
版权

文档对象模型(DOM，Document Object Model)是 HTML 和 XML 文档的编程接口。DOM 表示 由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早 期的动态 HTML(DHTML，Dynamic HTML)，DOM 现在是真正跨平台、语言无关的表示和操作网页 的方式。

DOM Level 1 在 1998 年成为 W3C 推荐标准，提供了基本文档结构和查询的接口。本章之所以介绍 DOM，主要因为它与浏览器中的 HTML 网页相关，并且在 JavaScript 中提供了 DOM API。

节点层级

任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构。节点分很多类型，每 种类型对应着文档中不同的信息和(或)标记，也都有自己不同的特性、数据和方法，而且与其他类型 有某种关系。这些关系构成了层级，让标记可以表示为一个以特定节点为根的树形结构。以下面的 HTML 为例:

   <html>
      <head>
        <title>Sample Page</title>
      </head>
      <body>
        <p>Hello World!</p>
      </body>
    </html>

如果表示为层级结构，则如图 14-1 所示。

其中，document 节点表示每个文档的根节点。在这里，根节点的唯一子节点是元素，我们称之 为文档元素(documentElement)。文档元素是文档最外层的元素，所有其他元素都存在于这个元素之 内。每个文档只能有一个文档元素。在 HTML 页面中，文档元素始终是元素。在 XML 文档中， 则没有这样预定义的元素，任何元素都可能成为文档元素。
HTML 中的每段标记都可以表示为这个树形结构中的一个节点。元素节点表示 HTML 元素，属性 节点表示属性，文档类型节点表示文档类型，注释节点表示注释。DOM 中总共有 12 种节点类型，这些 类型都继承一种基本类型。

Node类型

DOM Level 1 描述了名为 Node 的接口，这个接口是所有 DOM 节点类型都必须实现的。Node 接口 在 JavaScript 中被实现为 Node 类型，在除 IE 之外的所有浏览器中都可以直接访问这个类型。在 JavaScript 中，所有节点类型都继承 Node 类型，因此所有类型都共享相同的基本属性和方法。
每个节点都有 nodeType 属性，表示该节点的类型。节点类型由定义在 Node 类型上的 12 个数值 常量表示:
 Node.ELEMENT_NODE(1)
 Node.ATTRIBUTE_NODE(2)
 Node.TEXT_NODE(3)
 Node.CDATA_SECTION_NODE(4)

完美句号
关注
  • 7
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js-dom-fundamentals:JavaScript和DOM基础
05-18
JavaScript和DOM基础 如果您对JavaScript的基本知识充满热情，那么掌握它非常重要。 如果您具有扎实JavaScript基础知识，那么在开始使用新框架时，唯一需要熟悉的就是语法。 基本规则将是相同的，因为在所有抽象层下...
第十五章JavaScript-HTMLDOM对象2022优秀文档.ppt
11-14
第十五章JavaScript-HTMLDOM对象2022优秀文档.ppt
javascript基础从小白到高手系列九百九十八：DOM
wanmeijuhao的博客
05-21 132
文档对象模型(DOM，Document Object Model)是 HTML 和 XML 文档的编程接口。DOM 表示 由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早 期的动态 HTML(DHTML，Dynamic HTML)，DOM 现在是真正跨平台、语言无关的表示和操作网页 的方式。DOM Level 1 在 1998 年成为 W3C 推荐标准，提供了基本文档结构和查询的接口。
javascript基础从小白到高手系列六百九十八：DOM
wanmeijuhao的博客
04-30 197
文档对象模型(DOM，Document Object Model)是 HTML 和 XML 文档的编程接口。DOM 表示 由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早 期的动态 HTML(DHTML，Dynamic HTML)，DOM 现在是真正跨平台、语言无关的表示和操作网页 的方式。DOM Level 1 在 1998 年成为 W3C 推荐标准，提供了基本文档结构和查询的接口。
javascript基础从小白到高手系列一千九十八：DOM
wanmeijuhao的博客
05-28 228
文档对象模型(DOM，Document Object Model)是 HTML 和 XML 文档的编程接口。DOM 表示 由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早 期的动态 HTML(DHTML，Dynamic HTML)，DOM 现在是真正跨平台、语言无关的表示和操作网页 的方式。DOM Level 1 在 1998 年成为 W3C 推荐标准，提供了基本文档结构和查询的接口。本章之所以介绍 DOM，主要因为它与浏览器中的 HTML 网页相关，并且在 Java
javascript基础从小白到高手系列一千一百九十八：DOM
wanmeijuhao的博客
06-03 139
文档对象模型(DOM，Document Object Model)是 HTML 和 XML 文档的编程接口。DOM 表示 由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早 期的动态 HTML(DHTML，Dynamic HTML)，DOM 现在是真正跨平台、语言无关的表示和操作网页 的方式。DOM Level 1 在 1998 年成为 W3C 推荐标准，提供了基本文档结构和查询的接口。
javascript基础从小白到高手系列五百九十九：nodeName 与 nodeValue
wanmeijuhao的博客
04-23 253
这两个属性前，最好先检测节点类型，如下所示: 7。
javascript基础从小白到高手系列五百九十五：注册处理程序
wanmeijuhao的博客
04-23 233
在这个例子中，hasIEPlugin()函数接收一个 DOM 标识符参数。为检测插件，这个函数会使用传 入的标识符创建一个新 ActiveXObject 实例。相应代码封装在一个 try/catch 语句中，因此如果创 建的插件不存在则会抛出错误。如果创建成功则返回 true，如果失败则在 catch 块中返回 false。上 面的例子还演示了如何检测 Flash 和 QuickTime 插件。因为检测插件涉及两种方式，所以一般要针对特定插件写一个函数，而不是使用通常的检测函数。
javascript基础从小白到高手系列四百九十八：DOM
wanmeijuhao的博客
04-16 330
文档对象模型(DOM，Document Object Model)是 HTML 和 XML 文档的编程接口。DOM 表示 由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早 期的动态 HTML(DHTML，Dynamic HTML)，DOM 现在是真正跨平台、语言无关的表示和操作网页 的方式。DOM Level 1 在 1998 年成为 W3C 推荐标准，提供了基本文档结构和查询的接口。
javascript基础从小白到高手系列二百九十八：DOM
wanmeijuhao的博客
04-02 282
文档对象模型(DOM，Document Object Model)是 HTML 和 XML 文档的编程接口。DOM 表示 由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早 期的动态 HTML(DHTML，Dynamic HTML)，DOM 现在是真正跨平台、语言无关的表示和操作网页 的方式。DOM Level 1 在 1998 年成为 W3C 推荐标准，提供了基本文档结构和查询的接口。
javascript基础从小白到高手系列八百九十五：注册处理程序
wanmeijuhao的博客
05-14 207
在这个例子中，hasIEPlugin()函数接收一个 DOM 标识符参数。为检测插件，这个函数会使用传 入的标识符创建一个新 ActiveXObject 实例。相应代码封装在一个 try/catch 语句中，因此如果创 建的插件不存在则会抛出错误。如果创建成功则返回 true，如果失败则在 catch 块中返回 false。上 面的例子还演示了如何检测 Flash 和 QuickTime 插件。因为检测插件涉及两种方式，所以一般要针对特定插件写一个函数，而不是使用通常的检测函数。
domql:DOM 渲染 Javascript 库
08-04
DOM 渲染 Javascript 框架。 极简主义 无依赖 可扩展 无需转译，简单的 ES6 代码 一次性导入和子树 您可以从作为样板开始，或者跳入实时编辑器。 主要特征： 错误报告 虚拟 DOM 树 创建 使用原型类创建 支持...
JavaScript学习笔记之DOM基础操作实例小结
10-17
主要介绍了JavaScript学习笔记之DOM基础操作,结合实例形式总结分析了javascript针对dom元素节点、属性的相关获取、设置等操作技巧,需要的朋友可以参考下
dom7：具有jQuery兼容API的用于DOM操作的简约JavaScript库
02-02
Dom7具有jQuery兼容API的用于DOM操作的简约JavaScript库Dom7-是默认的DOM操作库内置 。 它利用大多数边缘和高性能方法进行DOM操作。 您不需要学习任何新知识，它的用法非常简单，因为它具有与众所周知的jQuery库相同...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 318
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1194
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 781
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
JS-12-es6常用知识-async
最新发布
m0_68467925的博客
06-13 536
关键字async作用：声明一个函数为异步函数，允许函数内部使用await关键字等待 Promise 对象的完成。返回值：异步函数总是返回一个 Promise 对象，无论函数内部是否有显式的return语句。如果没有返回语句，函数会隐式地返回一个已解析（resolved）的 Promise，其值为undefined。
javascript学习手册十三：html dom——文档元素的操作（一）
06-28
### 回答1： HTML DOM（文档对象模型）是一种编程接口，允许程序访问和操作HTML文档中的元素。使用JavaScript来操作HTML DOM可以让网页具有交互性和动态性。 在JavaScript中，可以使用getElementById，getElementsByTagName和getElementsByClassName等方法来获取页面上的元素。例如，通过getElementById("myId")可以获取id为"myId"的元素。 操作元素的属性和内容也很简单，可以使用如下方法： - 修改元素的属性：element.attribute = new value - 访问元素的属性：element.attribute - 修改元素的内容：element.innerHTML = new content - 访问元素的内容：element.innerHTML 通过操作HTML DOM，可以实现各种交互效果和动态效果。例如，可以在点击按钮时显示或隐藏元素，或在输入框中输入文本时实时更新页面内容等。 ### 回答2： HTML DOM是JavaScript操作网页中元素和属性的主要方式之一。在HTML DOM中，文档元素是指HTML页面中所有元素的根节点。文档元素的操作包括获取元素、创建元素、删除元素、修改元素属性等。 获取元素是HTML DOM操作的重要一环。在JavaScript中，可以使用getElementById()、getElementsByTagName()、getElementsByClassName()等方法获得HTML页面中的元素。其中getElementById()方法可以通过元素的ID获取该元素的引用，常用于根据ID修改元素的属性或内容。而getElementsByTagName()方法可以通过标签名获取HTML页面中所有该标签的元素，例如获取所有的h1元素，常用于对整个页面的控制。getElementsByClassName()方法可以通过class属性获取HTML页面中所有具有该class的元素。 创建元素是向HTML页面中添加元素的重要方式。可以使用createElement()方法创建一个新元素，然后使用appendChild()方法将其添加到现有元素中。例如，创建一个新的p元素，并将其添加到body元素中可以使用以下代码： var newPara = document.createElement("p"); var textNode = document.createTextNode("This is a new paragraph."); newPara.appendChild(textNode); document.body.appendChild(newPara); 删除元素也是HTML DOM中的一个常用操作。可以使用removeChild()方法删除现有元素，例如： var parent = document.getElementById("parent-id"); var child = document.getElementById("child-id"); parent.removeChild(child); 修改元素属性是HTML DOM中的另一个核心操作。可以使用setAttribute()方法修改元素的属性值，例如： var element = document.getElementById("my-id"); element.setAttribute("class", "new-class"); 可以通过HTML DOM操作文档元素，实现对页面元素和属性的各种操作。掌握HTML DOM的知识，可以更好地控制和管理HTML页面。 ### 回答3： HTML DOM是JavaScript操作网页元素的主要方式之一，它的核心在于文档对象模型（DOM，Document Object Model），需要熟悉DOM才能灵活操作网页元素。文档元素是HTML页面中的根元素，它是其他所有元素的祖先元素，也是HTML DOM操作的基础。 一、获取元素 在JavaScript中，我们可以通过各种方式来获取文档元素，例如getElementById()、getElementsByTagName()、getElementsByClassName()等。其中，通过id、标签名和类名获取元素是最常用的三种方法。 1. getElementById() 此方法用于获取具有指定id属性的元素，其语法为document.getElementById(id)。id属性在整个HTML文档中应该是唯一的。 示例：获取id为“demo”的元素 ``` var demo = document.getElementById("demo”); ``` 2. getElementsByTagName() 此方法用于获取具有指定标签名的元素，其语法为document.getElementsByTagName(tagname)。 示例：获取所有p元素 ``` var pList = document.getElementsByTagName("p"); ``` 3. getElementsByClassName() 此方法用于获取具有指定类名的元素，其语法为document.getElementsByClassName(classname)。 示例：获取类名为“red”的元素 ``` var redList = document.getElementsByClassName("red"); ``` 二、改变元素 有很多种方法可以改变文档元素的属性和样式，下面列举一些常见的方法： 1. 修改元素的文本内容 我们可以通过innerHTML属性和innerText属性来修改元素的文本内容。 innerHTML属性用于改变元素的HTML内容，其语法为element.innerHTML=new html content； innerText属性用于改变元素的纯文本内容，其语法为element.innerText=new text content； 2. 修改元素的样式 我们可以通过style属性来修改元素的样式，其中style属性包含了元素的所有样式属性。 示例：将id为“demo”的元素背景色改为红色 ``` document.getElementById("demo").style.backgroundColor = "red"; ``` 3. 创建新元素 我们可以使用document.createElement()方法来创建新元素，并通过appendChild()方法将其加入到指定的元素内。 示例：创建一个新的p元素 ``` var newP = document.createElement("p"); ``` 4. 删除元素 我们可以使用parentNode.removeChild()方法来删除指定的元素。 示例：删除id为“demo”的元素 ``` var demo = document.getElementById("demo"); demo.parentNode.removeChild(demo); ``` 三、总结 通过这篇文章的学习，我们了解了HTML DOM的基础知识和基本操作方法，例如获取元素、改变元素的属性和样式以及创建和删除元素等。掌握这些操作方法可以帮助我们更好地操作网页元素，从而实现丰富多彩的网页效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值