常见的DOM元素与JavaScript的交互方式[示例]

DOM（Document Object Model）是一个编程接口，用于在浏览器中表示和操作 HTML 和 XML 文档。通过 DOM，开发人员可以使用 JavaScript 等编程语言来操纵网页上的各种元素，例如添加、删除、修改元素、响应用户事件等。

以下是一些常见的 DOM 元素与 JavaScript 的交互方式：

1. 获取 DOM 元素：可以使用 `document.getElementById()`、`document.querySelector()` 等方法获取特定的 DOM 元素。例如：

const header = document.getElementById('header');
const button = document.querySelector('.button');

1. 修改 DOM 元素：可以使用 `element.innerHTML`、`element.textContent` 等属性来修改 DOM 元素的内容。也可以使用 `element.setAttribute()` 方法来修改元素的属性。例如：

header.textContent = 'Hello, World!';
button.setAttribute('disabled', true);

1. 创建新的 DOM 元素：可以使用 `document.createElement()` 方法创建新的 DOM 元素，然后使用 `element.appendChild()` 方法将新元素添加到父元素中。例如：

const p = document.createElement('p');
p.textContent = 'This is a new paragraph.';
document.body.appendChild(p);

1. 事件处理：可以使用 `element.addEventListener()` 方法来为 DOM 元素添加事件监听器，从而在特定事件发生时执行特定的代码。例如：

button.addEventListener('click', () => {alert('Button clicked!');
});

<!DOCTYPE html>
<html>
<head><title>DOM Example</title>
</head>
<body><h1 id="header">Hello, World!</h1><button id="button">Click me</button><script>// 获取 DOM 元素const header = document.getElementById('header');const button = document.getElementById('button');// 修改 DOM 元素header.textContent = 'Hello, DOM!';// 创建新的 DOM 元素const p = document.createElement('p');p.textContent = 'This is a new paragraph.';document.body.appendChild(p);// 事件处理button.addEventListener('click', () => {alert('Button clicked!');});</script>
</body>
</html>

1. 遍历 DOM 元素：可以使用 `element.children`、`element.firstChild`、`element.lastChild` 等属性来遍历 DOM 元素，从而对其进行操作。例如：

const list = document.getElementById('list');
const listItems = list.children;for (let i = 0; i < listItems.length; i++) {listItems[i].style.color = 'red';
}

除了上面提到的方法和属性外，JavaScript 中还有许多其他的方法和属性可以用来操作 DOM 元素。以下是一些常见的方法和属性：

1. `element.classList`：用于操作 DOM 元素的 CSS 类。可以使用 `add()`、`remove()` 和 `toggle()` 等方法来添加、删除和切换 CSS 类。
2. `element.style`：用于操作 DOM 元素的内联样式。可以使用 `element.style.property` 的语法来设置或获取特定的 CSS 属性。
3. `element.getAttribute()` 和 `element.setAttribute()`：用于获取和设置 DOM 元素的属性。
4. `element.innerHTML`：用于获取或设置 DOM 元素的 HTML 内容。
5. `element.outerHTML`：用于获取或设置 DOM 元素的完整 HTML 代码。
6. `element.textContent`：用于获取或设置 DOM 元素的文本内容。
7. `element.offsetWidth` 和 `element.offsetHeight`：用于获取 DOM 元素的宽度和高度，包括边框和填充。
8. `element.clientWidth` 和 `element.clientHeight`：用于获取 DOM 元素的宽度和高度，不包括边框和滚动条，但包括填充。
9. `element.scrollWidth` 和 `element.scrollHeight`：用于获取 DOM 元素的宽度和高度，包括溢出部分。
10. `element.scrollTop` 和 `element.scrollLeft`：用于获取或设置 DOM 元素的滚动位置。
11. `element.parentElement`：用于获取 DOM 元素的父元素。
12. `element.children`：用于获取 DOM 元素的子元素。
13. `element.nextSibling` 和 `element.previousSibling`：用于获取 DOM 元素的下一个兄弟元素和上一个兄弟元素。
14. `element.insertAdjacentHTML()`：用于在 DOM 元素旁边插入新的 HTML 代码。
15. `element.querySelector()` 和 `element.querySelectorAll()`：用于在 DOM 元素中查找特定的子元素。

