一真的小站

鳶飛魚躍,無處不是化境。

0%

四、获取dom元素

四、获取dom元素

1.ElementsByTagName

写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<head> 
<style>
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<ul>
<li class="red">前端</li>
<li class="green">java</li>
<li class="blue">js</li>
<li>c++</li>
</ul>
<script>
window.onload = function() {
// ElementsByTagName获取的是数组
// 索引:不直观
var cli = document.getElementsByTagName("li")[0]
console.log(cli)
}
</script>
</body>

参数含义

对象 定义
ul 标签定义无序列表
li 列表项目
script 插入JavaScript脚本
window.onload 用于在网页加载完毕后立刻执行的操作
function 声明一个函数
var 创建一个变量
document 使我们可以从脚本中对 HTML 页面中的所有元素进行访问
getElementsByTagName 返回带有指定标签名的对象的集合
[0] li的第0个数组
console.log 在控制台输出信息

2.querySelector

写法

1
2
3
4
5
6
7
8
9
10
11
12
<script>
window.onload = function() {
// query:查询 Selector:选择器
// querySelector获取单个元素,如果获取不止一个,只返回满足条件的第一个元素
// 如果类选择器,添加.
// 如果id选择器添加#
// 否则当成标签处理
var javaLi = document.querySelector(".green")
// var javaLi=document.querySelector("#blue")
console.log(javaLi)
}
</script>

参数含义

对象 定义
query 查询
Selector 选择器
querySelector 获取单个元素,如果获取不止一个,只返回满足条件的第一个元素

3.querySelectorAll

写法

1
2
3
4
5
6
7
<script>
window.onload = function() {
// querySelectorAll获取满足条件的所有元素
var allLi = document.querySelectorAll("li")
console.log(allLi)
}
</script>

参数含义

对象 定义
All 获取满足条件的所有元素