zxd's Blog

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]))

1. DOM ​

1.1 基本概念 ​

1.2 什么是DOM ​

1.3 如何获取DOM对象 ​

1.3.1 匹配指定的第一个元素 ​

1.3.2 获取多个dom对象 ​

1.3.3 伪数组 ​

1.3.4 其他方式 ​

2. 操作元素内容 ​

3. 操作元素属性 ​

3.1 元素常用属性 ​

3.2 元素样式属性 ​

3.3 表单元素属性 ​

3.4 自定义属性 ​

4. 定时器 setInterval ​

4.1 基础用法 ​

4.2 关掉定时器 ​

5. 数据类型 ​

1. DOM

1.1 基本概念

1.2 什么是DOM

1.3 如何获取DOM对象

1.3.1 匹配指定的第一个元素

1.3.2 获取多个dom对象

1.3.3 伪数组

1.3.4 其他方式

2. 操作元素内容

3. 操作元素属性

3.1 元素常用属性

3.2 元素样式属性

3.3 表单元素属性

3.4 自定义属性

4. 定时器 setInterval

4.1 基础用法

4.2 关掉定时器

5. 数据类型