js-webApi笔记1
目录
前言
Web API的概念
什么是DOM
DOM树
1、查找元素
2、其他查找元素方法
3、操作元素
4、操作元素属性
5、 操作元素样式 style
6、操作自定义属性
7、 操作表单元素属性
8、事件
9、事件绑定
10、常用鼠标事件
11、定时器
12、定时器案例
前言
Web API的概念
Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
什么是DOM
文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。
DOM树
DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
-
文档：一个页面就是一个文档，DOM中使用document表示
-
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示
-
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示
1、查找元素
document.querySelector( 'css选择器' )
document.querySelectorAll( 'css选择器' )
document.querySelector( 'css选择器' )
返回满足条件的第一个元素（dom元素对象），找不到返回null
第一个div
我是一个盒子
- 第一个li
- 第2个li
- 第3个li
- 第4个li
我是P
const div=document.querySelector('div')
console.log(typeof div)//object
console.dir(div)//展开
const box=document.querySelector('.box')
console.log(box)
const firstLi=document.querySelector('ul li')
console.log(firstLi)document.querySelectorAll( 'css选择器' )
返回满足条件的所有元素
返回的结果是一个伪数组（有length，有序号），但是不能调用数组的方法，如push，pop...
对象{0:第一个div对象,1:第二个div,length: 2}
- 第一个li
- 第2个li
- 第3个li
- 第4个li
const lis=document.querySelectorAll('li')
console.log(lis)不能调用数组的方法，会报错
// lis.push(100)//报错获取具体的元素，用document.querySelectorAll( 'css选择器' ） 获取的元素，即使只有一个，也必须按数组下标的方式来获取具体的元素
//获取具体的元素
console.log(lis[0])
console.log(lis[2])
const p=document.querySelectorAll('p')
console.log(p)
console.log(p[0])2、其他查找元素方法
1.根据id值查找
document.getElementById( 'id的值' )2.根据标签名查找
document. getElementsByTagName( )3.根据class查找
document.getElementsByClassName( )4.根据name查找
document.getElementsByName( )
这是第一个div
- 111
- 北京
- 上海
- 广州
这是第二个div
lalala
3、操作元素
操作元素，首先要获取元素，然后用 元素名.innerText 或 元素名.innerHTML去操作元素的内容
可以进行的操作有修改文本内容，删除文本内容
其中：
innerText 可以获取元素内容，可以改变元素内容，无法识别标签，无法识别换行
innerHTML 可以获取元素内容，可以改变元素内容，可以识别标签，可以识别换行
学好js,高薪在望
- HTML5
- CSS3
- JS
4、操作元素属性
操作元素属性:
修改/设置元素属性
5、 操作元素样式 style
通过style操作样式:
使用style修改样式: 元素.style.样式属性=属性值
通过style修改的样式是添加在行内样式里面(不建议使用，因为权重比较高)
属性要写成驼峰命名（单词连接需要首字母大写）
通过className设置元素样式（其实就是给元素添加class类名） 元素.className='类名'
如果元素本身有class类名时又不想丢失 就需要在设置类名时把原本的类名也写上 div.className='boxs box'
box
6、操作自定义属性
获取元素
// 1 获取元素
const box = document.querySelector('.box')
console.dir(box.className) // 原生属性 元素.原生属性名
console.log(box.id)元素.getAttribute('属性名') 获取元素属性名
// 元素.getAttribute('属性名') 获取元素属性名
console.dir(box.getAttribute('a'))
console.dir(box.getAttribute('id'))元素.setAttribute('属性名',值) 设置元素属性
// 元素.setAttribute('属性名',值) 设置元素属性
box.setAttribute('a', 10)针对data-开头的自定义属性名
// 针对data-开头的自定义属性名
console.log(box.getAttribute('data-num'))
box.setAttribute('data-num', 'abc')
console.log(box.dataset.num) // {num: "10", msg: 'hello'}
console.log(box.dataset.msg)添加一个属性data-info
box.dataset.info = 1237、 操作表单元素属性
唱歌获取文本框
const txt = document.querySelector('input[name="username"]')
console.log(txt.value)
// txt.value = '456' // 修改
txt.value = '' // 清空
txt.type = 'password'禁用按钮
const btn = document.querySelector('button')
btn.disabled = true // true 禁用设置复选框状态
const cbox = document.querySelector('input[type="checkbox"]')
// cbox.checked = 'true' // 有隐式转换 字符串'true'->true 不推荐这么使用
cbox.checked = true8、事件
js dom事件单击
用户对dom元素（比如按钮，div,span...)进行某种操作行为(单击、双击、鼠标移入,...键盘按下)，页面会做出响应。
事件三要素：1.事件源（谁身上发生了）
2.事件名称（具体行为）
3.事件处理逻辑(当事件行为发生后,导致什么结果)
js处理事件 事件源.事件名称·=·function() { }
1.获取事件源
const btn = document.querySelector('button')
const arr = ['./1.webp', './2.webp', './3.webp']
const oImg = document.querySelector('img')
2.绑定事件（注册事件）
// 2 绑定事件(注册事件)
btn.onclick = function () {
// alert('被点击了!!!')
// 随机产生一张图片
const index = getRndNum(0, arr.length - 1)
oImg.src = arr[index]
}9、事件绑定
1 获取事件源
const btn = document.querySelector('button')2 绑定事件
btn.onclick = function () {
alert('秋香')
}DOM 0 级 事件绑定 会覆盖之前同名事件
DOM 2 级 可以对同一事件绑定多次，以后会依次执行
元素.addEventListener( '事件名称'，事件处理程序)
btn.addEventListener('click', function () {
alert('秋香')
})
btn.addEventListener('click', function () {
alert('秋香123')
})10、常用鼠标事件
click 鼠标单击
mouseenter 鼠标移入
mouseleave 鼠标离开
dblclick 鼠标双击
// DOM 0
// 1 获取事件源
const btn = document.querySelector('button')
// 2 绑定事件
// DOM 2级 可以对同一事件绑定多次，以后会依次执行
/*
元素.addEventListener('事件名称', 事件处理程序)
*/
btn.addEventListener('click', function () {
alert('秋香')
})
// btn.addEventListener('mouseenter', function () {
// alert('鼠标移入')
// })
// btn.addEventListener('mouseleave', function () {
// alert('鼠标移出')
// })
// 双击
// btn.addEventListener('dblclick', function () {
// console.log('双击')
// })11、定时器
定时器----间歇函数
有的 代码逻辑需要隔一段时间执行一次setInterval( function ( ) {. . .} ,1000)
开启定时器 setInterval( )
取消定时器 clearInterval( )
// 定时器-间歇函数 // 有的代码逻辑需要隔一段时间执行一次
// setInterval(function() { ...},1000)
function repeat() {
console.log('每隔1s执行一次')
}
const timer = setInterval(repeat, 1000)
const timer2 = setInterval(repeat, 1000)
console.log(timer, timer2) // 数字
// 给按钮绑定事件
document.querySelector('button').addEventListener('click', function () {
// 取消定时器
clearInterval(timer)
clearInterval(timer2)
})12、定时器案例
发送短信倒计时
Document
5秒关闭广告
Document
