Logo

菜单

发布于 2026-01-06 0 阅读
0

JavaScript：DOM 操作入门

JavaScript：DOM 操作入门

请在推特上关注我：关注 @justericchapman

DOM

文档对象模型（Document Object Model）是 HTML 文档的结构化表示。它允许 JavaScript 访问 HTML 元素和样式并对其进行操作。

使用 JS，我们可以更改文本、HTML 属性，甚至 CSS 样式。

DOM 示例

<html>
  <body>
    <div class="message">
      Hello World
    </div>
    <input type="text" id="search" placeholder="search" />
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

在这个HTML文档中，我们有很多元素，例如body、div、input等等。

JS 可以访问和操作此 HTML 文档及其所有元素。

// Access a DOM element 
const searchInput = document.querySelector('#search')
console.log(searchInput.placeHolder) // Search
Enter fullscreen mode Exit fullscreen mode

在前面的例子中，JS 使用 document.querySelector 来访问 DOM 元素。可以根据多种条件选择 DOM 元素。

本次请求使用了键“#search”。“#”符号指示 JavaScript 在 id 属性中查找匹配的键。

document.querySelector('#search') 中只有一个元素的 id 属性与该元素匹配：

<input type="text" id="search" placeholder="search" />
Enter fullscreen mode Exit fullscreen mode

该元素的引用位于 searchInput 变量中。

const searchInput = document.querySelector('#search')
Enter fullscreen mode Exit fullscreen mode

引用设置完成后，我们可以检索或更改任何元素属性。

searchInput.value = 'Hello World' // Will change input value to 'Hello World'
Enter fullscreen mode Exit fullscreen mode

另一个例子是选择类名为“message”的元素。

<html>
  <body>
    <div class="message">
      Hello World
    </div>
    <input type="text" id="search" placeholder="search" />
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

在本文档中，只有一个元素带有 message 类，那就是第一个 div 元素。

可以使用 document.querySelector 来引用该元素。但这次我们不使用 # 符号，而是使用点号 (.)。点号告诉 JavaScript 查找类名匹配项。

const divMessage = document.querySelector('.message')
console.log(divMessage.textContent)) // Hello World
divMessage.textContent = 'Hi World' // Change text to Hi World
Enter fullscreen mode Exit fullscreen mode

如果我想访问文档的 body 标签呢？
在这种情况下，我可以使用：

const body = document.querySelector('body')
Enter fullscreen mode Exit fullscreen mode

由此我们开始发现规律。当我们想要选择一个元素时，我们会使用 `document.querySelector` 方法。这个方法接受一个参数，即我们要查找的文本。该文本可以带有前缀，用于指定 JavaScript 的查找范围。

// No prefix = look for tag names
document.querySelector('body')

// # prefix = look in id attributes
document.querySelector('#search')

// dot (.) = look in class name 
document.querySelector('.message')
Enter fullscreen mode Exit fullscreen mode

事件监听器：
如果我们想让 JavaScript 对点击事件做出反应该怎么办？例如，每次按钮被点击时如何更改消息？

<html>
  <body>
    <div class="message">
      This is a message
    </div>
    <input type="text" id="inputMessage" placeholder="Enter a message" />
    <button id="btnChange">Change message</button>
    <script src="main.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

每次点击 DOM 中的按钮，都会触发一个事件。我们可以让 JavaScript 监听该事件，并在 DOM 触发该特定事件时执行某些操作。

// First step, get a reference to the button element
const btnChange = document.querySelector('#btnChange')

// Next create a event listener for the click event
btnChange.addEventListener('click', function() {
  // This function will execute each time the button is click
  const inputMessage = document.querySelector('#inputMessage')
  const message = document.querySelector('.message')
  message.textContent = inputMessage.value
})
Enter fullscreen mode Exit fullscreen mode

如果我们想让输入内容每次改变时都更新提示信息，该怎么办？也就是说，每次输入框中的按键都会自动更新提示信息，无需使用按钮。

在这种情况下，我们需要监听另一个事件。输入框有一个名为“input”的事件，每次输入内容发生变化时都会触发该事件。我们可以监听这个事件并执行代码来更新消息。

// First step, get a reference to the input field
const inputMessage = document.querySelector('#inputMessage')

// Next create a event listener for the change event
inputMessage.addEventListener('input', function(e) {
  // This function will execute each time the input change 
  const message = document.querySelector('.message')
  // e reference the actual event
  // target reference the event element source (in this case the input field 
  message.textContent = e.target.value
})
Enter fullscreen mode Exit fullscreen mode

全局事件。有没有一种事件可以附加到整个页面的任何位置？比如监听按键事件？
我们可以使用 document.addEventListener：

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') {
    console.log('Escape key press')
  }
})
Enter fullscreen mode Exit fullscreen mode

更改 DOM 元素样式（CCS）
例如，我们可以更改文档主体的背景颜色

// Change to light green background
document.querySelector('body').style.backgroundColor = '#60b250' 
// Hide a element
document.querySelector('.message').style.display = 'none'
// Show a element
document.querySelector('.message').style.display = 'block'
Enter fullscreen mode Exit fullscreen mode

多选：
当多个元素包含例如类名“.message”时该怎么办？

<html>
  <body>
    <div class="message">
      This is a message
    </div>
    <div class="message">
      This is another message
    </div>
    <div class="message">
      This is last message
    </div>

  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

如果我们选择使用

devMessage = document.querySelector(.message)
Enter fullscreen mode Exit fullscreen mode

querySelector 只会返回第一次匹配结果。

如果我想选择全部 3 个元素，该怎么做？
使用 querySelectorAll：

divMessages = document.querySelectorAll('.message)
Enter fullscreen mode Exit fullscreen mode

我们可以使用循环来访问每个元素：

for (const element of divMessages) {
  console.log(element.textContent);
}
// or
divMessages.forEach((element) => console.log(element.textContent))
Enter fullscreen mode Exit fullscreen mode

修改元素类列表：
可以向元素添加或删除类。以下是一个带有两个类的 div 示例。

<html>
  <body>
    <div class="message hidden">
      This is a message
    </div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

例如，我们可以移除JS中的隐藏类：

const divMessage = document.querySelector('.message')
divMessage.classList.remove('hidden')
// or you can also add a class
divMessage.classList.add('hidden')

// We can check if a element contain a specific class
if (divMessage.classList.contains('hidden')) {
  // do something
}
Enter fullscreen mode Exit fullscreen mode

请在推特上关注我：关注 @justericchapman

文章来源：https://dev.to/ericchapman/javascript-my-learning-journey-dom-manipulation-101-3efb
高级 Ansible 技术及实际应...
安全存储密码（C#）