js DOM 操作简述

DOM（Document Object Model）是一种用于表示和操作HTML、XML等文档结构的编程接口。在 Web 编程中，我们经常需要通过 JavaScript 来修改或创建 HTML 元素和样式，这就要涉及到 DOM 操作。

DOM 操作可以分为以下几个主要步骤：

获取 DOM 元素：我们可以使用各种选择器（如 ID 选择器、类选择器、标签选择器等）来获取 HTML 元素。例如，使用 document.getElementById() 函数来获取指定 ID 的元素。
修改元素属性：可以使用 .setAttribute() 方法来修改元素的属性（如 class、style 等）。也可以使用 .innerHTML 属性来修改元素的内容。例如，使用 document.getElementById('example').setAttribute('class', 'new-class') 可以将 ID 为 example 的元素的 class 属性值修改为 new-class。
添加、移除和替换元素：可以使用 .appendChild() 方法在已有元素的基础上添加新元素。还可以使用 .removeChild() 方法从已有元素中移除子元素。使用 document.createElement() 函数可以创建新的 HTML 元素。例如，使用 var newElement = document.createElement('p') 来创建一个新的段落元素。
监听事件：可以使用 .addEventListener() 方法为元素添加事件监听器。例如，使用 document.getElementById('example').addEventListener('click', function() { alert('Clicked!'); }) 可以为 ID 为 example 的元素添加一个点击事件监听器，在点击该元素时弹出一个弹窗。

以上只是 DOM 操作的一些常见方法和技术，实际上还有很多其他的操作方式和细节。总之，DOM 操作是 Web 编程中非常重要的一部分，它可以让我们通过 JavaScript 与 HTML 元素进行交互并创造出丰富的用户界面。

获取DOM元素

通过 ID 获取元素

我们可以使用 document.getElementById() 函数来获取指定 ID 的元素，例如：

<div id="example">Hello World!</div>

let element = document.getElementById('example');
console.log(element.innerHTML) // 输出 "Hello World!"

通过选择器获取元素

除了 ID 选择器，我们还可以使用类选择器、标签选择器以及其他复杂的选择器来获取元素。可以使用 document.querySelector() 或 document.querySelectorAll() 函数来实现。例如：

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

let firstItem = document.querySelector('.item');
console.log(firstItem.textContent) // 输出 "Item 1"

let allItems = document.querySelectorAll('.item');
allItems.forEach(function(item) {
  console.log(item.textContent);
});

这段代码是使用 document.querySelectorAll() 方法获取拥有 class="item" 属性的所有元素，并且使用 forEach() 方法循环遍历每个元素，将每个元素的文本内容打印到控制台。

具体来说，假设 HTML 文档中有以下结构：

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

那么，使用上述代码可以获取所有 class="item" 的 <li> 元素，并且将它们的文本内容分别打印到控制台。输出结果如下：

Item 1
Item 2
Item 3

可以方便地获取文档中符合条件的元素列表，并且可以通过遍历列表来对每个元素进行进一步的处理。

通过标签名获取元素

我们可以使用 document.getElementsByTagName() 函数来获取指定标签名的元素。例如：

<p>Hello World!</p>

let paragraphs = document.getElementsByTagName('p');
console.log(paragraphs[0].innerHTML) // 输出 "Hello World!"

使用getElementByTagName()方法返回带有指定标签名的对象的集合

通过类名获取元素

我们可以使用 document.getElementsByClassName() 函数来获取指定类名的元素。例如：

具体来说，document.getElementsByClassName(className) 方法会返回一个 HTMLCollection 对象，其中包含了文档中所有指定类名 className 的元素。例如，假设 HTML 文档中有以下结构：

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
</ul>

那么可以使用以下代码获取所有 class="item" 的元素：

let items = document.getElementsByClassName('item');

此时，items 变量将被赋值为一个 HTMLCollection 对象，该对象包含了三个元素，即三个拥有 class="item" 属性的 <li> 元素。我们可以使用下标或者循环遍历来访问每个元素，例如：