这些方法和属性只是 JavaScript 中操作 DOM 元素的一小部分，还有许多其他的方法和属性可以使用。
******************

以下是一些常见的在浏览器中操作DOM元素和执行JavaScript代码的任务：

1. **获取DOM元素：** 通过使用 `document.getElementById()`, `document.getElementsByClassName()`, `document.getElementsByTagName()` 或者 `document.querySelector()` 和 `document.querySelectorAll()` 方法获取DOM元素。

2. **修改元素内容：** 使用 `innerHTML` 或者 `textContent` 属性来修改DOM元素的内容。

3. **修改元素样式：** 使用 `style` 属性来修改DOM元素的CSS样式，例如 `element.style.color = 'red';`。

4. **添加和移除元素：** 使用 `appendChild()` 或者 `insertBefore()` 方法来添加新元素到DOM中，使用 `removeChild()` 方法来移除元素。

5. **事件处理：** 使用 `addEventListener()` 方法来添加事件监听器，例如 `element.addEventListener('click', handleClick);`，其中 `handleClick` 是一个处理事件的函数。

6. **处理表单数据：** 使用表单元素的 `value` 属性来获取用户输入的值，或者使用 `addEventListener()` 监听表单的提交事件。

7. **动画效果：** 使用CSS过渡或动画来创建动画效果，也可以使用JavaScript的定时器函数 `setInterval()` 或 `setTimeout()` 来实现动态效果。

8. **异步请求：** 使用 `XMLHttpRequest` 对象或者 `fetch()` API 来发送异步HTTP请求，并使用回调函数或Promise来处理响应。

9. **操作本地存储：** 使用 `localStorage` 或 `sessionStorage` API 来在浏览器中存储和检索数据。

10. **操作Cookie：** 使用 `document.cookie` 属性来读取和设置Cookie。

这些是前端开发中常见的操作，通过它们可以实现各种交互性和动态性的网页功能。
******************

在这个示例中使用了多种 DOM 操作方法来操作网页上的各种元素。添加了一个 CSS 类，设置了内联样式，获取和设置了属性，获取和设置了 HTML 和文本内容，获取了元素的尺寸，滚动了元素，插入了新的 HTML 代码，删除了 DOM 元素，并处理了按钮的点击事件。

