dom 元素应用 + for 循环应用

放逐者-保持本心，方可放逐2024-11-26 14:00

文章目录

    • [元素获取应用 getElementById 与 jquery](#元素获取应用 getElementById 与 jquery)
    • [dom 元素的属性](#dom 元素的属性)
    • [dom 元素递归循环 以及 定向查找](#dom 元素递归循环 以及 定向查找)
    • [for 循环应用](#for 循环应用)
    • [for 中break,continue以及嵌套终止详解](#for 中break,continue以及嵌套终止详解)

元素获取应用 getElementById 与 jquery

  1. 本质和来源

    • JavaScript原生getElementById ：它是JavaScript语言本身提供的DOM（文档对象模型）操作方法。DOM是HTML和XML文档的编程接口，getElementById方法允许你直接通过元素的id属性值来获取对应的DOM元素。例如，在HTML中有一个元素<div id="myDiv"></div>，可以使用document.getElementById('myDiv')来获取这个div元素。这是浏览器内置的功能，在任何支持JavaScript的浏览器环境中都可以直接使用，不需要额外引入其他库。
    • jQuery的$函数（或jQuery函数） ：jQuery是一个流行的JavaScript库。$函数（jQuery函数的别名）是jQuery库的核心方法。它提供了一种简洁、强大的方式来操作DOM元素，同时还提供了许多方便的功能，如事件处理、动画效果、AJAX操作等。要使用$函数，需要先在HTML页面中引入jQuery库文件，例如<script src="https://code.jquery.com/jquery - 3.6.0.min.js"></script>。

  2. 获取元素的方式和灵活性

    • getElementById的单一性 ：getElementById方法只能通过元素的id属性来获取单个元素。如果文档中有多个元素具有相同的id（这在HTML规范中是不推荐的，但在实际情况中可能会出现错误情况），它只会返回第一个匹配的元素。例如：
html 复制代码 
<div id="test">Element 1</div>
<div id="test">Element 2</div>
<script>
var element = document.getElementById('test');
console.log(element.innerHTML); // 只会输出"Element 1"
</script>
  • $函数的多样性 ：jQuery的$函数有多种获取元素的方式。它可以通过id获取元素，例如$('#myDiv')，这与getElementById类似，但语法更简洁。此外，它还可以通过元素标签名（如$('div')获取所有的div元素）、类名（如$('.myClass')获取所有具有myClass类名的元素）、属性选择器（如$('[data - custom="value"]')获取具有指定自定义属性的元素）等来获取元素。并且可以同时选择多个元素并进行操作，返回的是一个包含匹配元素的jQuery对象（类似一个元素集合）。例如：
html 复制代码 
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<script src="https://code.jquery.com/jquery - 3.6.0.min.js"></script>
<script>
var elements = $('.box');
elements.each(function () {
    console.log($(this).html());
});
// 会依次输出Box 1和Box 2
</script>
  1. 返回值类型和操作方法
    • getElementById返回原生DOM元素 ：getElementById返回的是一个原生的DOM元素对象。这意味着可以直接使用DOM提供的原生方法和属性来操作这个元素。例如，可以直接访问元素的style属性来修改样式，像document.getElementById('myDiv').style.color = 'red';。但是如果要进行一些复杂的操作，如批量操作多个元素、添加动画效果等，可能需要编写更多的代码来实现。
    • $函数返回jQuery对象 ：$函数返回的是一个jQuery对象。这个对象有自己的一套方法和属性，用于方便地操作元素集合。例如，可以使用$(selector).css('color','red')来同时将所有匹配元素的文字颜色设置为红色。jQuery对象封装了很多跨浏览器兼容的操作，比如事件绑定（$(selector).click(function () {})）和动画效果（$(selector).fadeIn()）等，使得开发更加高效和便捷。而且可以方便地在jQuery对象上进行链式调用，如$(selector).addClass('active').fadeIn().text('New Text')，这在原生JavaScript中实现起来会比较复杂。

dom 元素的属性

  1. tagName属性
    • 含义和用途 ：tagName属性返回元素的标签名，以大写形式表示。例如，对于<div>元素，tagName返回"DIV"。这个属性可以用于在不知道元素具体类型的情况下，根据标签名来执行不同的操作。比如，在一个函数中，可以通过检查tagName来确定是否对某个元素应用特定的样式或者行为。
    • 示例代码：
html 复制代码 
<div id="myDiv"></div>
<script>
var element = document.getElementById('myDiv');
console.log(element.tagName); // 输出 "DIV"
if (element.tagName === "DIV") {
    element.style.backgroundColor = "blue";
}
</script>
  1. id属性
    • 含义和用途 ：id属性返回元素的id值。它主要用于在文档中唯一标识一个元素。在JavaScript中，可以利用id属性来快速获取特定的元素（通过document.getElementById方法），也可以用于样式设置（在CSS中通过#id选择器来应用样式）和其他操作。例如，可以通过检查id属性来确定是否对某个具有特定id的元素执行动画效果。
    • 示例代码：
html 复制代码 
<div id="myDiv"></div>
<script>
var element = document.getElementById('myDiv');
console.log(element.id); // 输出 "myDiv"
if (element.id === "myDiv") {
    element.style.animation = "fadeIn 1s";
}
</script>
  1. className属性
    • 含义和用途 ：className属性返回元素的类名。它用于获取和设置元素的类列表。通过这个属性，可以检查元素是否属于某个类，添加新的类或者移除已有的类。在CSS中，类选择器（.class - name）用于应用样式，在JavaScript中，可以利用className属性来动态地改变元素的样式类，从而实现样式的切换等操作。
    • 示例代码：
html 复制代码 
<div id="myDiv" class="box active"></div>
<script>
var element = document.getElementById('myDiv');
console.log(element.className); // 输出 "box active"
element.className = "box inactive";
</script>
  1. style属性
    • 含义和用途 ：style属性用于获取和设置元素的内联样式。它返回一个CSSStyleDeclaration对象，其中包含了可以直接操作的各种样式属性，如color、backgroundColor、fontSize等。通过修改style属性中的这些子属性，可以实时改变元素的外观。不过需要注意的是，这种方式设置的样式是内联样式，会覆盖CSS样式表中相同属性的设置。
    • 示例代码：
html 复制代码 
<div id="myDiv"></div>
<script>
var element = document.getElementById('myDiv');
element.style.backgroundColor = "red";
element.style.color = "white";
</script>
  1. innerHTML属性
    • 含义和用途 ：innerHTML属性用于获取或设置元素内部的HTML内容。可以用它来读取元素内部的文本和HTML标签，也可以用来动态地插入新的HTML内容。例如，可以通过读取innerHTML来获取用户在一个文本框中输入的HTML代码，或者通过设置innerHTML来在页面上动态地生成一个列表等。
    • 示例代码：
html 复制代码 
<div id="myDiv"></div>
<script>
var element = document.getElementById('myDiv');
element.innerHTML = "<p>Some text</p>";
console.log(element.innerHTML); // 输出 "<p>Some text</p>"
</script>
  1. parentNode属性
    • 含义和用途 ：parentNode属性返回元素的父节点。这对于在DOM树中进行遍历和操作非常有用。例如，可以通过获取父节点来将一个元素从当前位置移动到父节点的其他子节点位置，或者检查父节点的属性来确定元素的上下文环境。
    • 示例代码：
html 复制代码 
<div id="parentDiv">
    <div id="myDiv"></div>
</div>
<script>
var element = document.getElementById('myDiv');
var parent = element.parentNode;
console.log(parent.id); // 输出 "parentDiv"
</script>
  1. childNodes属性
    • 含义和用途 ：childNodes属性返回一个包含元素所有子节点的节点列表。这些子节点包括元素节点、文本节点和注释节点等。可以用于遍历和操作元素的子元素，比如添加新的子元素、删除子元素或者修改子元素的顺序等。不过在实际应用中，由于childNodes会包含文本节点等非元素节点，可能需要进行一些过滤才能更好地操作元素子节点。
    • 示例代码：
html 复制代码 
<div id="parentDiv">
    <div id="childDiv1"></div>
    <div id="childDiv2"></div>
</div>
<script>
var parent = document.getElementById('parentDiv');
var childNodes = parent.childNodes;
for (var i = 0; i < childNodes.length; i++) {
    if (childNodes[i].nodeType === 1) { // 检查是否为元素节点
        console.log(childNodes[i].id);
    }
}
</script>
  1. attributes属性
    • 含义和用途 ：attributes属性返回一个包含元素所有属性的NamedNodeMap对象。可以用于遍历元素的属性，获取属性的值，或者修改属性的值等操作。例如，可以通过遍历属性来检查元素是否具有某个特定的属性，或者将所有属性的名称和值打印出来。
    • 示例代码：
html 复制代码 
<div id="myDiv" data - custom="value"></div>
<script>
var element = document.getElementById('myDiv');
var attributes = element.attributes;
for (var i = 0; i < attributes.length; i++) {
    console.log(attributes[i].name + "=" + attributes[i].value);
}
// 输出 "id=myDiv data - custom=value"
</script>

dom 元素递归循环 以及 定向查找

以下是使用JavaScript原生方法通过递归循环来查找DOM元素下符合条件的所有元素以及查找特定元素进行处理的示例代码，分别从查找所有符合条件的元素和查找特定元素这两个角度来介绍：

查找某DOM元素下符合特定条件的所有元素（以查找所有具有特定类名的元素为例）

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="parent">
        <div class="target">Element 1</div>
        <div>
            <div class="target">Element 2</div>
        </div>
        <div class="not-target">Element 3</div>
    </div>
    <script>
        function findElementsByClassName(parentElement, className) {
            // 用于存储找到的元素的数组
            const result = [];
            function recursiveSearch(element) {
                const children = element.childNodes;
                for (let i = 0; i < children.length; i++) {
                    const child = children[i];
                    if (child.nodeType === 1) { // 只处理元素节点
                        if (
                        	child.classList && child.classList.contains(className)
                        ) {
                            result.push(child);
                        }
                        recursiveSearch(child);
                    }
                }
            }
            recursiveSearch(parentElement);
            return result;
        }

        const parent = document.getElementById('parent');
        const targetElements = findElementsByClassName(parent, 'target');
        targetElements.forEach(element => {
            element.style.backgroundColor = 'blue';
        });
    </script>
</body>

</html>

在上述代码中：

  1. 首先定义了函数 findElementsByClassName，它接受一个父元素 parentElement 和要查找的类名 className 作为参数。在函数内部，创建了一个空数组 result 用于存储最终找到的符合条件的元素。
  2. 接着定义了内部的递归函数 recursiveSearch，在这个函数中，先获取当前元素的所有子节点 children，然后遍历这些子节点。对于每个子节点，如果它是元素节点（通过 nodeType === 1 判断），并且其类列表中包含要查找的类名（通过 classList.contains(className) 判断），就将其添加到 result 数组中。之后，不管是否满足条件，都会继续递归调用 recursiveSearch 函数，传入当前子节点，以继续向下查找其子孙节点中的符合条件的元素。
  3. 最后调用 recursiveSearch 函数传入父元素开始查找，并返回 result 数组，后续可以对找到的这些元素进行相应的处理，如示例中给它们设置背景颜色。

查找某DOM元素下的特定元素（以查找具有特定 id 的元素为例）

html 复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="parent">
        <div id="target-element">Element 1</div>
        <div>
            <div>Element 2</div>
        </div>
    </div>
    <script>
        function findElementById(parentElement, targetId) {
            function recursiveSearch(element) {
                const children = element.childNodes;
                for (let i = 0; i < children.length; i++) {
                    const child = children[i];
                    if (child.nodeType === 1) { // 只处理元素节点
                        if (child.id === targetId) {
                            return child;
                        }
                        const found = recursiveSearch(child);
                        if (found) {
                            return found;
                        }
                    }
                }
                return null;
            }
            return recursiveSearch(parentElement);
        }

        const parent = document.getElementById('parent');
        const targetElement = findElementById(parent, 'target-element');
        if (targetElement) {
            targetElement.style.color ='red';
        }
    </script>
</body>

</html>

在这个代码示例中：

  1. 定义了函数 findElementById，它接受父元素 parentElement 和目标 id（targetId）作为参数。其内部同样有一个递归函数 recursiveSearch。
  2. 在 recursiveSearch 函数里，先获取当前元素的子节点并遍历它们。对于每个元素节点，检查其 id 是否与目标 id 一致，如果一致则直接返回该元素。如果不一致，则继续递归调用 recursiveSearch 函数查找当前子节点的子孙节点，若在子孙节点中找到了目标元素，就将其返回（通过层层返回的方式将找到的元素传递出来）。如果整个递归过程都没有找到目标元素，则最终返回 null。
  3. 最后调用 findElementById 函数开始查找，根据返回结果判断是否找到元素，若找到就可以对其进行相应的处理，比如示例中给找到的元素设置文字颜色。

for 循环应用

  1. 数组（Array）
    • 基本用法 ：for循环在遍历数组时非常常用。可以通过数组的索引来访问数组中的每个元素。例如，假设有一个包含数字的数组var numbers = [1, 2, 3, 4, 5];，可以使用以下for循环来遍历它：
javascript 复制代码 
for (var i = 0; i < numbers.length; i++) {
    console.log(numbers[i]);
}
  • 用途解释 ：在这个循环中，i是索引变量，初始值为0。每次循环时，会检查i是否小于数组的长度（numbers.length）。如果是，则执行循环体中的代码，即输出数组中索引为i的元素。然后i的值会增加1，继续下一次循环，直到i不再小于数组长度为止。这样就可以依次访问数组中的每个元素。
  • 扩展应用 - 数组元素修改 ：除了访问元素，还可以在循环中修改数组元素。例如，将数组中的每个元素乘以2：
javascript 复制代码 
for (var i = 0; i < numbers.length; i++) {
    numbers[i] = numbers[i] * 2;
}
console.log(numbers);
  • 扩展应用 - 数组元素过滤和新数组创建 ：可以使用for循环从一个数组中筛选出符合条件的元素，创建一个新的数组。例如，从numbers数组中筛选出大于3的元素：
javascript 复制代码 
var newArray = [];
for (var i = 0; i < numbers.length; i++) {
    if (numbers[i] > 3) {
        newArray.push(numbers[i]);
    }
}
console.log(newArray);
  1. 字符串（String）
    • 基本用法 ：在JavaScript中，字符串也可以使用for循环进行遍历，因为字符串可以看作是字符的数组。例如，对于字符串var str = "hello";，可以这样遍历：
javascript 复制代码 
for (var i = 0; i < str.length; i++) {
    console.log(str[i]);
}
  • 用途解释 ：和遍历数组类似，i是索引变量，从0开始。每次循环检查i是否小于字符串的长度。在循环体中，str[i]表示字符串中索引为i的字符，这样就可以逐个输出字符串中的字符。
  • 扩展应用 - 字符串拼接和修改：可以在循环中对字符串进行拼接或修改。例如，将字符串中的每个字符转换为大写并拼接成一个新的字符串：
javascript 复制代码 
var newStr = "";
for (var i = 0; i < str.length; i++) {
        newStr += str[i].toUpperCase();
}
console.log(newStr);
  1. 类数组对象（Array - like Objects）
    • 定义和示例 ：类数组对象是具有length属性并且可以通过索引访问元素的对象，但它们没有数组的所有方法（如push、pop等）。例如，arguments对象（在函数内部可用，包含传递给函数的所有参数）和NodeList（通过document.querySelectorAll等方法返回的节点列表）都是类数组对象。
    • 基本用法 ：以NodeList为例，假设通过document.querySelectorAll('div')获取了页面上所有的div元素，这会返回一个NodeList，可以用for循环遍历它：
javascript 复制代码 
var divList = document.querySelectorAll('div');
for (var i = 0; i < divList.length; i++) {
    divList[i].style.backgroundColor = 'blue';
}
  • 用途解释 ：这里的for循环和遍历数组类似，i作为索引变量，从0开始，每次循环检查是否小于NodeList的长度。在循环体中，可以访问NodeList中的每个元素（这里是div元素）并对它们进行操作，如设置背景颜色。
  1. 普通对象（Object） - 特殊情况
    • 基本用法（遍历属性） ：对于普通对象，for循环不能直接像遍历数组那样使用索引来访问属性。但是可以使用for - in循环来遍历对象的可枚举属性。例如，对于对象var person = {name: "John", age: 30, city: "New York"};，可以这样遍历：
javascript 复制代码 
for (var key in person) {
    console.log(key + ": " + person[key]);
}
  • 用途解释 ：在for - in循环中，key变量在每次循环时代表对象的一个可枚举属性名。通过person[key]可以访问该属性对应的值。这样就可以输出对象的每个属性名和属性值。不过需要注意的是，for - in循环会遍历对象自身以及其原型链上的可枚举属性，在某些情况下可能需要使用hasOwnProperty方法来只遍历对象自身的属性。例如：
javascript 复制代码 
for (var key in person) {
    if (person.hasOwnProperty(key)) {
        console.log(key + ": " + person[key]);
    }
}

for 中break,continue以及嵌套终止详解

  1. break语句
    • 单重循环中的作用 ：在for循环中，break语句用于立即终止当前循环。当break语句被执行时，循环会立刻停止，程序控制流会跳转到循环体之后的下一条语句。例如，在一个从1到10的数字循环中，当数字等于5时停止循环：
javascript 复制代码 
for (var i = 1; i <= 10; i++) {
    if (i === 5) {
        break;
    }
    console.log(i);
}
// 输出：1、2、3、4
  • 在嵌套循环（多重循环）中的作用 ：当存在多重循环（例如一个for循环嵌套在另一个for循环内部）时，break语句只会终止它所在的最内层循环。例如：
javascript 复制代码 
for (var i = 1; i <= 3; i++) {
    for (var j = 1; j <= 3; j++) {
        if (i === 2 && j === 2) {
            break;
        }
        console.log("i: " + i + ", j: " + j);
    }
}
// 输出：
// i: 1, j: 1
// i: 1, j: 2
// i: 1, j: 3
// i: 2, j: 1
  • 解释 ：在这个例子中，外层循环控制变量i从1到3，内层循环控制变量j从1到3。当i = 2且j = 2时，break语句被执行，但它只会终止内层循环，外层循环继续进行。所以当i = 2时，内层循环只执行到j = 1。
  1. continue语句
    • 单重循环中的作用 ：continue语句用于跳过当前循环的剩余部分，然后直接开始下一次循环。例如，在一个从1到10的数字循环中，跳过数字5：
javascript 复制代码 
for (var i = 1; i <= 10; i++) {
    if (i === 5) {
        continue;
    }
    console.log(i);
}
// 输出：1、2、3、4、6、7、8、9、10
  • 在嵌套循环（多重循环）中的作用 ：在多重循环中，continue语句和break语句类似，也只会影响它所在的最内层循环。例如：
javascript 复制代码 
for (var i = 1; i <= 3; i++) {
    for (var j = 1; j <= 3; j++) {
        if (i === 2 && j === 2) {
            continue;
        }
        console.log("i: " + i + ", j: " + j);
    }
}
// 输出：
// i: 1, j: 1
// i: 1, j: 2
// i: 1, j: 3
// i: 2, j: 1
// i: 2, j: 3
// i: 3, j: 1
// i: 3, j: 2
// i: 3, j: 3
  • 解释 ：当i = 2且j = 2时，continue语句被执行，内层循环跳过了当前这一次循环（j = 2这部分），直接开始下一次循环（j = 3），而外层循环不受影响，继续正常执行。
  1. 标记（label）语句用于终止多重循环
    • 基本概念和语法 ：如果想要在多重循环中终止外层循环，可以使用标记（label）语句。标记是一个紧跟着冒号的标识符，放在循环语句之前。例如：outerLoop:可以作为一个外层循环的标记。
    • 示例和作用：
javascript 复制代码 
outerLoop:
for (var i = 1; i <= 3; i++) {
    for (var j = 1; j <= 3; j++) {
        if (i === 2 && j === 2) {
            break outerLoop;
        }
        console.log("i: " + i + ", j: " + j);
    }
}
// 输出：
// i: 1, j: 1
// i: 1, j: 2
// i: 1, j: 3
  • 解释 ：在这个例子中，outerLoop是外层循环的标记。当i = 2且j = 2时，break outerLoop语句被执行，它会终止带有outerLoop标记的外层循环，而不仅仅是内层循环。这样就可以根据需要在多重循环中完全跳出外层循环。同样，也可以使用continue语句和标记一起使用，不过它的作用是跳转到标记循环的下一次迭代，而不是终止循环。
相关推荐
大圣编程14 分钟前
Python中continue语句的用法是什么？
开发语言·前端·python
yuhaiqiang15 分钟前
随手 vibecoding 的浏览器插件已经 6000 多次下载，聊聊他的产品设计
前端·后端·面试
之歆1 小时前
Vue商品详情与放大镜组件
前端·javascript·vue.js
再吃一根胡萝卜2 小时前
如何把小米 MiMo 接入 CodeBuddy，打造私有 Agent
前端
负责的蛋挞3 小时前
异步HttpModule的实现方式
java·服务器·前端
丹宇码农5 小时前
把 HLS 字幕玩出花：zwPlayer 如何让 M3U8 视频支持全文搜索、翻译与码率自适应
前端·javascript·音视频·hls·视频播放器
2501_943782355 小时前
【共创季稿事节】猜数字游戏：二分法思维与交互式反馈
前端·游戏·microsoft·harmonyos·鸿蒙·鸿蒙系统
GV191rLvq6 小时前
基于Socket实现的最简单的Web服务器【ASP.NET原理分析】
服务器·前端·asp.net
吠品6 小时前
LangChain 里 tool_call_id 为空？一次 MCP 工具集成的排查记录
前端
热门推荐
01GitHub 镜像站点022026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf03AI科技热点日报 | 2026年07月01日04【AI】2026 年具身智能模型和世界模型总结052026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？062026 年 AI 大模型 & AI 编程工具实战全总结072026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？08Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析09Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费102026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？