console.log(items[0].innerText); // 输出 "Item 1"
console.log(items[1].innerText); // 输出 "Item 2"
console.log(items[2].innerText); // 输出 "Item 3"

for (let i = 0; i < items.length; i++) {
  console.log(items[i].innerText);
}

总之，通过类名获取元素是一种方便而常用的 DOM 操作方法，可以方便地获取文档中指定类名的元素列表，并进行进一步的操作。

特殊的元素获取

以下是几种获取特殊元素的常见方法：

获取表单元素：可以使用 document.forms 或 document.getElementsByTagName('form') 方法来获取文档中的表单元素。例如，可以使用 document.forms[0] 来获取第一个表单元素。获取表单中具体某个元素可以使用该表单元素的 elements 属性获取，例如 document.forms[0].elements[0] 可以获取第一个表单元素的第一个控件。

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="Submit">
</form>

<script>
let form = document.forms[0]; // 获取第一个表单元素
let usernameInput = form.elements.username; // 获取表单中用户名输入框
let passwordInput = form.elements.password; // 获取表单中密码输入框
console.log(usernameInput);     // <input type="text" id="username" name="username">
console.log(passwordInput);    //   <input type="password" id="password" name="password">
</script>

获取图片元素：可以使用 document.images 或 document.getElementsByTagName('img') 方法来获取文档中的图片元素。例如，可以使用 document.images[0] 来获取第一张图片元素。

<img src="image.jpg" alt="A beautiful image">

<script>
let image = document.images[0]; // 获取第一张图片元素
console.log(image.alt); // 输出 "A beautiful image"
</script>

获取链接元素：可以使用 document.links 或 document.getElementsByTagName('a') 方法来获取文档中的链接元素。例如，可以使用 document.links[0] 来获取第一个链接元素。

<a href="https://www.baidu.com">百度</a>

<script>
let link = document.links[0]; // 获取第一个链接元素
console.log(link.href); // 输出 "https://www.baidu.com"
</script>

获取当前选中的元素：可以使用 document.activeElement 方法来获取当前处于活动状态的元素（即被用户选中的元素）。

<input type="text" value="Hello, world!" onfocus="logActiveElement()">

<script>
function logActiveElement() {
  console.log(document.activeElement.value); // 输出 "Hello, world!"
}
</script>

获取根元素：<html> 元素是 HTML 页面的根元素，可以使用 document.documentElement 方法来获取该元素。
获取 body 元素：可以使用 document.body 方法来获取文档中的 body 元素。

<!DOCTYPE html>
<html>
<head>
  <title>My HTML Page</title>
</head>
<body>
  <h1>My HTML Page</h1>
  <p>Hello, world!</p>
  <script>
    console.log(document.documentElement); // 获取根元素
    console.log(document.body); // 获取 body 元素
  </script>
</body>
</html>

修改元素属性

修改元素属性是通过获取对应的元素，然后操作该元素的属性来实现的。DOM 提供了几种常见的方式来修改元素属性，例如：

通过属性赋值直接修改元素属性

<div id="myDiv" class="hidden" style="background-color: blue">Hello, world!</div>

<script>
let myDiv = document.getElementById("myDiv"); // 获取元素
myDiv.id = "newId"; // 修改元素的 ID 属性
myDiv.className = "visible"; // 修改元素的 class 属性
myDiv.style.backgroundColor = "red"; // 修改元素的样式
myDiv.innerHTML = "Goodbye, world!"; // 修改元素的内容
</script>

使用 `setAttribute` 方法来修改元素的属性

<div id="myDiv" class="hidden" style="background-color: blue">Hello, world!</div>

<script>
let myDiv = document.getElementById("myDiv"); // 获取元素
myDiv.setAttribute("id", "newId"); // 修改元素的 ID 属性
myDiv.setAttribute("class", "visible"); // 修改元素的 class 属性
myDiv.setAttribute("style", "background-color: red"); // 修改元素的样式
myDiv.innerHTML = "Goodbye, world!"; // 修改元素的内容
</script>

注意：使用 setAttribute 方法修改样式时需要将 CSS 样式设置为字符串格式。

