## DOM获取元素、修改元素
### 1.DOM
#### ①什么是DOM？作用？

> DOM是文档对象模型
> 作用：操作网页内容，可以开发网页内容特效和实现用户交互。
#### ②DOM对象
![对象](https://img-blog.csdnimg.cn/6b72dff24da949ed8782778a18bba8ce.png)
### 2.获取DOM元素
#### ① 根据CSS选择器来获取DOM元素 (重点)
![1](https://img-blog.csdnimg.cn/be5b970fefa9464ea777e51643aa1386.png)
![2](https://img-blog.csdnimg.cn/ba853e2d5132415fa8c14381da8c26fd.png)
![3](https://img-blog.csdnimg.cn/184ec2d94e674ec1b60af42976a7b42d.png)

**思考**
>1. 获取一个DOM元素我们使用谁？
**querySelector()**
>2. 获取多个DOM元素我们使用谁？
**querySelectorAll()**
>3. querySelector() 方法能直接操作修改吗？
**可以**
>4. querySelectorAll() 方法能直接修改吗？ 如果不能可以怎么做到修改？
**不可以， 只能通过遍历的方式一次给里面的元素做修改**
#### ②其他获取DOM元素方法（了解）
![在这里插入图片描述](https://img-blog.csdnimg.cn/e2935a4100ac4bbd9e440edb9b24022a.png)
**注意点**
![在这里插入图片描述](https://img-blog.csdnimg.cn/1a3aa131ad7749afb1e7fba64e9adb13.png)
### 3.设置/修改DOM元素内容
#### ①.document.write()
![在这里插入图片描述](https://img-blog.csdnimg.cn/4abfa60c59cc4a4ea603ca25c5a11c5b.png)
#### ②.元素innerText 属性
![在这里插入图片描述](https://img-blog.csdnimg.cn/56907639f23c4f3e8e6b2a177864c1cd.png)
#### ③.元素.innerHTML 属性
![在这里插入图片描述](https://img-blog.csdnimg.cn/cc5e7011617e4780b5a002525788226b.png)
**三者区别**
>1.document.write() 方法 :只能追加到body中
> 2.元素.innerText 属性 :只识别内容，不能解析标签
> 3.元素.innerHTML 属性: 能够解析标签
> **如果还在纠结到底用谁，你可以选择innerHTML**
#### 案例：随机抽取的名字显示到指定的标签内部
![在这里插入图片描述](https://img-blog.csdnimg.cn/8cfbc4140dae4f988c1cd280ef3c730b.png)
**源代码**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>随机点名</title>
<style>
div {
display: inline-block;
height: 30px;
width: 150px;
vertical-align: middle;
border: 1px solid pink;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
点到的同学为：<div></div>

<script>
let div = document.querySelector('div')

function getRandom(min, max) {
return Math.floor(Math.random() * (max - min +1))
+ min
}

let arr = ['赵云', '马超', '黄忠', '刘备', '张飞', '关羽', '曹操']

let random = getRandom(0, arr.length - 1)

div.innerHTML = arr[random]

arr.splice(random, 1)
</script>
</body>
</html>
```
### 4.设置/修改DOM元素属性
#### ①.设置/修改元素常用属性
![在这里插入图片描述](https://img-blog.csdnimg.cn/c1b0c5507f0f41239a37c0ca433bff0f.png)
#### ②.设置/修改元素样式属性
![在这里插入图片描述](https://img-blog.csdnimg.cn/b228daa32dc14dbeb82192edff3a2799.png)
##### 1）通过 style 属性操作CSS
![在这里插入图片描述](https://img-blog.csdnimg.cn/e73c5ef0361646abbb32a15e5ad52ead.png)
##### 2）操作类名(className) 操作CSS
![在这里插入图片描述](https://img-blog.csdnimg.cn/b0c1b4c9f7fe4192b72961d2bed52741.png)
**注意点**
>直接使用 className 赋值会覆盖以前的类名
##### 3）通过 classList 操作类控制CSS
![在这里插入图片描述](https://img-blog.csdnimg.cn/640e50b5fb2249079905d6a877bd2b0c.png)
#### ③.设置/修改 表单元素 属性
![在这里插入图片描述](https://img-blog.csdnimg.cn/78e7f849eac94530ada2bd9a137022d4.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/27881c6bfc1342dea92d91ae336aff54.png)
### 5.定时器-间歇函数
![在这里插入图片描述](https://img-blog.csdnimg.cn/baf566ae8a1f4e058dc0c9a5a3c7ecb5.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/d3e4a303d47548dd9a8e8c5458651feb.png)
#### 案例：倒计时效果
需求：按钮6秒之后才可以使用
![在这里插入图片描述](https://img-blog.csdnimg.cn/e6afecfff9f443519e660334fbd7c720.png)
**源代码**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定时间歇函数</title>
</head>
<body>
<button class="btn" disabled>我已经阅读用户协议(6)</button>
<script>
let btn = document.querySelector('.btn')

let i = 6
let timer = setInterval(function() {
i--
btn.innerHTML= `我已经阅读用户协议(${i})`
if (i === 0){
clearInterval(timer)
btn.disabled = false
btn.innerHTML = `我已同意该协议`
}
}, 1000)
</script>
</body>
</html>
```
#### 案例：网页轮播图效果
![在这里插入图片描述](https://img-blog.csdnimg.cn/eb1fc56a048d478484c6c0f81d913647.png)
**源代码**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ音乐轮播图</title>
<style>
.img-box {
width: 700px;
height: 320px;
margin: 50px auto 0;
background: #000;
position: relative;
}

.img-box .tip {
width: 700px;
height: 53px;
line-height: 53px;
position: absolute;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 10;
}

.img-box .tip h3 {
width: 82%;
margin: 0;
margin-right: 20px;
padding-left: 20px;
color: #98E404;
font-size: 28px;
float: left;
font-weight: 500;
font-family: "Microsoft Yahei", Tahoma, Geneva;
}

.img-box .tip a {
width: 30px;
height: 29px;
display: block;
float: left;
margin-top: 12px;
margin-right: 3px;
}

.img-box ul {
position: absolute;
bottom: 0;
right: 30px;
list-style: none;
z-index: 99;
}
</style>
</head>
<body>
<div class="img-box">
<img class="pic" src="data:images/b01.jpg" alt="第1张图的描述信息">
<div class="tip">
<h3 class="text">挑战云歌单，欢迎你来</h3>
</div>
</div>
<script>
let data = [
{
imgSrc: 'images/b01.jpg',
title: '挑战云歌单，欢迎你来'
},
{
imgSrc: 'images/b02.jpg',
title: '田园日记，上演上京记'
},
{
imgSrc: 'images/b03.jpg',
title: '甜蜜攻势再次回归'
},
{
imgSrc: 'images/b04.jpg',
title: '我为歌狂，生为歌王'
},
{
imgSrc: 'images/b05.jpg',
title: '年度校园主题活动'
},
{
imgSrc: 'images/b06.jpg',
title: 'pink老师新歌发布，5月10号正式推出'
},
{
imgSrc: 'images/b07.jpg',
title: '动力火车来到西安'
},
{
imgSrc: 'images/b08.jpg',
title: '钢铁侠3，英雄镇东风'
},
{
imgSrc: 'images/b09.jpg',
title: '我用整颗心来等你'
},
]

let pic = document.querySelector('.pic')
let text = document.querySelector('.text')

let i = 0

setInterval(function() {
i++
pic.src = data[i].imgSrc
text.innerHTML = data[i].title

if (i === data.length - 1){
i = -1
}
}, 1000)
</script>
</body>
</html>
```
DOM第一阶段over
>你生活的起点并不是那么重要，重要的是最后你能到达哪里

DOM获取元素、修改元素的更多相关文章

  1. javascript中DOM获取和设置元素的内容、样式及效果

    getElementById() 根据id获取dom元素 没有找到则返会Null <!DOCTYPE html> <html lang="en"> < ...

  2. JavaScrip——DOM操作（查找HTML元素/修改元素）

    innerHTML 1.查找元素——document.getElementById("intro") 2.输出查找的结果: (1)var a=document.getElement ...

  3. 用 DOM 获取页面的元素方法集合

    document.getElementById('id名')            // 获取页面设置指定 id 的元素 document.getElementsByTagName('标签名')    ...

  4. Dom修改元素样式

    提纲:我们可以通过js来修改元素的大小,颜色,位置等样式 1.element.style                         行内样式的操作 2.element.className    ...

  5. JavaScript--DOM修改元素的属性

    一旦你获得了要修改的元素,可以有2种方式,来读取和修改它的属性:一种老的方式(它被更多的用户代理所支持)和一种新的DOM方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...

  6. DOM读取和修改节点对象属性

    一.获取和修改元素间的内容(3种) 1.innerHTML 获得/设置元素开始标签和结束标签之间的html原文 固定套路:1.删除父元素下所有子元素:parent.innerHTML="&q ...

  7. 跟随标准与Webkit源码探究DOM -- 获取元素之getElementsByTagName

    按照标签名获取元素 -- getElementsByTagName 标准 DOM 1在Element和Document两个interface中均有定义,原型NodeList getElementsBy ...

  8. DOM修改元素的方法总结

    今天我们要谈谈DOM元素的修改(包括修改内容,属性,样式).修改内容的方法----3种:elem.innerHTML:获取或设置元素开始标签到结束标签之间的原始HTML代码片段:elem.textCo ...

  9. javascript 常见数组操作（ 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方）

    主要内容: 1.数组整体元素修改 2. 数组筛选 3.jquery 元素转数组 4.获取两个数组中相同部分或者不同部分 5.数组去重并倒序排序 6.数组排序 7.数组截取slice 8.数组插入.删除 ...

随机推荐

  1. ES6-11学习笔记--Generator

    基本使用 function后面加个*号 function* foo() { for (let i = 0; i < 3; i++) { yield i; // yield不能作为构造函数去使用, ...

  2. Go 里面的 ^ 和 &^

    这几天在研究 Go 的源码,突然发现了一个之前没有见过的位运算,见这里 new &^= mutexWoken & 和 ^,分别表示 AND 和 XOR,这个不用多说. 值得一提的是 ^ ...

  3. python爬虫---表情包批量采集

    代码: import requests from pyquery import PyQuery as pq # 比xpath还要灵活的html解析工具 # 定义请求 headers = { " ...

  4. Java 请求转发和重定向的区别以及JavaWeb三大作用域

    三大作用域以及转发和重定向 学习总结 1. 转发和重定向 转发 重定向 转发和重定向的区别: 什么时候用转发什么时候用重定向 三大作用域 作用域类型 作用域方法 如何选择作用域 总结 学习总结 1. ...

  5. xml中的<![CDATA[]]>和转义字符

    被<![CDATA[]]>这个标记所包含的内容将表示为纯文本,比如<![CDATA[<]]>表示文本内容"<". 此标记用于xml文档中,我们先 ...

  6. CSS简单样式练习（二）

    运行效果: 源代码: 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta char ...

  7. kali添加开机自启[亲测有效]

    kali添加开机自启 采用systemd的方法,kali默认是没有rc.local的,需要自己创建.本方法也适用于ubuntu 18.04 64bit 改写rc-local.service 文件 先从 ...

  8. B. Build the Permutation

    题目分析:我们先简单的分析一下这道题是在干什么啊,给我们三个整数n,a,b,问我们能否构造这样的排列使得序列中有a个极大值,b个极小值,能的话就给出任意一种可能的情况,不能的话就输出-1: 其实一开始 ...

  9. OpenHarmony 3.1 Beta版本关键特性解析——HiStreamer框架大揭秘

    ​(以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点)​ 陈国栋 数字多媒体技术在过去的数十年里得到了飞速的发展,多媒体终端设备如智能音箱.智能门锁.智能手表广泛应用于人们 ...

  10. SpringCloud微服务实战——搭建企业级开发框架（三十九）：使用Redis分布式锁（Redisson）+自定义注解+AOP实现微服务重复请求控制

      通常我们可以在前端通过防抖和节流来解决短时间内请求重复提交的问题,如果因网络问题.Nginx重试机制.微服务Feign重试机制或者用户故意绕过前端防抖和节流设置,直接频繁发起请求,都会导致系统防重 ...