<!DOCTYPE html>
<html>
<head><title>DOM Example</title><style>.highlight {background-color: yellow;}</style>
</head>
<body><h1 id="header">DOM Example</h1><p>This is a paragraph.</p><ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul><button id="btn">Click me</button><script>// 获取 DOM 元素const header = document.getElementById('header');const firstParagraph = document.querySelector('p');const list = document.querySelector('ul');const button = document.getElementById('btn');// 添加 CSS 类header.classList.add('highlight');// 设置内联样式firstParagraph.style.color = 'red';// 获取和设置属性const listItems = list.getElementsByTagName('li');for (let i = 0; i < listItems.length; i++) {listItems[i].setAttribute('data-index', i);}console.log(listItems[0].getAttribute('data-index')); // 输出 0// 获取和设置 HTML 内容firstParagraph.innerHTML = 'This is a <strong>modified</strong> paragraph.';// 获取和设置文本内容const secondListItem = list.children[1];secondListItem.textContent = 'Modified item';// 获取元素的尺寸console.log(header.offsetWidth); // 输出元素的宽度console.log(header.offsetHeight); // 输出元素的高度// 滚动元素const scrollDiv = document.createElement('div');scrollDiv.style.width = '200px';scrollDiv.style.height = '100px';scrollDiv.style.overflow = 'auto';scrollDiv.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.';document.body.appendChild(scrollDiv);scrollDiv.scrollTop = 50;// 插入新的 HTML 代码const newListItem = document.createElement('li');newListItem.textContent = 'New item';list.insertAdjacentHTML('beforeend', '<li>Another new item</li>');list.appendChild(newListItem);// 删除 DOM 元素const lastListItem = list.children[list.children.length - 1];lastListItem.remove();// 事件处理button.addEventListener('click', () => {header.textContent = 'Button clicked!';});</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title>FormHandling</title>
</head>
<body><form id="registrationForm"><label for="username">Username:</label><input type="text" id="username" name="username" required><br><label for="email">Email:</label><input type="email" id="email" name="email" required><br><label for="password">Password:</label><input type="password" id="password" name="password" required><br><button type="submit">Register</button></form><script>const form = document.getElementById('registrationForm');form.addEventListener('submit', event => {event.preventDefault();const username = document.getElementById('username').value;const email = document.getElementById('email').value;const password = document.getElementById('password').value;if (username.length < 3) {alert('Username must be at least 3 characters long.');return;}if (!email.includes('@')) {alert('Invalid email address.');return;}if (password.length < 6) {alert('Password must be at least 6 characters long.');return;}// 在这里处理表单数据console.log(`Username: ${username}, Email: ${email}, Password: ${password}`);});</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title>Cookie Example</title>
</head>
<body><h1>Cookie Example</h1><form id="cookieForm"><label for="name">Name:</label><input type="text" id="name" name="name"><br><label for="days">Days to expire:</label><input type="number" id="days" name="days" value="30"><br><button type="submit">Set Cookie</button></form><p id="cookieValue"></p><script>// 设置 Cookiefunction setCookie(name, value, days) {const expires = new Date(Date.now() + days * 24 * 60 * 60 * 1000).toUTCString();document.cookie = `${name}=${value}; expires=${expires}; path=/`;}// 获取 Cookiefunction getCookie(name) {const cookies = document.cookie.split(';');for (let i = 0; i < cookies.length; i++) {const cookie = cookies[i].trim().split('=');if (cookie[0] === name) {return cookie[1];}}return '';}// 删除 Cookiefunction deleteCookie(name) {document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`;}// 提交表单设置 Cookieconst cookieForm = document.getElementById('cookieForm');cookieForm.addEventListener('submit', function(event) {event.preventDefault();const name = document.getElementById('name').value;const days = document.getElementById('days').value;setCookie('name', name, days);document.getElementById('cookieValue').textContent = `Cookie set: name=${name}`;});// 获取 Cookie 值const cookieValue = document.getElementById('cookieValue');const name = getCookie('name');if (name) {cookieValue.textContent = `Cookie value: name=${name}`;}</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title>localStorage Example</title>
</head>
<body><h1>localStorage Example</h1><form id="storageForm"><label for="name">Name:</label><input type="text" id="name" name="name"><br><button type="submit">Save to localStorage</button></form><p id="storageValue"></p><button id="clearStorage">Clear localStorage</button><script>// 保存到 localStoragefunction saveToLocalStorage(name) {localStorage.setItem('name', name);}// 从 localStorage 获取值function getFromLocalStorage(name) {return localStorage.getItem(name);}// 清除 localStoragefunction clearLocalStorage() {localStorage.clear();}// 提交表单保存到 localStorageconst storageForm = document.getElementById('storageForm');storageForm.addEventListener('submit', function(event) {event.preventDefault();const name = document.getElementById('name').value;saveToLocalStorage('name', name);document.getElementById('storageValue').textContent = `Saved to localStorage: name=${name}`;});// 从 localStorage 获取值const storageValue = document.getElementById('storageValue');const name = getFromLocalStorage('name');if (name) {storageValue.textContent = `localStorage value: name=${name}`;}// 清除 localStorageconst clearStorage = document.getElementById('clearStorage');clearStorage.addEventListener('click', function() {clearLocalStorage();document.getElementById('storageValue').textContent = 'localStorage cleared';});</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookie 示例</title>
</head>
<body>
<h1>Cookie 示例</h1>
<button onclick="setCookie()">设置Cookie</button>
<button onclick="getCookie()">获取Cookie</button>
<p id="cookieValue"></p><script>
function setCookie() {document.cookie = "username=John Doe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";alert("Cookie 已设置");
}function getCookie() {const cookies = document.cookie.split(';');for (let i = 0; i < cookies.length; i++) {let cookie = cookies[i].trim();if (cookie.startsWith("username=")) {document.getElementById("cookieValue").innerText = cookie.substring("username=".length);return;}}document.getElementById("cookieValue").innerText = "未找到Cookie";
}
</script>
</body>
</html>