总之，通过获取到元素，然后操作其属性，可以轻松地修改元素的各种属性和样式。需要注意的是，修改元素属性前需要先获取到该元素的引用，否则无法对其进行修改。

添加、移除和替换元素

当需要添加、移除或替换 DOM 元素时，可以使用以下方法：

添加元素

添加元素：使用 .appendChild() 或 .insertBefore() 方法向现有元素添加一个新的子元素。

<div id="myDiv"></div>

<script>
let myDiv = document.getElementById("myDiv"); // 获取元素
let newElement  = document.createElement("p"); // 创建新元素
newElement.textContent = "Hello, world!"; // 设置元素内容
myDiv.appendChild(newElement); // 将新元素添加到 myDiv 中
</script>

该示例中，我们首先创建了一个新的 p 标签，并设置其内容为 "Hello, world!"。然后使用 .appendChild() 方法将该元素添加到 myDiv 元素中。

移除元素

移除元素：使用 .removeChild() 方法移除现有元素的一个子元素。

<div id="myDiv">
  <p>Hello, world!</p>
</div>

<script>
let myDiv = document.getElementById("myDiv"); // 获取元素
let childElement = myDiv.children[0]; // 获取 myDiv 的第一个子元素
myDiv.removeChild(childElement); // 移除子元素
</script>

该示例中，我们首先获取了 myDiv 元素的第一个子元素（即 <p> 标记），然后使用 .removeChild() 方法将该元素从 myDiv 元素中移除。

替换元素

替换元素：使用 .replaceChild() 方法用新元素来替换现有元素的子元素。

<div id="myDiv">
  <p>Hello, world!</p>
</div>

<script>
let myDiv = document.getElementById("myDiv"); // 获取元素
let newElement = document.createElement("h1"); // 创建新元素
newElement.textContent = "Goodbye, world!"; // 设置新元素内容
let childElement = myDiv.children[0]; // 获取 myDiv 的第一个子元素
myDiv.replaceChild(newElement, childElement); // 用新元素替换子元素
</script>

该示例中，我们首先创建了一个新的 h1 元素，并设置其内容为 "Goodbye, world!"。然后获取了 myDiv 元素的第一个子元素（即 <p> 标记），最后使用 .replaceChild() 方法将新元素替换了原有的子元素。

需要注意的是，添加、移除和替换元素通常会改变 DOM 的结构，如果不小心操作可能会导致一些错误，因此需要小心使用这三种方法。

javascript事件

事件是指用户在浏览器中执行某个操作时产生的响应事件，可以是点击按钮、按下键盘、滚动鼠标等等。JavaScript 通过为 DOM 元素添加事件监听器来捕获这些事件，并在事件发生时执行指定的 JavaScript 代码，实现对用户交互的响应

事件的三要素

事件的三要素是指事件的三个基本组成部分，即事件源、事件类型和事件处理器。

事件源：也称为事件目标，指触发事件的 DOM 元素。事件源可以是任何 HTML 元素，例如按钮、输入框、图片等等。
事件类型：指具体的事件类型，例如点击事件（click）、鼠标移动事件（mousemove）、键盘按下事件（keydown）等等。在 JavaScript 中，使用 addEventListener() 方法注册事件监听器时需要指定事件类型。
事件处理器：也称为事件监听器或事件回调函数，指在事件发生时需要执行的 JavaScript 代码。事件处理器可以是一个已定义的函数，也可以是一个匿名函数。

<button onclick="alert('Button clicked!')">Click me</button>

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

事件执行的步骤

1、获取事件源

2、注册事件（也叫绑定事件）

3、添加事件处理程序（一般用function函数）

监听事件

在 JavaScript 中，可以使用监听事件来实现对用户交互的响应。以下是一个简单的示例，展示如何使用 addEventListener() 方法来监听按钮的点击事件：

<button id="myButton">Click me</button>

<script>
let myButton = document.getElementById("myButton"); // 获取按钮元素

myButton.addEventListener("click", function() {
  alert("Button clicked!"); // 响应按钮点击事件
});
</script>

