DOM 通常被称为 DOM 树, 由称为节点的对象树组成. 在 DOM 简介中, 我们讨论了文档对象模型 (DOM), 如何使用控制台访问 document 对象和修改其属性, 以及 html 源代码和 DOM 之间的区别.
在本教程中, 我们将回顾 HTML 术语, 这对于使用 JavaScript 和 DOM 至关重要, 我们将了解 DOM 树, 节点是什么以及如何识别最常见的节点类型. 最后, 我们将超越控制台并创建一个 JavaScript 程序来交互式地修改 DOM.
HTML 术语
理解 HTML 和 JavaScript 术语对于理解如何使用 DOM 至关重要. 让我们简要回顾一些 HTML 术语.
首先, 我们来看看这个 HTML 元素.
<a href="index.html">Home</a>
这里我们有一个锚元素, 它是一个链接 index.HTML.
a 是标签
href 是属性
index.HTML 是属性值
Home 是文字.
开始和结束标记之间的所有内容组合在一起构成整个 HTML 元素.
我们将与合作 index.HTML 从以前的教程:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- Learning the DOM
- </title>
- </head>
- <body>
- <h1>
- Document Object Model
- </h1>
- </body>
- </HTML>
使用 JavaScript 访问元素的最简单方法是使用 id 属性. 让我们将上面的链接添加到我们的 index.HTML 文件 id 中 nav.
<a id="nav" href="index.html">Home</a>
在浏览器窗口中加载或重新加载页面并查看 DOM 以确保代码已更新.
我们将使用该 getElementById() 方法来访问整个元素. 在控制台中, 键入以下内容:
- document.getElementById('nav');
- <a id="nav" href="index.html">Home</a>
我们使用了检索整个元素 getElementById(). 现在, 我们不是每次想要访问 nav 链接时都键入该对象和方法, 而是将元素放入变量中以便更轻松地使用它.
let navLink = document.getElementById('nav');
该 navLink 变量包含我们的锚元素. 从这里, 我们可以轻松修改属性和值. 例如, 我们可以通过更改 href 属性来更改链接的位置:
navLink.href = 'https://www.wikipedia.org';
我们还可以通过重新分配 textContent 属性来更改文本内容:
navLink.textContent = 'Navigate to Wikipedia';
现在, 当我们在控制台中查看元素或通过检查 Elements 标记时, 我们可以看到元素的更新方式.
- navLink;
- [secondary_label Output] <a id="nav" href="https://www.wikipedia.org/">Navigate to Wikipedia</a>
这也反映在网站的前端.
刷新页面将使所有内容恢复为原始值.
此时, 您应该了解如何使用 document 方法来访问元素, 如何将元素分配给变量, 以及如何修改元素中的属性和值.
DOM 树和节点
DOM 中的所有项都定义为节点. 有许多类型的节点, 但我们最常使用的主要有三种:
元素节点
文本节点
评论节点
当 HTML 元素是 DOM 中的项时, 它被称为元素节点. 元素外部的任何单独文本都是文本节点, HTML 注释是注释节点. 除了这三种节点类型之外, 它 document 本身也是一个文档节点, 它是所有其他节点的根.
DOM 由嵌套节点的树结构组成, 通常称为 DOM 树. 您可能熟悉祖先的家谱, 其中包括父母, 孩子和兄弟姐妹. DOM 中的节点也称为父节点, 子节点和兄弟节点, 具体取决于它们与其他节点的关系.
要演示, 请创建一个 nodes.HTML 文件. 我们将添加文本, 注释和元素节点.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- Learning About Nodes
- </title>
- </head>
- <body>
- <h1>
- An element node
- </h1>
- <!-- a comment node -->
- A text node.
- </body>
- </HTML>
所述 HTML 元素节点是父节点. head 并且 body 是兄弟姐妹, 孩子的 HTML.body 包含三个子节点, 它们都是兄弟节点 - 节点的类型不会改变它嵌套的级别.
注意: 使用 HTML 生成的 DOM 时, HTML 源代码的缩进将创建许多空文本节点, 这些节点在 DevTools Elements 选项卡中不可见.
识别节点类型
文档中的每个节点都有一个节点类型, 可以通过该 nodeType 属性访问. Mozilla Developer Network 具有所有节点类型常量的最新列表. 下面是我们在本教程中使用的最常见节点类型的图表.
在开发人员工具的 "元素" 选项卡中, 您可能会注意到, 无论何时单击并突出显示 DOM 中的任何行, 其值 == $0 都会显示在其旁边. 这是通过键入来访问 Developer Tools 中当前活动元素的非常方便的方法 $0.
在 nodes.HTML 的控制台中, 单击元素中的第 body 一个 h1 元素.
在控制台中, 使用属性获取当前所选节点的节点类型 nodeType.
- $0.nodeType;
- Console:
- 1
随着 h1 元件选择, 你会看到 1 作为输出, 我们可以看到关联到 ELEMENT_NODE. 做文字和注释是相同的, 他们将输出 3 和 8 分别.
当您知道如何访问元素时, 您可以在不突出显示 DOM 中的元素的情况下查看节点类型.
- document.body.nodeType;
- Console:
- 1
除此之外 nodeType, 您还可以使用该 nodeValue 属性获取文本或注释节点的值, 并 nodeName 获取元素的标记名称.
使用 Events 修改 DOM
到目前为止, 我们只看到如何修改控制台中的 DOM, 我们看到它是暂时的; 每次刷新页面时, 更改都会丢失. 我们可以结合在本教程中学到的内容来创建一个交互式按钮, 在单击时执行使用控制台更新了正文的背景颜色的操作.
让我们回到我们的 index.HTML 文件并添加一个 button 元素 id. 我们还将在新 JS 目录中添加指向新文件的链接 JS/scripts.JS.
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <title>
- Learning the DOM
- </title>
- </head>
- <body>
- <h1>
- Document Object Model
- </h1>
- <button id="changeBackground">
- Change Background Color
- </button>
- <script src="js/script.js">
- </script>
- </body>
- </HTML>
JavaScript 中的事件是用户采取的操作. 当用户将鼠标悬停在元素上, 或单击某个元素或按下键盘上的特定键时, 这些都是所有类型的事件. 在这种特殊情况下, 我们希望我们的按钮能够在用户点击它时监听并准备好执行操作. 我们可以通过向按钮添加事件监听器来实现此目的.
创建 scripts.JS 并将其保存在新 JS 目录中. 在文件中, 我们首先找到 button 元素并将其分配给变量.
let button = document.getElementById('changeBackground')
使用该 addEventListener() 方法, 我们将告诉按钮监听单击, 并在单击后执行功能.
- button.addEventListener('click', () => {
- // action will go here
- })
最后, 在函数内部, 通过下面代码来更改背景颜色 fuchsia.
document.body.style.backgroundColor = 'fuchsia'
这是我们的整个脚本:
- let button = document.getElementById('changeBackground')
- button.addEventListener('click', () => {
- document.body.style.backgroundColor = 'fuchsia'
- })
保存此文件后, 请 index.HTML 在浏览器中刷新. 单击按钮, 将触发事件.
由于 JavaScript 事件, 页面的背景颜色已更改为紫红色.
结论
在本教程中, 我们回顾了允许我们理解和修改 DOM 的术语. 我们学习了 DOM 如何构建为节点树, 通常是 HTML 元素, 文本或注释, 我们创建了一个脚本, 允许用户修改网站, 而无需手动将代码键入开发人员控制台.
来源: http://www.css88.com/web/javascript/12415.html