JavaScript中Dom(第一天，最详细的笔记)
1. 什么是dom
Dom全称(Document Object Model)[文件对象模型]，Dom是浏览器中提供的一套专门用来操作网页内容的功能，它的作用是，开发网页内容特效和实现用户交互
2. 什么是DOM树
Dom树：将HTML文档以树形结构直观的表现出来，我们称之为文档树或者DOM树，表示描述网页内容关系的名词，作用是文档树直观的体现了标题和标签之间的关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
<div>
<span>你好</span>
</div>
<script></script>
</body>
</html>
下面是Dom树的流程图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SaiFpDQ9-1630147925440)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210828172507169.png)]
3. 什么是Dom节点
-
Dom节点：DOM树里每一个内容都称之为节点， -
节点类型分为：
4. 什么是document
document：是DOM里提供的一个对象，所以它提供的属性和方法都是**用来访问和操作网页内容的**，例如：document.write(),代表的是，浏览器显示网页内容的区域，网页中所有的内容都在document里面，document是学习DOM的核心
5. 如何查找元素节点的方式有哪些？
-
根据id来查找Dom元素节点 语法： document.getElementByIds('标签的id名')
- 根据id查找标签，
- 然后传入的id是
字符串,记得加引号，直接写id名即可，不要加 #， - 返回的是一个匹配到ID的
Dom ELement对象(所有节点都是对象)， - 找不到的话就是null
- 可以通过对象里面的nodeType属性来标识节点的类型
如下代码： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 300px;
height: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let box = document.getElementById('box')
box.style.background = 'red'
</script>
</body>
</html>
效果图-1 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QAgXAa6K-1630147925446)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210828174920122.png)] -
根据Html和body元素节点获取
-
语法： document.documentELement
查找html元素 document.html
查找Body元素节点 document.body
实例如下： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box {
width: 300px;
height: 300px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let html = document.html
let body = document.body
body.style.background = 'red'
</script>
</body>
</html>
-
根据类获取DOM元素节点
6. 操作元素节点
-
直接修改元素的属性
-
通过 setAttribute 方法修改
-
语法 对象.setAttribute('属性','值')
let pic = document.getElementById('pic')
pic.setAttribute('src','./images/lion.png')
pic.setAttribute('width','540')
pic.setAttribute('alt','图片没有了')
-
注意：
属性和值都需要加引号- 目前两种方式没有区别
- 更推荐使用**
对象.属性**的方式
-
修改元素的样式
7. 操作元素文本
document.write：只能将文本内容追加到 前面的位置,文本中包含的标签会被解析
document.write('hello World')
doucment.write('<h1>你好世界</h1>')
innerText 属性： 将文本内容添加/更新到任意标签位置，文本中包含的标签不会被解析
let info= document.getElementById('info')
info.innerText='<h3>你好，我是小白</h3>'
案例-1------页面随机变化背景
<!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>Document</title>
</head>
<body>
<script>
let n = Math.floor(Math.random() * (10 - 1 + 1) + 1)
document.body.style.background = `url(./images/desktop_${n}.jpg)`
</script>
</body>
</html>
效果图-2
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UwwqEBYg-1630147925448)(F:\练习\手册\笔记\JavaScript\img\案例图0.gif)]
时间对象
- 时间对象：用来表示时间的对象，可以得到系统时间
- 实例化，在代码中发现
new关键字时，一般这个操作被称为**实例化**
语法：
let date=new Date()
let date= new Date('2001-10-01')
时间对象的方法
因为时间对象返回的数据我们不能直接使用，所以需要转换为实际开发中常用的格式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1cvhpBuU-1630147925451)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210828183952507.png)]
案例-02---------页面显示时间
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QDkSRwwg-1630147925456)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210828184047824.png)]
<!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 {
height: 100px;
line-height: 100px;
font-size: 72px;
color: red;
background: yellow;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div id="box">毕业时间倒计时</div>
<script>
function time() {
let d1 = new Date();
let n1 = d1.getTime()
let d2 = new Date('2021-10-8')
let n2 = d2.getTime()
let val = n2 - n1
let day = parseInt(val / 1000 / 60 / 60 / 24)
let hours = parseInt(val / 1000 / 60 / 60 % 24)
let minutes = parseInt(val / 1000 / 60 % 60)
let seconds = parseInt(val / 1000 % 60)
let box = document.getElementById('box')
box.innerText = `距离毕业：${day}天${hours}小时${minutes}分钟${seconds}秒`
}
time()
setInterval(time, 1000)
</script>
</body>
</html>
时间戳
-
什么是时间戳
- ? 是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
-
三种方式获取时间戳
案例03-毕业倒计时
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ANuqn3qE-1630147925457)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20210828184939571.png)]
<!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 {
height: 100px;
line-height: 100px;
font-size: 72px;
color: red;
background: yellow;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div id="box">毕业时间倒计时</div>
<script>
function time() {
let d1 = new Date();
let n1 = d1.getTime()
let d2 = new Date('2021-10-8')
let n2 = d2.getTime()
let val = n2 - n1
let day = parseInt(val / 1000 / 60 / 60 / 24)
let hours = parseInt(val / 1000 / 60 / 60 % 24)
let minutes = parseInt(val / 1000 / 60 % 60)
let seconds = parseInt(val / 1000 % 60)
let box = document.getElementById('box')
box.innerText = `距离毕业：${day}天${hours}小时${minutes}分钟${seconds}秒`
}
time()
setInterval(time, 1000)
</script>
</body>
</html>
|