在上面的代码中，我们获取了 id 为 myButton 的按钮元素，并使用 addEventListener() 方法向该元素添加一个 click 事件的监听器函数。当用户点击按钮时，该函数将弹出一个警告框，显示 "Button clicked!"。

除了点击事件，还有很多其他的 DOM 事件可供监听，包括 mouseover、keydown、submit 等等。可以使用 addEventListener() 方法为元素添加多个事件监听器，以响应不同类型的事件。

除了按钮点击事件，JavaScript 中还有很多其他的 DOM 事件可供监听，包括 mouseover、keydown、submit 等等。以下是对这三种事件的补充说明：

mouseover 事件：该事件在鼠标指针进入元素时触发，通常用于实现悬停效果。可以使用 addEventListener() 方法添加 mouseover 事件监听器。

<div id="myDiv">Hover over me</div>

<script>
let myDiv = document.getElementById("myDiv"); // 获取元素

myDiv.addEventListener("mouseover", function() {
  myDiv.textContent = "Mouse over me!"; // 修改元素内容
});

myDiv.addEventListener("mouseout", function() {
  myDiv.textContent = "Hover over me"; // 恢复元素内容
});
</script>

在上面的代码中，我们使用 addEventListener() 方法为 myDiv 元素添加了两个事件监听器，分别响应 mouseover 和 mouseout 事件。当鼠标指针进入 myDiv 元素时，第一个监听器将修改元素内容，显示 "Mouse over me!"。当鼠标指针离开元素时，第二个监听器将恢复元素原有的内容。

keydown 事件：该事件在用户按下键盘上的任意一个键时触发，通常用于实现快捷键功能。可以使用 addEventListener() 方法添加 keydown 事件监听器。

<input type="text" id="myInput">

<script>
let myInput = document.getElementById("myInput"); // 获取输入框元素

myInput.addEventListener("keydown", function(event) {
  if (event.key === "Enter") { // 判断是否按下的是 Enter 键
    alert("Enter pressed!"); // 弹出警告框
  }
});
</script>

在上面的代码中，我们使用 addEventListener() 方法为 myInput 元素添加了一个 keydown 事件监听器。当用户在输入框中按下键盘上的任意一个键时，该监听器将检查是否按下的是 Enter 键，如果是，则弹出一个警告框，显示 "Enter pressed!"。

submit 事件：该事件在用户提交表单时触发，通常用于表单验证或表单数据处理。可以使用 addEventListener() 方法添加 submit 事件监听器。

<form id="myForm">
  <input type="text" name="firstName" placeholder="First name"><br>
  <input type="text" name="lastName" placeholder="Last name"><br>
  <button type="submit">Submit</button>
</form>

<script>
let myForm = document.getElementById("myForm"); // 获取表单元素

myForm.addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单提交的默认行为

  let firstName = myForm.elements.firstName.value; // 获取输入框中的值
  let lastName = myForm.elements.lastName.value;

  alert(`Hello, ${firstName} ${lastName}!`); // 弹出警告框，显示 Hello, xxx xxx!
});
</script>

在上面的代码中，我们使用 addEventListener() 方法为 myForm 元素添加了一个 submit 事件监听器。当用户点击表单中的提交按钮时，该监听器将阻止表单提交的默认行为（即重新加载页面），然后获取表单中输入框的值，并弹出一个警告框，显示 "Hello, xxx xxx!"。

需要注意的是，当对象被销毁时，应该通过 removeEventListener() 方法将所有监听器从对象中移除，以便及时回收内存。

js DOM 操作简述

js DOM 操作简述

获取DOM元素

通过 ID 获取元素

通过选择器获取元素

通过标签名获取元素

通过类名获取元素

特殊的元素获取

修改元素属性

通过属性赋值直接修改元素属性

使用 setAttribute 方法来修改元素的属性

添加、移除和替换元素

添加元素

移除元素

替换元素

javascript事件

事件的三要素

事件执行的步骤

监听事件

评论

使用 `setAttribute` 方法来修改元素的属性