【前端基础篇】JavaScript之DOM介绍1：https://developer.aliyun.com/article/1617355
获取HTML的值
方法概览
| 方法 | 描述 |
元素节点.innerText |
获取 HTML 元素的 inner Text。 |
元素节点.innerHTML |
获取 HTML 元素的 inner HTML。 |
元素节点.属性 |
获取 HTML 元素的属性值。 |
元素节点.getAttribute(attribute) |
获取 HTML 元素的属性值。 |
元素节点.style.样式 |
获取 HTML 元素的行内样式值。 |
1. 元素节点.innerText
innerText 属性用于获取或设置HTML元素的文本内容。它返回元素及其所有子元素的"可见"文本内容。
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>InnerText 示例</title> </head> <body> <div id="example">Hello, <span>World</span>!</div> <script> const element = document.getElementById("example"); console.log(element.innerText); // 输出: "Hello, World!" element.innerText = "Hello, JavaScript!"; </script> </body> </html>
在上面的示例中，innerText 获取了div元素及其子元素span的可见文本，并将其输出到控制台。
2. 元素节点.innerHTML
innerHTML 属性用于获取或设置HTML元素的内容，包括HTML标记。与innerText不同，innerHTML会解析标签并返回元素的所有内容。
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>InnerHTML 示例</title> </head> <body> <div id="example">Hello, <span>World</span>!</div> <script> const element = document.getElementById("example"); console.log(element.innerHTML); // 输出: "Hello, <span>World</span>!" element.innerHTML = "Hello, <strong>JavaScript</strong>!"; </script> </body> </html>
innerHTML 不仅可以获取元素的内容，还可以通过设置innerHTML属性来更新元素的内容，包括嵌套的HTML标签。
3. 元素节点.属性
通过直接访问元素的属性，可以获取或设置元素的属性值。例如，element.id或element.className。
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性访问示例</title> </head> <body> <div id="example" class="demo">示例内容</div> <script> const element = document.getElementById("example"); console.log(element.id); // 输出: "example" console.log(element.className); // 输出: "demo" element.id = "newID"; element.className = "newClass"; </script> </body> </html>
在上面的示例中，element.id 和 element.className 分别用于获取和设置元素的id和class属性。
4. 元素节点.getAttribute(attribute)
getAttribute 方法用于获取元素上指定的属性值。
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>getAttribute 示例</title> </head> <body> <div id="example" data-custom="value">示例内容</div> <script> const element = document.getElementById("example"); console.log(element.getAttribute("id")); // 输出: "example" console.log(element.getAttribute("data-custom")); // 输出: "value" </script> </body> </html>
getAttribute 是一个通用方法，可以用于获取任何存在于元素上的属性值，不仅限于标准属性。
5. 元素节点.style.样式
style 属性用于访问元素的内联样式，可以用来获取或设置内联样式值。
示例代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式访问示例</title> </head> <body> <div id="example" style="color: red;">示例内容</div> <script> const element = document.getElementById("example"); console.log(element.style.color); // 输出: "red" element.style.color = "blue"; </script> </body> </html>
通过style属性，可以直接操作元素的内联样式。例如，在上面的代码中，style.color 用于获取和设置文本颜色。
改变HTML的值
| 方法 | 描述 |
| 元素节点.innerText = new text content | 改变元素的 inner Text。 |
| 元素节点.innerHTML = new html content | 改变元素的 inner HTML。 |
| 元素节点.属性 = new value | 改变 HTML 元素的属性值。 |
| 元素节点.setAttribute(attribute, value) | 改变 HTML 元素的属性值。 |
| 元素节点.style.样式 = new style | 改变 HTML 元素的行内样式值。 |
这个比上面查找的就多了一个赋值，改变HTML的值，此处不再赘述
修改HTML元素
方法概览
| 方法 | 描述 |
document.createElement(element) |
创建 HTML 元素节点。 |
document.createAttribute(attribute) |
创建 HTML 属性节点。 |
document.createTextNode(text) |
创建 HTML 文本节点。 |
元素节点.removeChild(element) |
删除 HTML 元素。 |
元素节点.appendChild(element) |
添加 HTML 元素。 |
元素节点.replaceChild(element) |
替换 HTML 元素。 |
元素节点.insertBefore(element) |
在指定的子节点前面插入新的子节点。 |
1. document.createElement(element)
功能： 创建一个新的 HTML 元素节点。
示例：
let newDiv = document.createElement("div");
说明： 该方法创建了一个新的 div 元素，但此时它还没有被添加到页面中，需要使用其他方法将其插入到 DOM 中。
2. document.createAttribute(attribute)
功能： 创建一个新的 HTML 属性节点。
示例：
let newAttr = doc
说明： 此方法创建了一个新的属性（如 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父子
方法概览
| 方法 | 描述 |
元素节点.parentNode |
返回元素的父节点。 |
元素节点.parentElement |
返回元素的父元素。 |
元素节点.childNodes |
返回元素的一个子节点的数组（包含空白文本Text节点）。 |
元素节点.children |
返回元素的一个子元素的集合（不包含空白文本Text节点）。 |
元素节点.firstChild |
返回元素的第一个子节点（包含空白文本Text节点）。 |
元素节点.firstElementChild |
返回元素的第一个子元素（不包含空白文本Text节点）。 |
元素节点.lastChild |
返回元素的最后一个子节点（包含空白文本Text节点）。 |
元素节点.lastElementChild |
返回元素的最后一个子元素（不包含空白文本Text节点）。 |
元素节点.previousSibling |
返回某个元素紧接之前的兄弟节点（包含空白文本Text节点） |
元素节点.previousElementSibling |
返回指定元素的前一个兄弟元素（相同节点树层中的前一个元素节点）。 |
元素节点.nextSibling |
返回某个元素紧接之后的兄弟节点（包含空白文本Text节点）。 |
元素节点.nextElementSibling |
返回指定元素的后一个兄弟元素（相同节点树层中的下一个元素节点）。 |
事件概述
什么是事件
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介绍的内容啦，各位大佬有什么问题欢迎在评论区指正，您的支持是我创作的最大动力！❤️
