## 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. Nuxt.js服务端渲染实践，从开发到部署

    感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...

  2. java中Object类是怎么回事，干嘛使的？举例说明！

    Object类的作用:m a r k - t o-        w i n: 在java中,因为所有的类都有共性,所以java的缔造者们把java设计成这样:所有的类都是Object类的直接或间接子 ...

  3. vue Element验证input提示

    <el-form-item prop="userName" class="userName_color"> <b>详细地址<i c ...

  4. vue项目中返回之前页面数据不刷新的问题

    利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...

  5. 在uniapp的节流函数

    为了解决同一个人连续多次的点击同一个事件会造成的问题,js解决的方法有防抖和节流,防抖和节流都是在一定的时间上控制次数 节流是在定义的时间内连续点击多次事件,只会执行一次 在uniapp的工具文件夹u ...

  6. swagger不再是第一选择了

    ​ 一.前言 工欲善其事,必先利其器 最近对 API 接口协作的软件研究了好久,市面上的软件都下载用了一轮,下面给大家介绍其中的最强「神器」 Apifox. Apifox 官网:apifox.cn 在 ...

  7. Redis4.0.14 迁槽失败

    线上一个redis集群中主节点使用的内存达到了9.78g,按照redis单个实例最大内存不要超出10g的规范,扩容操作就放在了今天晚上进行.因为之前redis迁槽都是采用 redis-trib.rb ...

  8. 史上最全log4j2远程命令执行漏洞汇总报告

    已投稿信安之路公众号,文章链接

  9. element.insertAdjacentHTML

    一.概念 insertAdjacentHTML() 方法将指定的文本解析为 Element 元素,并将结果节点插入到DOM树中的指定位置.它不会重新解析它正在使用的元素,因此它不会破坏元素内的现有元素 ...

  10. vue项目中的去抖与节流

    节流 // fn是我们需要包装的事件回调, interval是时间间隔的阈值 function throttle(fn, interval) { let last = 0; // last为上一次触发 ...