1. DOM
1.1 基本概念
DANGER
- DOM document object model 文档对象模型
- BOM browser object model 浏览器对象模型
- API 应用程序接口 Application Programming Interface
文档:document 一个页面就是一个文档 元素:element 页面上所有的标签都叫元素 节点:node 页面上所有的内容都可以叫做节点 元素节点、属性节点,注释节点,文本节点
1.2 什么是DOM
DOM 核心: 把网页内容当做对象来处理,当我们修改了这个对象的属性和方法之后,就相当于对网页内容做了操作。
document 是页面文档的顶级对象
window 是浏览器的顶级对象 // (code代码笔记中这里写错了哈) window => document => html => body
1.3 如何获取DOM对象
1.3.1 匹配指定的第一个元素
document.querySelector('css选择器')
作用:返回指定css选择器的第一个元素 参数: CSS选择器,字符串; 注意 => 类名 要加 . id要加#号!!!
console.dir() ==> 打印一个对象的所有属性和方法
html
<div class="box">我是一个div</div>
<ol class="ol">
<li>我是第一个孩子</li>
<li>我是第二个孩子</li>
<li>我是第三个孩子</li>
</ol>
<ul id="nav">
<li>新闻</li>
<li>体育</li>
<li>娱乐</li>
</ul>
<script>
const box = document.querySelector('.box')
console.log(box)
const ol = document.querySelector('.ol')
console.log(ol)
const ul = document.querySelector('#nav')
console.log(ul)
// 2.注意返回的是,第一个匹配的dom对象
const li = document.querySelector('li')
console.log(li)
// 返回值 ==> 是一个对象
// console.dir() // 打印一个对象的所有属性和方法
console.dir(box)
console.log(typeof box) // 'object'
// 3. 如果找不到这个元素,返回 null
const p = document.querySelector('p')
console.log(p)
</script>
1.3.2 获取多个dom对象
document.querySelectorAll() 作用:返回指定选择器的所有元素集合,是伪数组
html
<div class="box">我是一个div</div>
<ol class="ol">
<li>我是第一个孩子</li>
<li>我是第二个孩子</li>
<li>我是第三个孩子</li>
</ol>
<ul id="nav">
<li>新闻</li>
<li>体育</li>
<li>娱乐</li>
</ul>
<script>
// document.querySelectorAll()
// 返回指定选择器的所有元素集合
// 注意:
// 1.返回的是一堆,集合,伪数组
// 2.类名要写. id要写#
const lis = document.querySelectorAll('.ol li')
console.log(lis)
// 即使只有一个元素,返回的也是伪数组,
const div = document.querySelectorAll('div')
console.log(div)
</script>
1.3.3 伪数组
- 有length,有索引号
- 但是没有数组的一些常用的方法,比如push,pop等
javascript
// 伪数组
// 1. 有length,有索引号
// 2. 但是没有数组的一些常用的方法,比如push,pop等
const lis = document.querySelectorAll('ul li')
console.log(lis)
// lis.push(666)
// 如果要获取伪数组中所有的元素,我们可以遍历
for(let i = 0; i < lis.length; i++){
console.log(lis[i])
}
// 如果想直接获取某一个元素 ,数组的下标取, 从0开始数
console.log(lis[2])
1.3.4 其他方式
javascript
// 其他获取DOM元素方式(了解)
// 1. getElementById() 根据ID获取元素
const box = document.getElementById('box')
console.log(box)
// 2. getElementsByTagName() 根据标签名获取元素, 伪数组
const ps = document.getElementsByTagName('p')
console.log(ps)
// 3. getElementsByClassName('')
const items = document.getElementsByClassName('item')
console.log(items)
// 4. getElementsByName('') 通过name属性值获取元素 伪数组
const ipts = document.getElementsByName('username')
console.log(ipts)
2. 操作元素内容
- innerText ==> 不能识别html标签
- innerHTML ==> 可以识别html标签
javascript
// 1. 首先需要获取到我们要修改内容的元素
const box = document.querySelector('.box')
console.dir(box)
// 2. 操作元素的内容 增删改查
// 2.1 查
console.log(box.innerText)
// 2.2 改
box.innerText = '哇哈哈'
// 2.3 增
const box1 = document.querySelector('.box1')
box1.innerText = '马儿扎哈'
// 2.4 删
box.innerText = ''
box1.innerText = ''
// 3. 另外一个操作元素内容的属性 innerHTML
// innerText 不能解析html标签
// innerHTML 可以解析html标签
// box1.innerText = '<strong>哇哈哈</strong>'
box1.innerHTML = '<strong>哇哈哈</strong>'
3. 操作元素属性
3.1 元素常用属性
src / title / alt / href等
html
<img src="./images/1.png" alt="我是播仔">
<script>
// 1. 获取元素
const img = document.querySelector('img')
console.log(img)
console.dir(img)
// 操作元素的常用属性
// 对象.属性 = 值
// 1.1 查
console.log(img.src)
// 1.2 改
img.src = './images/3.png'
// 1.3 增
img.title = '我是图片'
// 1.4 删
img.alt = ''
// src title alt href 等等
</script>
3.2 元素样式属性
- style => 注意宽高等带单位px
- className => 会覆盖原来的类名
- classList
- dom.classList.add() 添加
- dom.classList.remove() 移除
- dom.classList.toggle() 切换
- dom.classList.contains() 包含
javascript
<div class="box"></div>
<script>
// 1. 获取元素
const box = document.querySelector('.box')
// 2. 通过style修改样式
console.dir(box)
box.style.width = '600px'
box.style.height = '600px'
box.style.backgroundColor = 'skyblue'
box.style.marginTop = '200px'
box.style.borderRadius = '50%'
// 3. 注意事项
// 1. 如果是宽高等一些属性,带单位
// 2. 如果是带-的样式,换成小驼峰 ,e.g.(例如) => marginTop
</script>
javascript
<div class="box circle">123</div>
<script>
// 1. 获取box
const box = document.querySelector('.box')
console.log(box)
// 2. 利用类名操作样式
box.className = 'box circle'
// 3. 如果利用类名来操作样式,新添加的类名会覆盖原来的类名
// 如果想同时保留,原来的类名一起写上,空格隔开。
// 4.实际应用场景
// 1. style单个样式修改,比较简洁
// 2. className多个样式都要修改,可以使用,但是需要注意,会覆盖原来的类名
// 3. 清空某个dom对象的所有类名 box.className = ''
</script>
javascript
<div class="box">classList操作样式</div>
<script>
// 通过classList添加
const div = document.querySelector('div')
// 2. 通过classList操作样式
// 2.1 追加类名
div.classList.add('circle')
// 2.2 删除类名 类名不加点,写字符串
// div.classList.remove('circle')
// 2.3 切换类名 toggle 如果dom元素有这个类名,我们就删除它,如果没有,就添加这个类名
div.classList.toggle('circle')
// 小结:修改元素样式
// 1. style 单个
// 2. className
// 3. classList.add() / classList.remove() / classList.toggle() 多个
</script>
3.3 表单元素属性
html
<input type="text" name="username" value="用户名">
<button>按钮</button>
<input type="checkbox" name="agree">
<script>
// 操作表单属性
// 属性选择器 []
const ipt = document.querySelector('[name="username"]')
console.log(ipt)
// 需求:获取input输入框中的内容
// 如果要获取input的内容 操作value属性
// console.log(ipt.innerHTML)
// 1.查 取
console.log(ipt.value)
// 2.改 / 增
ipt.value = '修改一下下'
// 3.删
// ipt.value = ''
// 修改表单元素的type属性值
ipt.type = 'password'
// 2. 禁用按钮,勾选复选框 用==> disabled / checked ==> true/false
const btn = document.querySelector('button')
btn.disabled = true
const agree = document.querySelector('[name="agree"]')
console.log(agree)
agree.checked = true
</script>
3.4 自定义属性
javascript
<div class="box" data-id="1" data-name="666" data-test-demo="测试一下"></div>
<script>
// 自定义属性
// 获取元素
const box = document.querySelector('.box')
// 获取自定义属性
console.log(box.dataset.id)
console.log(box.dataset.name)
console.log(box.dataset['name'])
console.log(box.dataset)
// 如果多个短横线连接,data- 后面的要变成小驼峰
console.log(box.dataset.testDemo)
// 自定义属性 ==> h5新增的,以data-开头的都叫做自定义属性,可以用来存一些数据
// 使用 : ==> dom.dataset.xxx / dom.dataset['xxx']
// dom.dataset是一个对象,存储了所有以data-开头的自定义属性
</script>
4. 定时器 setInterval
4.1 基础用法
javascript
// setInterval(fn, wait)
// 第一个参数 fn函数
// 第二个参数 wait 单位是ms 毫秒
// 作用:每隔一段时间(wait),就会调用fn函数,会一直重复执行
// window.setInterval() ==> 我们可以省略window
// 写法:
// 1. 直接把函数写道setInterval里面
// setInterval(function(){
// console.log('全世界最美的班班')
// }, 1000)
// 2. 先定义一个函数
// 定义函数有两种方式
// 2.1 声明式
// function fn(){
// console.log('大家饿了吗')
// }
// setInterval(fn, 2000)
// 2.2 表达式
const cb = function(){
console.log('好好学习,天天向上,键盘敲烂,月薪过万')
}
// setInterval(cb, 1000)
// 3. 注意,函数名后面一定不要写小括号,写小括号表示调用。
// 但是我们定时器里面的函数并不是立即执行的
// 挨锤的写法,看见谁这么写,默默的给他一个鄙视的眼神~~
// setInterval('cb()', 1000)
4.2 关掉定时器
clearInterval(timerId)
javascript
// 关闭定时器 clearInterval(timerId)
// 定时器函数调用之后,有一个返回值,返回值是一个数字,我们可以用一个变量来接受它
// 定时器的返回值,我们一般用let接收
let timer1 = setInterval(cb, 1000)
console.log(timer1)
console.log(typeof timer1)
let timer2 = setInterval(cb, 2000)
console.log(timer2)
clearInterval(timer1)
// ==> 为什么建议用let存定时器的返回值id
// const声明的变量,不能被修改
const num = 10
num = 20
const bar = function(){
console.log('测试')
}
// 1. 开启定时器
let n = setInterval(bar, 1000)
// 2. 满足某些条件时,关掉定时器
clearInterval(n)
// 3. 满足某些条件后,又开启定时器
n = setInterval(bar, 1000)
5. 数据类型
javascript
// 1.
// 基本数据类型 7个
// Number String Boolean / null undefined / ( Symbol BigInt )
// 引用类型
// Object
// Function / Array / Date / Error / RegExp
// 2. 检测数据类型的方式
// 2.1 typeof 主要检测基本数据类型
console.log(typeof null) // object 这是一个bug
console.log(typeof '123') // string
console.log(typeof 123) // number
console.log(typeof undefined) // undefined
console.log(typeof true) // boolean
console.log(typeof [1,2,3]) // object
// 2.2 检测引用类型 A instanceof B 返回true或者false
console.log([1,2,3] instanceof Array) // true
console.log(function(){} instanceof Function) // true
console.log({} instanceof Object) // true
// 2.3 检测数据类型最完美的方式
// Object.prototype.toString.call()
console.log(Object.prototype.toString.call(123))
console.log(Object.prototype.toString.call(null))
console.log(Object.prototype.toString.call([123,123]))