JavaScript第四章中的DOM操作详解：访问节点、节点属性、元素属性、样式设置与事件处理

本文链接：https://blog.youkuaiyun.com/it_s_raining/article/details/144240462

JavaScript DOM（文档对象模型）是Web开发的核心技术之一，它提供了一种编程接口，使得开发者能够通过脚本语言动态地访问和修改HTML或XML文档的结构、内容和样式以下是对JavaScript DOM的详细解说

由于这些都比较重要，所以单独在来讲解一下

访问节点

在DOM中，节点是文档的基本组成部分。你可以使用多种方法来访问节点：

getElementById(id)：通过元素的ID获取元素节点。
getElementsByClassName(className)：返回具有指定类名的所有元素节点的集合（HTMLCollection）。
getElementsByTagName(tagName)：返回具有指定标签名的所有元素节点的集合（HTMLCollection）。
querySelector(selector)：返回匹配指定CSS选择器的第一个元素节点。
querySelectorAll(selector)：返回匹配指定CSS选择器的所有元素节点的集合（NodeList）。

示例：

<div id="myDiv" class="container">Hello, World!</div>
<script>
    var myDiv = document.getElementById('myDiv'); // 获取ID为myDiv的元素
    var containers = document.getElementsByClassName('container'); // 获取所有class为container的元素
    var divs = document.getElementsByTagName('div'); // 获取所有div元素
    var firstP = document.querySelector('p'); // 获取第一个p元素
    var allPs = document.querySelectorAll('p'); // 获取所有p元素
</script>

节点属性

每个节点都有一些属性，这些属性提供了关于节点的信息。常见的节点属性包括：

nodeName：节点的名称。
nodeType：节点的类型。
nodeValue：节点的值（对于文本节点和注释节点有效）。
parentNode：父节点。
childNodes：子节点集合（NodeList）。
firstChild：第一个子节点。
lastChild：最后一个子节点。
nextSibling：下一个兄弟节点。
previousSibling：上一个兄弟节点。

示例：

<div id="parent">
    <span>Child 1</span>
    <span>Child 2</span>
</div>
<script>
    var parent = document.getElementById('parent');
    console.log(parent.nodeName); // DIV
    console.log(parent.firstChild.nodeName); // #text（注意：这里可能是文本节点，取决于空白字符）
    console.log(parent.firstChild.nextSibling.nodeName); // SPAN
</script>

设置元素属性

你可以使用setAttribute方法来设置元素的HTML属性，或者使用直接属性赋值的方式来设置某些常用属性（如id、className等）。

示例：

<div id="myDiv"></div>
<script>
    var myDiv = document.getElementById('myDiv');
    myDiv.setAttribute('data-info', 'some data'); // 设置自定义属性
    myDiv.id = 'newId'; // 直接设置id属性
    myDiv.className = 'newClass'; // 直接设置className属性
</script>

设置style属性与样式

你可以通过元素的style属性来设置内联样式。style属性是一个CSSStyleDeclaration对象，它允许你设置和获取CSS样式属性。

文本的全部可设置属性：

color：文本颜色。
font-family：字体。
font-size：字体大小。
font-weight：字体粗细。
text-align：文本对齐方式。
text-decoration：文本装饰（如下划线）。
line-height：行高。

background背景的全部可设置属性：

background-color：背景颜色。
background-image：背景图像。
background-repeat：背景图像是否重复。
background-position：背景图像的位置。
background-size：背景图像的大小。

padding边距的全部可设置属性：

padding-top：上内边距。
padding-right：右内边距。
padding-bottom：下内边距。
padding-left：左内边距。
padding：简写属性，可以同时设置所有内边距。

border边框的全部可设置属性：

border-width：边框宽度。
border-style：边框样式（如solid、dashed等）。
border-color：边框颜色。
border-top、border-right、border-bottom、border-left：分别设置各边的边框。
border：简写属性，可以同时设置所有边框属性。

示例：

<div id="styledDiv"></div>
<script>
    var styledDiv = document.getElementById('styledDiv');
    styledDiv.style.color = 'red'; // 设置文本颜色
    styledDiv.style.backgroundColor = 'blue'; // 设置背景颜色
    styledDiv.style.padding = '10px'; // 设置内边距
    styledDiv.style.border = '2px solid green'; // 设置边框
</script>

常用事件

JavaScript中的事件允许你响应用户在页面上的操作。以下是一些常用的事件：

click：当用户点击元素时触发。
dblclick：当用户双击元素时触发。
mouseover：当鼠标指针移动到元素上时触发。
mouseout：当鼠标指针移出元素时触发。
keydown、keypress、keyup：当用户按下、按住或释放键盘上的键时触发。
load：当页面或某个资源加载完成时触发。
change：当元素的值发生变化时触发（如输入框失去焦点且值已更改）。
submit：当表单提交时触发。

示例：

<button id="myButton">Click Me!</button>
<script>
    var myButton = document.getElementById('myButton');
    myButton.addEventListener('click', function() {
        alert('Button clicked!');
    });
</script>

使用className属性设置样式

你可以通过修改元素的className属性来为其应用一个或多个CSS类。这些类应该在你的CSS样式表中定义。

示例：

<style>
    .highlight {
        background-color: yellow;
        font-weight: bold;
    }
</style>
<div id="myDiv">Hello, ClassName!</div>
<script>
    var myDiv = document.getElementById('myDiv');
    myDiv.className = 'highlight'; // 设置单个类
    // 或者添加多个类（注意：这会覆盖原有的类，如果需要保留原有类，应使用classList）
    // myDiv.className += ' anotherClass';
    
    // 使用classList添加类（不覆盖原有类）
    myDiv.classList.add('anotherClass');
</script>

练习题

创建一个新的<div>元素，并为其设置ID为exerciseDiv，然后将其添加到页面的<body>中。
为exerciseDiv设置一个背景颜色为浅灰色（#d3d3d3），内边距为20px，边框为1px实线黑色。
当用户点击exerciseDiv时，显示一个警告框，内容为“Div clicked!”。
为exerciseDiv添加一个名为active的CSS类，该类在CSS样式表中定义为背景颜色变为深灰色（#a9a9a9）。
当用户在exerciseDiv内输入文本（假设你添加了一个输入框），并且输入框失去焦点且值不为空时，将exerciseDiv的文本内容设置为输入框的值，并应用一个名为input-received的CSS类（该类在CSS样式表中定义为字体颜色变为红色）。

答案提示：

1-3题答案已在上面的示例中展示。

4题：

<style>
    .active {
        background-color: #a9a9a9;
    }
</style>
<script>
    var exerciseDiv = document.createElement('div');
    exerciseDiv.id = 'exerciseDiv';
    document.body.appendChild(exerciseDiv);
    exerciseDiv.style.backgroundColor = '#d3d3d3';
    exerciseDiv.style.padding = '20px';
    exerciseDiv.style.border = '1px solid black';
    exerciseDiv.addEventListener('click', function() {
        alert('Div clicked!');
    });
    exerciseDiv.classList.add('active'); // 添加active类
</script>

5题（需要添加输入框）：

<style>
    .input-received {
        color: red;
    }
</style>
<script>
    // 假设前面的代码已经创建了exerciseDiv并添加到了页面中
    var inputBox = document.createElement('input');
    inputBox.type = 'text';
    exerciseDiv.appendChild(inputBox);
    
    inputBox.addEventListener('blur', function() {
        if (inputBox.value.trim()