HTML5-dom操作
程序员文章站
2022-03-14 23:10:51
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<li>请选择</li>
<li class="red">前端</li>
<li class="green">Java</li>
<li class="blue">JavaScript</li>
<li id="c">JavaScript</li>
</body>
<script>
/* 获取第一个li标签 */
window.onload = function() {
/* ElementsByTagName获取的是数组 */
/* 索引：不直观 以后的数据都是从后台动态获取，前台动态生成添加 */
/* var cli=document.getElementsByTagName("li")[1] */
// console.log(cli);
// query:查询 Selector:选择器 querySeletor(传入选择器名称)
// querySelector：获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素
// 参数要求：如果是类选择器，必须添加。如果是id选择器，必须添加，否则当成标签处理
var javali = document.querySelector(".green");
// var javali = document.querySelector("#c");
console.log(javali);
// querySelectorAll获取满足条件的所有元素--数组
var allLi = document.querySelectorAll("li")[0];
console.log(allLi);
}
</script>
</html>