网站首页 > 技术文章正文

DOM—简化... dom_s_

btikc 2024-10-25 10:58:53 技术文章 3 ℃ 0 评论

思考没有浏览器的生活！可怕？幸运的是，我们有浏览器，它们给了我们生命的礼物——一扇通往我们混乱但美好世界的窗口。本文探讨了使用 Chrome 的 DOM。让我们开始…

学习目标

什么是 DOM？

当浏览器下载 HTML 时，它会构建一个称为文档对象模型 (DOM) 的实时数据结构。我们操作 DOM 以实时更改文档的样式、结构和内容。图1。

当我们更改 DOM 时，我们只更改 HTML 的表示，而不更改源代码。这种表示称为 dom-tree。浏览器窗口的文档对象会立即显示对 dom-tree 的更改。图 2。

DOM 树

DOM 中的一切都是一个节点。 dom-tree 的顶部是文档节点，它是位于它下面的所有节点的父节点。节点有子节点，具有相同父节点的子节点是兄弟节点。

DOM 位于哪里？

DOM 是称为浏览器对象模型 (BOM) 的更大架构的一部分。图 4. BOM 公开强大的对象以执行诸如获取用户位置或从服务器获取数据之类的操作。

对于选项卡式浏览器，每个选项卡都是一个窗口对象，并且该窗口对象包含文档对象。我们使用 DOM 来操作文档对象来更新页面。图 5。

如何更改 DOM？

要更改文档的样式、结构或内容，我们在文档对象上使用 dom-methods。笔记！ — dom-nodes 是对象，并且对象具有我们使用 JavaScript 更改的方法和属性。图 6。

CRUD示例

让我们使用 dom-methods 来：

首先，在 Chrome 的地址栏中输入 about:blank 以获取基本的 html 页面，然后右键单击该文档并选择检查以调出开发人员工具。如果不可见，请点击退出以调出控制台。图 7。

我们通过 window.document 访问 dom 方法，它返回对包含在窗口中的文档的引用。
让我们使用 let paragraph = window.document.createElement('p') 创建一个 <p> 元素节点。图 8。
让我们将 <p> 元素节点的 innerText 属性更改为“Hello World with paragraph.innerText = 'Hello World'
我们现在可以使用 window.document.body.appendChild(paragraph) 将 <p> 元素节点附加到 <body> 元素节点。请注意 DOM 是如何立即更新的！ DOM 是一个活树数据结构。此外，观察“元素选项卡”中的 HTML 是如何更新的。
最后，我们使用 window.document.body.removeChild(paragraph) 从 <body> 元素节点中删除 <p> 元素节点。

恭喜，您使用 dom 方法和属性与 DOM 进行了交互。那有多容易？

事件监听器

最后，让我们为 <body> 元素节点添加一个“点击”事件侦听器，以在用户点击文档时将正文的背景更改为随机颜色。图 9。

document.body.addEventListener(‘click’,()=>{document.body.bgColor= Math.floor(Math.random()*16777215).toString(16)})

这结束了我们对 DOM 的简短探索。

现在去砸那个拍手按钮！