作用和分类
- 作用：可以使用js去操作HTML和游览器
- 分类：DOM（文档对象模型）、BOM（游览器对象模型）
示意图：
DOM文档对象模型
定义：DOM（Document Object Model——文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API
简而言之：DOM是游览器提供的一套专门用来操作网页内容的功能
DOM作用
操作网页内容特效和实现用户交互
DOM树
- 讲HTML文档以树状结构直观的表现出来，称之为文档树或DOM树
- 描述网页内容关系的名词
- 作用：文档树直观的体现了标签与标签之间的关系
示意图：
结构：
<!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>
</head>
<body>
文本
<div>块</div>
<a href="#">链接</a>
<p>文本框</p>
</body>
</html>
DOM对象*
-
DOM对象：游览器根据html标签生成的js对象
- 所有的标签属性都可以在这个对象上找到
- 修改之歌对象的属性会自动映射到标签身上
-
DOM的核心思想
- 把网页内容当做对象使用
-
document对象
- 是DOM里提供的一个对象
- 所以它提供的属性和方法都是用来访问和操作网页内容的
-
例：document.write（） - 网页的所有内容都在document里面
获取DOM对象
根据css选择器获取DOM元素*
语法：
document.querySelectorAll('css选择器')
获取一个DOM元素：
document.querySelector()
参数：
包含一个或多个有效的css选择器字符串
document.querySelector('p')//获取第一个p标签
document.querySelector('.myclass')//获取类名为.myclass的第一个标签
document.querySelector('#myId')//获取ID为#myId的元素
返回值：
css选择器匹配的NodeList对象集合
例：document.querySelectorAll('ul li')
用document.querySelectorAll('css选择器')
得到的是一个伪数组
- 有长度（length）有索引的数组
- 但没有数组方法如pop（）、push（）
想要得到里面的每一个对象，则需要遍历（如 for）的方式获得
其他获取DOM元素的方法（旧）
//根据id获取
document.getElementById('nav')
// 根据标签获取一类元素
document.getElementsByTagName('div')
// 根据类名获取元素
document.getElementsByClassName('nav')
修改DOM元素
- document.write() 方法
- 对象.innerText 属性
- 对象.innerHTML 属性
document.write() 方法
- 只能将文本内容追加到 前面的位置
- 文本中包含的标签会被解析
document.write('str')
document.write('<h3>str</h3>')
对象.innerText 属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签不会被解析
document.querySelector('ul').innerText = '<li>我的首页</li>'
对象.innerHTML 属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签会被解析
document.querySelector('ul').innerHTML = '<li>我的首页</li>'
案例：随机抽取的名字显示到指定的标签内部
抽中的选手：<span></span>
<script>
//名册
let name = ['飞哥', '谷歌', '胡歌', '胡哥']
//总人数下生成随机数
let ran = parseInt(Math.random() * name.length)
//幸运选手
let lick = name[ran]
//通过innerText将幸运选手写入元素内部
document.querySelector('span').innerText = lick
</script>
修改DOM元素属性
- 可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
- 最常见的属性比如： href、title、src 等
语法：
对象.属性 = 值
- 对象必须是dom元素
- 属性必须是内置属性
- 值必须是合理的值，如果有单位必须带单位，值是字符串必须加引号
let pic = document.querySelector('img')
pic.src = './images/b02.jpg'
pic.title = '这是一个图片'
案例：页面刷新，图片随机更换
<img src="" alt="">
<script>
//图片链接数组
let imgSrc = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg']
let ran = parseInt(Math.random() * imgSrc.length)
//获取img标签并把添加src属性
document.querySelector('img').src = imgSrc[ran]
</script>
修改元素样式属性
通过 JS 设置/修改标签元素的样式属性
如：
轮播图小圆点自动更换颜色样式
点击按钮可以滚动图片，这是移动的图片的位置 left 等等
方法：
- 通过 style 属性操作CSS
- 操作类名(className) 操作CSS
- 通过 classList 操作类控制CSS
通过 style 属性操作CSS
语法：
对象.style.样式属性 = 值
对象.style['样式属性'] = 值
例：
let box = document.querySelector('.box')
//修改背景颜色
box.style.backgroudColor = 'red'
//修改宽度
box.style.width = '300px'
//修改外边距
box.style.margin = '10px'
注意：
- 修改属性通过style引出
- 如果属性有 - 连接符，需要转换为小驼峰命名法。但采用对象.style['样式属性'] = 值不需要转换
- 赋值需要加上css单位
案例：当我们刷新页面，页面中的背景图片随机显示不同的图片
let imgSrc = ['./img/1.jpg', './img/2.jpg', './img/3.jpg', './img/4.jpg']
let bodyBackScr = imgSrc[ran]
console.log(bodyBackScr);
document.body.style.backgroundImage = `url(${bodyBackScr})`
操作类名修改css
语法：元素.className = “active”
注意：className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
通过classList操作类控制css
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
语法：
//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')
修改表单属性
语法：
表单.value = ‘用户名’
表单.type = ‘password’
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示 如果为true 代表添加了该属性 如果是false 代表移除了该属性 比如： disabled、checked、selected
