Web API是操作浏览器和文档的接口,分为两部分
- DOM: 操作文档的接口
graph TD
Start --> Stop
- BOM: 操作浏览器的接口
什么是DOM:
DOM是文档对象模型DOM（Document Object Model）是将整个 HTML 文档的每一个标签元素视为一个对象，这个对象下包含了许多的属性和方法，通过操作这些属性或者调用这些方法实现对 HTML 的动态更新，为实现网页特效以及用户交互提供技术支撑。
简言之 DOM 是 用来操作网页内容,可以开发网页内容特效和实现网页交互
DOM树
将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树，文档树直观的体现了标签与标签之间的关系。
DOM 节点
节点是文档树的组成部分，每一个节点都是一个 DOM 对象，主要分为元素节点、属性节点、文本节点等。
- 【元素节点】其实就是 HTML 标签，
head、div、body等都属于元素节点。 - 【属性节点】是指 HTML 标签中的属性，
a标签的href属性、div标签的class属性。 - 【文本节点】是指 HTML 标签的文字内容，如
title标签中的文字。
document
document 是 JavaScript 内置的专门用于 DOM 的对象，该对象包含了若干的属性和方法，document 是学习 DOM 的核心。
获取DOM元素
获取匹配的第一个元素
- querySelector 满足条件的第一个元素
语法 : querySelector('css选择器')
如下:
<body>
<div class="box">
</div>
<script>
const div = document.querySelector('.box')
console.log(div) //<div class="box"></div>
</script>
</body>
获取满足条件的全部元素,并返回成一个伪数组
-
querySelectorAll 满足条件的第一个元素
-
伪数组有数组的长度和下标,但是无法进行修改
语法 : querySelectorAll('css选择器')
如下:
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script>
const arr = document.querySelectorAll('div')
console.log(arr); //NodeList(5)
</script>
</body>
注意:
document.getElementById 专门获取元素类型节点，根据标签的
id属性查找
任意 DOM 对象都包含 nodeType 属性，用来检检测节点类型
其他获取方式:
//根据id获取第一个元素
document.getElementById('nav')
//根据标签获取一类元素,获取页面所以div
document.getElementsByTagName('div')
//更具类名获取元素,获取页面所以类名伪w的
document.getElementsByClassName('w')
注意:
- document.getElementById 专门获取元素类型节点，根据标签的
id属性查找 - 任意 DOM 对象都包含 nodeType 属性，用来检检测节点类型
操作元素内容
-
innerText,可以修改标签里面的内容,但是不可以解析标签.
-
innerHTML,可以修改标签里面的内容,可以解析标签.
如下:
<div class="nav">万叶</div>
<div class="foot">钟离</div>
<script>
//获取元素
const nav = document.querySelector('.nav')
const foot = document.querySelector('.foot')
// 修改元素内容
nav.innerText = '公子'
//只识别文本
foot.innerHTML = '<div>凌人</div>'
//识别文本也会渲染标签
// 打印控制台
console.log(nav); //公子
console.log(foot); //<div>凌人</div>
</script>
</body>
注意:如果你不知道用哪个,优先使用innerHTML
修改常用元素属性
元素属性:
-
标签自己带的一种属性,比如img的src,a的hrdf等,叫固有属性
-
能够修改样式的叫样式属性
-
自己定义的属性叫自定义属性
修改固有属性:
<div id="box" title="盒子">123</div>
<script>
// 语法: 元素.属性 = 值
const div = document.querySelector('div')
div.title = 箱子 //title="456"
</script>
</body>
修改样式属性:
<div>123</div>
<script>
const div = document.querySelector('div')
// 元素.style.属性=值
div.style.color = 'red'
div.style.width = '20px'
div.style.height = '20px'
// 如果遇到符合属性, 把 - 删掉, 后面的首字母大写,也就是小驼峰命名法
div.style.fontSize = '12px'
</script>
</body>
注意:任何标签都有
style属性，通过style属性可以动态更改网页标签的样式,修改的样式是加到行内样式里面,优先级很高
修改类名操作
- className
- classList
- 操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
.box {
border: 1px solid red;
}
.box1 {
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="box"></div>
<script>
const div = document.querySelector('.box')
// 操作样式
// 通过给元素加类名达到修改样式
// 如果修改属性是class的时候.那么必须写成className
// className会覆盖以前的类名
div.className = 'c2'
</script>
注意:className会覆盖以前的类名
2.操作类名(classList) 操作CSS
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.active {
width: 300px;
height: 300px;
background-color: hotpink;
margin-left: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<script>
// 1.获取元素
// let box = document.querySelector('css选择器')
let box = document.querySelector('div')
// add是个方法 添加 追加
// box.classList.add('active')
// remove() 移除 类
// box.classList.remove('one')
// 切换类
box.classList.toggle('one')
</script>
</body>
</html>
操作表单元素属性
表单很多情况，也需要修改属性,本质是把表单类型转换为文本框
正常的有属性有取值的跟其他的标签属性没有任何区别
获取:DOM对象.属性名
设置:DOM对象.属性名= 新值
<body>
<input type="text" value="你好">
<button>按钮</button>
<script>
// 获取元素
const inp = document.querySelector('input')
inp.value
console.log(inp.value);
inp.value = '你好吗'
// 修改成密码框
inp.type = 'password'
// 获取按钮
const btn = document.querySelector('button')
// disabled 不可用 = false 这样可以让按钮启用
btn.disabled = true
</script>
</body>
自定义属性
自定义属性：
在html5中推出来了专门的data-自定义属性
在标签上一律以data-开头
在DOM对象上一律以dataset对象方式获取
<body>
<!-- 自定义属性一般是data-开头 -->
<div class="box" data-id="10086"></div>
<script>
// 获取元素
const box = document.querySelector('.box')
// 语法: 元素.dataset.xxx
//打印
console.log(box.dataset.id); //10086
// 修改属性
box.dataset.id = 10010
console.log(box.dataset.id);//10010
</script>
</body>
间歇函数
知道间歇函数的作用，利用间歇函数创建定时任务。
setInterval 是 JavaScript 中内置的函数，它的作用是间隔固定的时间自动重复执行另一个函数，也叫定时器函数。
<script>
// 创造定时器:反复性定时器
// 语法:setInterval(函数,时间)
//注意:
// 1.时间是以毫秒为单位
// 2. 每隔一段时间调用一次函数
const set = setInterval(function () {
console.log('你好');
}, 1000)
// 关闭定时器,清除定时器
// clearInterval(定时器标识或定时器的名字)
clearInterval(set)
console.log(set); //定时器标识只是个数字
</script>
