67 lines
1.4 KiB
HTML
67 lines
1.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="app">
|
||
|
|
app
|
||
|
|
<div class="box"></div>
|
||
|
|
<ul>
|
||
|
|
<li>我是li1</li>
|
||
|
|
<li>我是li2</li>
|
||
|
|
<li>我是li3</li>
|
||
|
|
<li>我是li4</li>
|
||
|
|
<li>我是li5</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
//00-获取dom
|
||
|
|
//选择 单
|
||
|
|
let app=document.querySelector("#app"); //参数为css中的选择器
|
||
|
|
//选择 多
|
||
|
|
let li = document.querySelectorAll("#app ul li");
|
||
|
|
|
||
|
|
// 01-获取的特殊的dom
|
||
|
|
// let html = document.documentElement;
|
||
|
|
// console.log(html);
|
||
|
|
|
||
|
|
//获取body的dom
|
||
|
|
// let body =document.body;
|
||
|
|
// console.log(body);
|
||
|
|
|
||
|
|
//获取header的dom
|
||
|
|
// let head = document.head;
|
||
|
|
// console.log(head);
|
||
|
|
|
||
|
|
//获取title的dom
|
||
|
|
// let title = document.title;
|
||
|
|
// console.log(title);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
//查看 确定自己是否已经获取了dom
|
||
|
|
// console.dir(app);
|
||
|
|
// console.log(app);
|
||
|
|
|
||
|
|
// console.log(li);
|
||
|
|
// console.dir(li);
|
||
|
|
|
||
|
|
//获取dom的主要用于:
|
||
|
|
//1.添加事件
|
||
|
|
//2.修改样式
|
||
|
|
//3.修改属性
|
||
|
|
//4.修改标签内容
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|