## 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. 每天找回一点点之MD5加密算法

    之前在做项目的时候用户密码都进行了MD5的加密,今天突然想起来了总结一下(●'◡'●) 一.MD5是什么? MD5信息摘要算法(英语:MD5 Message-Digest Algorithm),一种被 ...

  2. 前端如何通过js判断浏览器的类型（忽略版本）web html css javascript

    每个页面浏览器会实例出一个window对象,在window对象下有一个属性navigator,navigator本身是一个对象,navigator对象上有一个属性userAgent里面包含了当前浏览器 ...

  3. vue报错解决方案

    Vue build faild 解决办法: https://blog.csdn.net/u011169370/article/details/83346176 ? jbcmVideo git:(oah ...

  4. 关于#pragma 和 _pragma

    首先要明确 #pragma 和_Pragma 是什么 这两个都是出自于c/c++ 的 ,其中#pragma 是预处理指令(preProcess directive ) ,#pragma是用来向编译器传 ...

  5. 序列化之Serializer类与ModelSerializer类的使用

    序列化之Serializer类的使用(5星) 作用: 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串 反序列化,把客户端发送过来的数据,经过request以后变成字 ...

  6. 内网穿透NPS

    内网穿透实现 nps文档 https://ehang-io.github.io/nps/#/install nps docker镜像 https://hub.docker.com/r/ffdfgdfg ...

  7. el-menu菜单 -- unique-opened 子菜单唯一性失效

    总结: 点击的是  el-sub-menu . 所以  el-sub-menu 的唯一性是必须的.否则 unique-opened 属性不生效

  8. Java语言学习day09--7月08日

    今日内容介绍 1.方法基础知识 2.方法高级内容 3.方法案例      ###01方法的概述     * A: 为什么要有方法         * 提高代码的复用性      * B: 什么是方法 ...

  9. ArcGIS使用技巧（二）——数据恢复

    新手,若有错误还请指正! ArcGIS工程文件中图层的数据源位置移动之后,会显示红叹号(图1),需要进行数据恢复,就体现出之前所说的勾选"Store relative pathnames t ...

  10. 使用vscode编辑markdown文件（可粘贴截图）

    使用markdown粘贴截图时,操作步骤比较多: 1)截取图片: 2)将图片存在特定位置: 3)记住图片路径,在markdown文件中编写代码: 4)预览效果: 而word之类的文档编辑器,只需要截图 ...