DOM-获取DOM元素、修改属性
Web API 基本认知
1.作用和分类
1）作用：就是使用JS去操作html和浏览器
2）分类：DOM（文档对象模型）、BOM（浏览器对象模型）
2.什么是DOM
1）DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
2）DOM作用：操作页面内容，可以开发网页内容特效和实现用户交互
3.DOM树
1）DOM树是什么
- 将HTML文档一树状结构直观地表象出来，我们称之为文档树或DOM树
2）作用：文档树直观地体现了标签与标签之间的关系
4.DOM对象（重要）
1）DOM对象：浏览器根据html标签生成的JS对象
-
所有的标签属性都可以在这个对象上面找到
-
修改这个对象的属性会自动映射到标签身上
2）DOM的核心思想
- 把网页内容当做对象来处理
3）document对象
-
是DOM里提供的一个对象
-
所以它提供的属性和方法都是用来访问和操作页面内容的
例如：document.write()
-
网页所有内容都在document里面
获取DOM对象
根据CSS选择器来获取DOM元素（重点）
1.选择匹配的第一个元素
1）语法：document.querySelector('css选择器')
2) 参数：包含一个或多个有效地CSS选择器字符串
3）返回值：CSS选择器匹配的第一个元素，一个HTMLElement对象。如果没有匹配到，则返回null
2.选择匹配的多个元素
1）语法：document.querySeleotrAll('css选择器')
2）参数：包含一个或多个有效的CSS选择器字符串
3）返回值：CSS选择器匹配的NodeList对象集合
document.querySelectorAll('css选择器')
得到的是一个****伪数组： 1）有长度有索引号的数组， 2）但是没有pop() push()等数组方法 想要得到里面的每一个对象，则需要遍历（如for）的方式获得
哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个 伪数组，里面只有一个元素而已
小括号里面的参数必须是字符串，也就是必须加引号
其他获取DOM元素方法（了解）
1)根据id获取一个元素：
document.getElementById('nav')
2)根据标签获取一类元素 获取页面所有div
document.getElementsByTagName('div')
3)根据类名获取元素 获取元素 获取页面所有类名为w的
document.getElementsByClassName('w')
设置/修改DOM元素内容
1.docum.write()方法
-
只能将文本内容追加到</body>前面的位置
-
文本中包含的标签会被解析
2.元素.innerText属性
-
将文本内容添加或更新到任意标签位置
-
文本中包含的标签不会被解析
3.元素.innerHTML属性
-
将文本内容添加或更新到任意标签位置
-
文本中包含的标签会被解析
设置/修改DOM元素属性
1.设置/修改元素常用属性
-
还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
-
最常见的属性比如： href、title、src 等
1）语法：对象.属性=值
2.设置/修改元素样式属性
还可以通过 JS 设置/修改标签元素的样式属性。
-
比如通过 轮播图小圆点自动更换颜色样式
-
点击按钮可以滚动图片，这是移动的图片的位置 left 等等
学习路径：
-
通过 style 属性操作CSS
-
操作类名(className) 操作CSS
-
通过 classList 操作类控制CSS
1）通过 style 属性操作CSS
- 语法：对象.style.样式属性=值
注意： 1.修改样式通过style属性引出 2.如果属性有-连接符，需要转换为小驼峰命名法 3.赋值的时候，需要的时候不要忘记加css单位
2）操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式
-
语法：元素.className = 'active' =>active是一个CSS类名
-
注意：
-
由于class是关键字, 所以使用className去代替
-
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
⭐ 直接使用className赋值会覆盖以前的类名
-
3）通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
- 语法：
3.设置/修改 表单元素 属性
定时器—间歇函数
1.定时器函数基本使用
1)开启定时器
setInterval(函数，间隔时间)
-
作用：每隔一段时间调用这个函数
-
间隔时间单位是毫秒
注意： 1.函数名字不需要加括号 2.定时器返回的是一个 id数字
2)关闭定时器
注意： 1.函数名字不需要加括号 2.定时器返回的是一个 id数字
综合案例
1.DOM的使用
<body>
<div>你好啊</div>
<button>按钮</button>
<script>
let inputDom = document.querySelector('div');
console.dir(inputDom)
let buttonDom = document.querySelector('button');
console.dir(buttonDom)
</script>
</body>
2.动态修改DOM元素内容
<body>
<h1>午饭吃什么？</h1>
<h2>不知道</h2>
<script>
let foodName = prompt('输入你想吃的东西');
let h2Dom = document.querySelector('h2');
h2Dom.innerText = foodName;
</script>
</body>
3.随机修改DOM元素内容
<body>
<h1>中午吃什么</h1>
<h2>xxx</h2>
<script>
let foodName = ['麦当劳', '肯德基', '酸菜鱼', '麻辣烫', '韩式炸鸡', '尊宝披萨'];
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
let random = getRandom(0, foodName.length - 1)
let h2Dom = document.querySelector('h2');
h2Dom.innerText = foodName[random]
</script>
</body>
4.获取多个DOM元素
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div>123</div>
<script>
/*
querySelectorAll 不管你的选择器写对与否，返回值都是数组
querySelector
1 能找到 返回 dom元素 dom对象
2 找不到了 返回null
*/
// querySelector 只能获取第一个符合要求的li标签
// let li = document.querySelector('li');
// 获取所有的li标签 返回一个数组
// let lis = document.querySelectorAll('li');
// // 数组就可以和循环搭配
// for (let index = 0; index < lis.length; index++) {
// // lis[index] dom元素
// // 文本
// lis[index].innerText = `这个是li标签 ` + index;
// }
// let divs = document.querySelectorAll('div');
// console.log(divs); // 输出什么 ？ 空数组！！
// console.log(divs); // 输出什么 [ div dom元素 ] 1个元素
console.log( document.querySelector("button") );
</script>
</body>
5.获取其他DOM元素的方式
<body>
<div id="nav">id选择器</div>
<p>这个是p标签</p>
<div class="container">也是div container</div>
<script>
// 根据id来获取 一个dom
// let nav = document.getElementById("nav");
// console.log(nav)
// 根据 标签名称 来获取dom元素 一组dom元素
// let ps=document.getElementsByTagName("p");
// console.log(ps);
// 根据 类名来获取元素 一组元素
// let divs = document.getElementsByClassName("container");
// console.log(divs);
// 常用和方便
// 获取一个
// document.querySelector("#nav")
// document.querySelector("p")
// document.querySelector(".container")
// 获取一组
// document.querySelectorAll
</script>
</body>
6.三种设置文本内容的方式
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
// 以后就很少用了 document.write 功能弱 只能把标签写在 /body 标签上面
// document.write
document.querySelector('li:nth-child(2)').innerText = '<button>随便修改</button> ';
document.querySelector('li:nth-child(3)').innerHTML ='<button>随便修改</button> ';
/*
3 种实现在标签中写 动态设置文本
1 document.write 只能在body标签的中写 以后 很使用它
2 innerText 只能设置文本，不能解析 html字符串
3 innerHTML 可以设置文本 也可以解析html字符串
*/
</script>
</body>
7.随机显示图片
<body>
<img src="" alt="">
<script>
let imgName = [
'./images/01.jpg',
'./images/02.jpg',
'./images/03.jpg',
'./images/04.jpg',
'./images/05.jpg',
'./images/06.jpg'
];
let i = Math.round(Math.random() * imgName.length - 1)
let img = document.querySelector('img')
img.src = `${imgName[i]}`
</script>
</body>
8.设置元素样式
<body>
<div>麦当劳</div>
<script>
let div = document.querySelector('div')
div.style.fontSize = "100px";
div.style.color = "yellow";
div.style.backgroundColor = "red";
div.style.width = "400px";
div.style.height = "200px";
div.style.lineHeight = "200px";
div.style.textAlign = "center";
div.style.margin = "100px auto"
let colorName = [
'lightseagreen',
'cadetblue',
'purple',
'coral',
'darkslateblue'
];
let i = Math.round(Math.random() * (colorName.length - 1))
let body = document.querySelector('body')
body.style.backgroundColor = colorName[i]
</script>
</body>
9.随机换背景色
<body>
<script>
function getRandomColor(min, max) {
return Math.round(Math.random() * (max - min) + min)
}
let c1 = getRandomColor(0, 255)
let c2 = getRandomColor(0, 255)
let c3 = getRandomColor(0, 255)
document.body.style.backgroundColor = `rgb(${c1},${c2},${c3})`
</script>
</body>
10.ClassName
<body>
<div ></div>
<script>
/*
className
会先清空这个dom的元素 旧的所有的类 然后再单独添加上 新的类
如果想要同时设置多个 class 以空格做分割即可
*/
// js的方式来动态添加上这个class
let div = document.querySelector('div');
// 通过 className 来设置类名即可
// 同时设置两个类上去
div.className = 'box redCls';
</script>
</body>
11.ClassList操作类
<body>
<div class="d1 d4">123</div>
<script>
// 添加一个class
let div = document.querySelector('div');
// div.className="d2";
// classList 添加一个类
div.classList.add("d2","d3","d4");
// div.classList.add("d2");
// div.classList.add('d3');
// 单独来指定移除一个class
div.classList.remove("d2","d3")
// 切换 （如果本来有，那我就移除 ， 如果本来没有，那我就添加）
div.classList.toggle("d4")
</script>
</body>
12.页面刷新更改背景图片
<body>
<script>
let randomBackgroundImage = [
'./images/01.jpg',
'./images/02.jpg',
'./images/03.jpg',
'./images/04.jpg',
'./images/05.jpg',
'./images/06.jpg'
];
let i = Math.round(Math.random() * (randomBackgroundImage.length - 1))
let img = document.querySelector('img')
document.body.style.backgroundImage = `url(${randomBackgroundImage[i]})`
</script>
</body>
13.定时器的基本使用
<body>
<script>
// 函数 负责 定时执行的业务
// function repeat() {
// console.log('前端程序员，头发多');
// }
// 每隔一秒执行一次函数
// 时间单位 毫秒 1000毫秒=1秒
// setInterval(repeat, 1000);
// 其他模样的写法
// setInterval(匿名函数,1000);
setInterval(function(){
console.log("头发没有啦");
},1000);
</script>
</body>
14.清除定时器
<body>
<script>
// 开启了一个定时器 会返回 定时器id
// 不需要关心 这个定时器的id 等于多少， 有id
// let timeId = setInterval(function () {
// console.log('准备吃晚饭');
// }, 1000);
// // console.log(timeId);
// // 清除定时器 一般都是要根据某个条件来清除
// clearInterval(timeId);
// 追女孩子 追30次 不行 我就撤退！！
let index = 0;
// 创建定时器的同时 返回了定时器id
let timeId = setInterval(function () {
index++;
console.log('开始追了', index);
// 判断是否满足条件了
if (index === 30) {
// 放弃 没有缘分
clearInterval(timeId);
}
}, 100);
</script>
</body>
