改变HTML的值

这个比上面查找的就多了一个赋值，改变HTML的值，此处不再赘述

修改HTML元素

方法概览

1. document.createElement(element)

功能： 创建一个新的 HTML 元素节点。

示例：

let newDiv = document.createElement("div");

说明： 该方法创建了一个新的 div 元素，但此时它还没有被添加到页面中，需要使用其他方法将其插入到 DOM 中。

2. document.createAttribute(attribute)

功能： 创建一个新的 HTML 属性节点。

示例：

let newAttr = document.createAttribute("class");

newAttr.value = "new-class";

说明： 此方法创建了一个新的属性（如 class），但该属性还没有应用到任何元素，需要手动将其附加到元素上。

3. document.createTextNode(text)

功能： 创建一个文本节点，用于包含纯文本内容。

示例：

let textNode = document.createTextNode("Hello, World!");

说明： 创建了一个包含文本 “Hello, World!” 的文本节点，可以将它插入到一个元素中显示在页面上。

4. 元素节点.removeChild(element)

功能： 从 DOM 中删除子元素。

示例：

let parentElement = document.getElementById("parent");

let childElement = document.getElementById("child");

parentElement.removeChild(childElement);

说明： 此方法从父节点中移除了指定的子节点 childElement。

5. 元素节点.appendChild(element)

功能： 将一个新的子节点添加到指定的父节点中。

示例：

let parentElement = document.getElementById("parent");

let newDiv = document.createElement("div");

parentElement.appendChild(newDiv);

说明： 该方法将创建的 newDiv 元素添加到父元素 parentElement 的子节点列表末尾。

6. 元素节点.replaceChild(element)

功能： 替换当前子节点。

示例：

let parentElement = document.getElementById("parent");

let oldChild = document.getElementById("oldChild");

let newDiv = document.createElement("div");

parentElement.replaceChild(newDiv, oldChild);

说明： 此方法用 newDiv 替换了 oldChild 节点。

7. 元素节点.insertBefore(element)

功能： 在指定的子节点前面插入新的子节点。

示例：

let parentElement = document.getElementById("parent");

let newDiv = document.createElement("div");

let referenceNode = document.getElementById("referenceNode");

parentElement.insertBefore(newDiv, referenceNode);

说明： 此方法将 newDiv 插入到 referenceNode 节点之前。

查找HTML父子

方法概览

事件概述

什么是事件

JS 要构建动态页面, 就需要感知到用户的行为. 用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作.

浏览器就是一个哨兵, 在侦查敌情(用户行为). 一旦用户有反应(触发具体动作), 哨兵就会点燃烽火台的狼烟(事件), 后方就可以根据狼烟来决定下一步的对敌策略.

JavaScript中的常见DOM文档事件

1. DOMContentLoaded

DOMContentLoaded事件在初始HTML文档被完全加载和解析后触发，不等待样式表、图片和子框架的加载。

document.addEventListener("DOMContentLoaded", function() {

console.log("DOM完全加载并解析完成");

});

解释： 当你想在文档完全加载后执行某些JavaScript代码，并确保可以安全地操作DOM时，此事件非常有用。

addEventListener 方法

addEventListener 是绑定事件的标准方法，推荐在大多数情况下使用。它可以为一个 DOM

元素添加一个或多个事件监听器，当事件触发时，执行指定的回调函数。

示例：

// 获取 DOM 元素

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

// 为按钮添加点击事件监听器

button.addEventListener('click', function() {

alert('按钮被点击了！');

});

优点： 可以为同一元素绑定多个相同或不同类型的事件，不会互相覆盖。 支持事件捕获和事件冒泡机制，可以通过传递第三个参数来设置。

缺点：

在某些老旧浏览器（如 IE8 及更早版本）中不支持。

2. click

click事件发生在用户点击一个元素（例如按钮、链接或图片）时。此事件通常用于触发特定动作。

document.getElementById("myButton").addEventListener("click", function() {

alert("按钮被点击了！");

});

解释： 当点击ID为 myButton 的按钮时，触发一个弹出框，显示“按钮被点击了！”。

3. keyup 和 keydown

keyup 和 keydown 事件在用户按下键盘上的按键时触发。keydown 发生在按下按键时，keyup 发生在按键释放时。

document.addEventListener("keydown", function(event) {

console.log("按下的键是: " + event.key);

});

解释： 当任意按键被按下时，按键的对应值将会记录在控制台中。

4. mouseover 和 mouseout

mouseover 事件发生在用户将鼠标移到一个元素上时，而 mouseout 事件则是在鼠标移出元素时触发。

document.getElementById("hoverElement").addEventListener("mouseover", function() {

console.log("鼠标移到了元素上！");

});

解释： 当用户将鼠标悬停在ID为 hoverElement 的元素上时，控制台将打印一条消息。

5. submit

submit 事件在表单提交时触发。通常用于在表单提交之前验证表单数据。

document.getElementById("myForm").addEventListener("submit", function(event) {

event.preventDefault();

console.log("表单已提交！");

});

解释： 表单的默认提交行为被 event.preventDefault() 阻止，而是打印了一条消息。

6. resize

resize 事件在浏览器窗口被调整大小时触发。它在创建响应式布局或处理窗口变化时非常有用。

window.addEventListener("resize", function() {

console.log("窗口大小已调整为: " + window.innerWidth + "x" + window.innerHeight);

});

解释： 每当窗口大小发生变化时，新的窗口尺寸将会打印在控制台中。

7. focus 和 blur

focus 事件在元素获得焦点时触发，而 blur 事件在元素失去焦点时触发。这些事件常用于表单字段的验证或提示。

let inputField = document.getElementById("username");

inputField.addEventListener("focus", function() {

console.log("输入框获得焦点");

});

inputField.addEventListener("blur", function() {

console.log("输入框失去焦点");

});

解释： 当用户点击输入框时，触发 focus 事件；当用户点击其他地方离开输入框时，触发 blur 事件。

8. change

change 事件在用户改变输入元素的值后触发，常用于 input、select、textarea 等表单元素。

document.getElementById("mySelect").addEventListener("change", function() {

console.log("选择的值发生了变化");

});

解释： 当用户在下拉框中选择不同的选项时，触发 change 事件。

9. scroll

scroll 事件在用户滚动页面或元素时触发，适用于具有滚动条的元素或整个窗口的滚动。

window.addEventListener("scroll", function() {

console.log("页面正在滚动");

});

解释： 每当用户滚动页面时，控制台将打印消息。

结论

理解和处理常见的DOM文档事件对于创建互动性和动态的网页至关重要。上面讨论的事件涵盖了许多常见的用户交互场景，掌握它们可以极大地增强构建响应式用户界面的能力，并改善网站的用户体验。

以上就是关于【前端基础篇】JavaScript之DOM介绍的内容啦，各位大佬有什么问题欢迎在评论区指正，您的支持是我创作的最大动力！❤️