简介
- JS基础知识
JS document.getElementsByClassName() 函数是什么
document.getElementsByClassName()
是 JavaScript 中一个用于获取文档中所有具有指定类名的元素的方法。这个方法返回一个实时的 HTMLCollection 对象,该对象包含所有具有指定类名的元素。
语法
1
let elements = document.getElementsByClassName(classNames);
参数
classNames
:一个字符串,包含一个或多个用空格分隔的类名。返回的集合将包含文档中所有匹配这些类名的元素。
返回值
- 一个实时的 HTMLCollection 对象,包含所有具有指定类名的元素。如果没有匹配的元素,则返回的 HTMLCollection 对象的长度为 0。
示例
示例 1:获取单个类名的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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:获取多个类名的元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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
替代
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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()
常用于调试,通过输出变量的值或检查代码执行的流向:
1
2
3
4
5
6
7
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. 输出对象
可以直接输出对象和数组,以便查看其结构和内容:
1
2
3
4
5
6
7
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()
计算代码执行时间:
1
2
3
4
5
console.time('Timer');
for (let i = 0; i < 1000000; i++) {
// Some code
}
console.timeEnd('Timer');
输出结果类似:Timer: 2.345ms
2. 分组输出
使用 console.group()
和 console.groupEnd()
将相关日志分组显示:
1
2
3
4
5
6
7
8
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()
以表格形式输出数组或对象:
1
2
3
4
5
6
let people = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 }
];
console.table(people);
输出结果为一个表格,展示数组对象的各个属性。
总结
console.log()
是 JavaScript 调试的核心工具之一,它不仅可以输出简单的日志信息,还可以通过多种高级功能帮助开发者更好地调试和分析代码。理解和有效利用这些功能可以显著提升调试效率和代码质量。