JS-基础知识

简介

JS基础知识

JS document.getElementsByClassName() 函数是什么

document.getElementsByClassName() 是 JavaScript 中一个用于获取文档中所有具有指定类名的元素的方法。这个方法返回一个实时的 HTMLCollection 对象，该对象包含所有具有指定类名的元素。

语法

1	let elements = document.getElementsByClassName(classNames);

参数

classNames：一个字符串，包含一个或多个用空格分隔的类名。返回的集合将包含文档中所有匹配这些类名的元素。

返回值

一个实时的 HTMLCollection 对象，包含所有具有指定类名的元素。如果没有匹配的元素，则返回的 HTMLCollection 对象的长度为 0。

示例

示例 1：获取单个类名的元素

<!DOCTYPE html>
<html>
<head>
    <title>getElementsByClassName Example</title>
</head>
<body>
    <div class="example">Element 1</div>
    <div class="example">Element 2</div>
    <div class="example">Element 3</div>
    <div class="other">Element 4</div>

    <script>
        let elements = document.getElementsByClassName('example');
        console.log(elements); // 输出一个包含三个 div 元素的 HTMLCollection

        // 遍历所有匹配的元素
        for (let i = 0; i < elements.length; i++) {
            console.log(elements[i].innerText);
        }
    </script>
</body>
</html>

在这个例子中，document.getElementsByClassName('example') 返回一个包含三个 div 元素的 HTMLCollection，每个 div 元素都有类名 example。

示例 2：获取多个类名的元素

<!DOCTYPE html>
<html>
<head>
    <title>getElementsByClassName Multiple Classes Example</title>
</head>
<body>
    <div class="example test">Element 1</div>
    <div class="example">Element 2</div>
    <div class="example test">Element 3</div>
    <div class="test">Element 4</div>

    <script>
        let elements = document.getElementsByClassName('example test');
        console.log(elements); // 输出一个包含两个 div 元素的 HTMLCollection

        // 遍历所有匹配的元素
        for (let i = 0; i < elements.length; i++) {
            console.log(elements[i].innerText);
        }
    </script>
</body>
</html>

在这个例子中，document.getElementsByClassName('example test') 返回一个包含两个 div 元素的 HTMLCollection，这两个元素都有 example 和 test 类名。

注意事项

document.getElementsByClassName() 返回的是一个实时集合（live collection），即如果文档中添加或移除了匹配的元素，集合将自动更新。
如果需要使用静态集合（不随文档变化而变化），可以考虑使用 document.querySelectorAll()，它返回一个静态的 NodeList。
在较新的代码中，很多开发者更倾向于使用 document.querySelectorAll() 进行更复杂和灵活的选择，因为它允许使用 CSS 选择器语法。

例子

使用 `querySelectorAll` 替代

<!DOCTYPE html>
<html>
<head>
    <title>querySelectorAll Example</title>
</head>
<body>
    <div class="example test">Element 1</div>
    <div class="example">Element 2</div>
    <div class="example test">Element 3</div>
    <div class="test">Element 4</div>

    <script>
        let elements = document.querySelectorAll('.example.test');
        console.log(elements); // 输出一个包含两个 div 元素的 NodeList

        // 遍历所有匹配的元素
        elements.forEach(element => {
            console.log(element.innerText);
        });
    </script>
</body>
</html>

这个例子中，document.querySelectorAll('.example.test') 返回一个静态的 NodeList，包含具有 example 和 test 类的所有元素。

JS console.log() 函数详解

console.log() 是 JavaScript 中用于在浏览器的控制台输出信息的函数。它是调试和日志记录的重要工具，能够显示变量的值、数据类型以及表达式的结果等。

基本用法

1	console.log('Hello, world!');

这个例子将在控制台输出字符串 Hello, world!。

参数

console.log() 可以接受多个参数，并将它们以空格分隔的形式输出：

1
2
3

let a = 10;
let b = 20;
console.log('The value of a is', a, 'and the value of b is', b);

输出结果为：The value of a is 10 and the value of b is 20

常见用途

1. 输出变量和表达式的值

1
2
3

let x = 5;
let y = 10;
console.log('x + y =', x + y);

输出结果为：x + y = 15

2. 调试代码

console.log() 常用于调试，通过输出变量的值或检查代码执行的流向：

function add(a, b) {
    console.log('Adding', a, 'and', b);
    return a + b;
}

let result = add(3, 4);
console.log('Result:', result);

控制台输出：

1 2	Adding 3 and 4 Result: 7

3. 输出对象

可以直接输出对象和数组，以便查看其结构和内容：

let person = {
    name: 'John',
    age: 30,
    city: 'New York'
};

console.log(person);

控制台输出对象的详细结构。

4. 格式化输出

使用 % 占位符进行格式化输出：

%s：字符串
%d 或 %i：整数
%f：浮点数
%o：对象
%c：CSS 样式

1
2
3

let name = 'Alice';
let age = 25;
console.log('Name: %s, Age: %d', name, age);

输出结果为：Name: Alice, Age: 25

5. CSS 样式

使用 %c 占位符和 CSS 样式字符串，可以自定义控制台输出的样式：

1	console.log('%cThis is a styled message', 'color: blue; font-size: 20px;');

输出结果是带有蓝色和 20px 字体大小的消息。

高级用法

1. 计时

使用 console.time() 和 console.timeEnd() 计算代码执行时间：

console.time('Timer');
for (let i = 0; i < 1000000; i++) {
    // Some code
}
console.timeEnd('Timer');

输出结果类似：Timer: 2.345ms

2. 分组输出

使用 console.group() 和 console.groupEnd() 将相关日志分组显示：

console.group('User Details');
console.log('Name: John');
console.log('Age: 30');
console.group('Address');
console.log('City: New York');
console.log('Zip: 10001');
console.groupEnd();
console.groupEnd();

输出结果会以嵌套的形式分组显示。

3. 断言

使用 console.assert() 检查条件并在条件为假时输出错误消息：

1 2	let value = 5; console.assert(value > 10, 'Value should be greater than 10');

如果 value 不大于 10，控制台会输出：Assertion failed: Value should be greater than 10

4. 表格输出

使用 console.table() 以表格形式输出数组或对象：

let people = [
    { name: 'Alice', age: 25 },
    { name: 'Bob', age: 30 }
];

console.table(people);

输出结果为一个表格，展示数组对象的各个属性。

总结

console.log() 是 JavaScript 调试的核心工具之一，它不仅可以输出简单的日志信息，还可以通过多种高级功能帮助开发者更好地调试和分析代码。理解和有效利用这些功能可以显著提升调试效率和代码质量。

简介