## 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. Wepy-小程序踩坑记

    引言 用过原生开发的小程序也知道除了api 其他功能性的内容并不多对于需要做大型项目来说是比较难入手的,因此朋友推荐的wepy我就入坑鸟...这么一个跟vue的开发方式类似的框架,不过说起来跟vue类 ...

  2. ionic3 ion-input进入页面自动获取焦点

    在项目需求中,有需要用到输入框在进入这个页面的时候就自动定位获取这个输入框的焦点. 查了许多资料,也问了ionic3的大神,现将知识点记录如下: 1.能不能直接设置ion-input的属性值来达到自动 ...

  3. 从kill-chain的角度检测APT攻击

    前言 最近一直在考虑如何结合kill chain检测APT攻击.出发点是因为尽管APT是一种特殊.高级攻击手段,但是它还是会具有攻击的common feature,只要可以把握住共同特征,就能进行检测 ...

  4. 在react项目中使用redux-thunk，react-redux，redux;使用总结

    先看是什么,再看怎么用: redux-thunk是一个redux的中间件,用来处理redux中的复杂逻辑,比如异步请求: redux-thunk中间件可以让action创建函数先不返回一个action ...

  5. enum in c++

    enum in c++ enum的实用的定义:给一个值指定一个名称.enums是一种给值命名的方式. 枚举值就是一个整数 用enum的目的:增加程序的可读性 enum的用法:enums [枚举的类名] ...

  6. windows上用命令行我们查看机器cpu信息(使用计算器-程序员模式-四字时，查看系统类型)

    查看系统是64位还是32位 C:\Users\qingshuic>wmic os get osarchitecture OSArchitecture 64-bitC:\Users\qingshu ...

  7. 安全市场迎来新挑战，FinClip助力车联网数据安全

    随着汽车工业的发展与电子技术的进步,智能汽车迎来了前所未有的蓬勃发展,随着汽车电动化.网联化.智能化交融发展,车辆运行安全.数据安全和网络安全风险交织叠加,安全形势更加复杂严峻......

  8. Bootstarp框架用法

    Bootstrap框架 Bootstrap框架 2.X 3.X 4.X # 推荐使用3.X版本 使用框架调整页面样式一般都是操作标签的class属性即可 bootstrap需要依赖于jQuery才能正 ...

  9. Dapr 远程调试之 Nocalhost

    虽然Visual studio .Visual studio code 都支持debug甚至远程debug ,Dapr 搭配Bridge to Kubernetes 支持在计算机上调试 Dapr 应用 ...

  10. liunx对磁盘进行配额限制

    说明,我们给你一个分区进行磁盘配额进行限制 1.首先我们要进行那个分区进行限制,通过修改配置文件加上uquota ,然后再重启一下系统 二.quota 命令用于管理设备的磁盘容量配额,语法格式为 xf ...