## 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. CentOS系统Tomcat 8.5或9部署SSL证书

    本文档介绍了CentOS系统下Tomcat 8.5或9部署SSL证书的操作说明. 环境准备 操作系统:CentOS 7.6 64位 Web服务器:Tomcat 8.5或9 前提条件 已从阿里云SSL证 ...

  2. javascript回调地狱真的只能Promise来解决吗？js回调地狱，Promise。

    javascript的灵活在于函数可以当作函数的参数来传递,以及它的异步回调思想.但是这就带了一个很严重的问题,那就是回调次数过多,会影响代码结构,多层嵌套影响代码的可阅读性,也不便于书写. 举个例子 ...

  3. Mybatis-sql语句的抽取

    1.抽取之前的UserMapper.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE ...

  4. Java 虚拟机学习记录

    参考资料 JVM高级特性与最佳实践-周志明 HotSpot 虚拟机垃圾回收调优指导 JVM 标准(Java SE 8) JSR 133 Java平台内存模型与线程修订版 命令行工具 JDK Vs JR ...

  5. 在UnityUI中绘制线状统计图

    ##先来个效果图 觉得不好看可以自己调整 ##1.绘制数据点 线状图一般由数据点和连线组成 在绘制连线之前,我们先标出数据点 这里我选择用Image图片来绘制数据点 新建Canvas,添加空物体Gra ...

  6. 2.Docker容器学习之新生入门必备基础知识

    0x02 Docker 核心概念 描述:Docker的三大核心概念镜像/容器和仓库, 通过三大对象核心概念所构建的高效工作流程; 1.镜像 [image] 描述:images 类似于虚拟机镜像,借鉴了 ...

  7. php第一次实验个人博客网站的设计编写①

    先上效果图: 网页代码:index.html <!DOCTYPE html> <html lang="en"> <head>     <m ...

  8. JavaSE前期准备1

    历史(建议了解即可) 一.1990年,美国Sun公司的"Stealth计划"(后改名为"Green计划")目标设置在家用电器等小型系统的程序语言,准备应用在电视 ...

  9. 网页跟随系统 dark mode （暗黑模式） 的实现

    经过几十年的沉默, dark mode(暗黑模式) 又回到了我们面前,越来越多的 APP 有了暗黑主题,越来月多的操作系统原生添加了 "全局暗黑模式", 那么一个网站如何跟随系统的 ...

  10. 阿里巴巴稀疏模型训练引擎-DeepRec

    导读:DeepRec从2016年起深耕至今,支持了淘宝搜索.推荐.广告等核心业务,沉淀了大量优化的算子.图优化.Runtime优化.编译优化以及高性能分布式训练框架,在稀疏模型的训练方面有着优异性能的 ...