DOM
1. DOM简介
1.1 什么是DOM
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式
1.2 DOM树
- 文档：一个页面就是一个文档，DOM 中使用 document 表示
- 元素：页面中的
所有标签都是元素，DOM 中使用 element 表示 - 节点：网页中的
所有内容都是节点（标签、属性、文本、注释等），DOM 中使用node 表示
在这里插入图片描述
DOM把以上内容都看成对象
2 获取元素
2.1 根据id获取
document.getElementById()
<body>
<div id="time">2022-2-26</div>
<!-- 因为文档页面从上往下加载，所以得先有标签，所以script得写到标签下面 -->
<script>
var timer = document.getElementById('time');
console.log(timer); // <div id="time">2022-2-26</div>
console.log(typeof timer); // Object
console.dir(timer) //打印获取的元素对象，更好的查看对象里面的属性和方法
</script>
</body>
2.2 根据标签名获取
document.getElementsByTagName
例如获取所有的li标签元素
var list = document.getElementsByTagName('li');
如果要获取ul下面的li元素，可以
// 通过elment对象获取
var olList = document.getElementsByTagName('ol');
// 获取ol下面的li
var list2 = olList[0].getElementsByTagName('li');
2.3 通过 HTML5 新增的方法获取
- document.getElementsByClassName(‘类名’)；// 根据类名返回元素对象集合
- document.querySelector('选择器'); // 根据指定选择器返回第一个元素对象
- document.querySelectorAll('选择器'); // 根据指定选择器返回
例如
<body>
<div class="box">盒子</div>
<div class="box">盒子</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
document.getElementsByClassName('box'); // 获取到两个box
document.querySelectorAll('.box'); //获取到两个box
document.querySelector('.box'); // 获取第一个box
document.querySekector('#nav'); //获取id为nav的元素
</script>
</body>
2.4 获取特殊元素（body，html）
- document.documentElement // 返回html元素对象
- doucumnet.body // 返回body元素对象
3 事件基础
3.1 事件三要素
- 事件源 （谁）
- 事件类型 （什么事件）
- 事件处理程序 （做啥）
<body>
<button id="btn">点我</button>
<script>
// 事件源：button
var btn = document.getElementById('btn');
// 事件类型 onclick
// 事件处理程序 匿名函数
btn.onclick = function() {
alert('点轻点');
}
</script>
</body>
3.2 常见的鼠标事件
在这里插入图片描述
4 操作元素
JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。
4.1 改变元素内容
- element.innerText：读的时候去除html标签空格，只读文字，写的时候html标签当文字写
- element.innerHtml：读的时候不去除html标签空格，写的时候html标签格式写（推荐使用）
<body>
<div>
你好
<span>床前明月光</span>
</div>
<script>
var div = document.querySelector('div');
console.log(div.innerText);
div.innerText = "<strong>hello</strong>" // 插入的是<strong>hello</strong>
div.innerHTML = "<strong>hello</strong>"; //插入的是加粗的hello
console.log(div.innerHTML);
</script>
</body>
4.2 修改元素属性
常用元素的属性操作
src、href, id、alt、title
<body>
<button id="cat">猫</button>
<button id="dog">狗</button>
<img src="images/cat.jpg">
</body>
<script>
var cat = document.getElementById('cat');
var dog = document.getElementById('dog');
var imgSrc = document.querySelector('img');
cat.onclick = function() {
imgSrc.src = 'images/cat.jpg'
}
dog.onclick = function() {
imgSrc.src = 'images/dog.jpg'
}
</script>
4.3 表单元素的属性操作
可以通过dom操作如下元素
type、value、checked、selected、disabled
例子：实现密码隐藏显示效果
<style>
.box {
width: 400px;
border-bottom: 1px solid #ccc;
margin: 100px auto;
position: relative;
}
.box input {
width: 370px;
height: 30px;
border: none;
outline: none;
}
.box img {
width: 24px;
position: absolute;
top: 2px;
right: 2px;
}
</style>
<body>
<div class="box">
<label>
<img src="images/close.png" id="eye">
</label>
<input type="password" name="" id="password">
</div>
<script>
var eye = document.getElementById('eye');
var input = document.getElementById('password');
var flag = true;
eye.onclick = function() {
flag = !flag;
if(flag) {
eye.src = 'images/close.png';
input.type = 'password';
}else {
eye.src = 'images/open.png';
input.type = 'text';
}
}
</script>
</body>
4.4 样式属性操作
可以通过 JS 修改元素的大小、颜色、位置等样式。
如果样式修改比较少可以用 element.style ，如果修改样式比较多就用 element.className
4.4.1 element.style 行内样式操作
例子： 点击div时修改div背景色
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div></div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
// this指向函数调用者
this.style.backgroundColor = 'purple';
}
</script>
</body>
注意：
1.JS 里面的样式采取驼峰命名法 比如 fontSize、 backgroundColor
2.JS 修改 style 样式操作，产生的是行内样式，CSS 权重比较高
4.4.1 element.className 类名样式操作
className 会直接更改元素的类名，会覆盖原先的类名。
<style>
.change {
height: 400px;
width: 400px;
margin: 100px auto;
background-color: pink;
}
</style>
<body>
<div>文本</div>
<script>
var div = document.querySelector('div');
div.onclick = function() {
// 让当前元素类名改为change, 如果想要保留原来的类名， 可以用多类名选择 this.className = 'change first';
this.className = 'change'; //div.className = 'change';
}
</script>
</body>
4.5 样式操作总结
在这里插入图片描述
4.6 自定义属性的操作
4.6.1 获取属性值
- element.属性 获取内置属性值（元素本身自带的属性）
- element.getAttribute(‘属性’); 主要获得自定义的属性 （标准） 程序员自定义的属性
<body>
<div id="box" index="1"></div>
<script>
var div = document.getElementById('box');
console.log(div.id);
console.log(div.getAttribute('index'));
</script>
</body>
4.6.2 设置属性值
- element.属性 设置内置属性值
- element.setAttribute(‘属性’); 主要设置自定义的属性 （标准）
4.6.3 移除属性
element.removeAttribute('属性');
4.6.4 H5自定义属性
自定义属性获取是通过getAttribute(‘属性’) 获取。但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
H5给我们新增了自定义属性：
设置H5自定义属性
H5规定自定义属性data-开头做为属性名并且赋值。
比如<div data-index=“1”></div>或者使用 JS 设置element.setAttribute(‘data-index’, 2)获取H5自定义属性
兼容性获取
element.getAttribute(‘data-index’);H5新增
element.dataset.index, element.dataset[‘index’] ie 11才开始支持
5 节点操作
5.1 节点操作简介
5.1.1 为什么要学习节点操作
获取元素通常有两种方法
（1） 利用 DOM 提供的方法获取元素
- document.getElementById()
- document.getElementsByTagName()
- document.querySelector 等
- 逻辑性不强、繁琐
(2) 利用节点层级关系获取元素
- 利用父子兄节点关系获取元素
- 逻辑性强， 但是兼容性稍差
5.1.2 什么是节点
网页中的所有内容都是节点（标签、属性、文本、注释等），在DOM 中，节点使用 node 来表示。HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，所有 HTML 元素（节点）均可被修改，也可以创建或删除。
利用 DOM 树可以把节点划分为不同的层级关系，常见的是父子兄层级关系
在这里插入图片描述
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个
基本属性。
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 （文本节点包含文字、空格、换行等）
我们在实际开发中，节点操作主要操作的是元素节点
5.2 获取节点
5.2.1 父节点
node.parentNode
- parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
- 如果指定的节点没有父节点则返回 null
<body>
<div class="box">
<span>hello world</span>
</div>
<script>
var message = document.querySelector('span');
console.log(message.parentNode);
</script>
</body>
5.2.2 子节点
5.2.2.1 node.childNodes
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。如果只想要获得里面的元素节点，则需要专门处理。 所以一般不提倡使用childNodes
<script>
var box = document.querySelector('.box');
var childNodes = box.childNodes;
for(let i = 0;i < childNodes.length; i++) {
if(childNodes[i].nodeType == 1) {
console.log(childNodes[i]);
}
}
</script>
5.2.2.2 parentNode.children（非标准）
parentNode.children 是一个只读属性，返回所有的子元素节点。它只返回子元素节点，其余节点不返
回 （这个是重点掌握的）。虽然children 是一个非标准，但是得到了各个浏览器的支持，因此可以放心使用
5.2.2.3 第一个和最后一个子节点
- parentNode.firstChild firstChild 返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
- parentNode.lastChild 返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点。
5.2.2.4 第一个和最后一个子元素节点
- parentNode.firstElementChild 返回第一个子元素节点，找不到则返回null
- parentNode.lastElementChild 返回最后一个子元素节点，找不到则返回null
注意：这两个方法有兼容性问题，IE9 以上才支持。
实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和
lastElementChild 又有兼容性问题，那么如何获取第一个子元素节点或最后一个子元素节点呢？
解决方案：
- 如果想要第一个子元素节点，可以使用 parentNode.chilren[0]
- 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]
5.2.3 兄弟节点
5.2.3.1 兄弟节点
- node.nextSibling 返回当前元素的下一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点
- node.previousSibling 返回当前元素上一个兄弟元素节点，找不到则返回null。同样，也是包含所有的节点
5.2.3.2 兄弟元素节点
- node.nextElementSibling 返回当前元素下一个兄弟元素节点，找不到则返回null
- node.previousElementSibling 返回当前元素上一个兄弟节点，找不到则返回null
注意：这两个方法有兼容性问题， IE9 以上才支持
5.3 创建和添加节点
- document.createElement('tagName') 创建节点
- node.appendChild(child) 将一个节点添加到指定父节点的子节点列表末尾
- node.insertBefore(child, 指定元素) 将一个节点添加到父节点的指定子节点前面
例子：
<body>
<ul>
<li>123</li>
</ul>
<script>
var ul = document.querySelector('ul');
// 创建li节点
var li = document.createElement('li');
// 添加li节点到ul末尾
ul.appendChild(li);
// 添加一个li第一个li的前面
var li2 = document.createElement('li');
ul.insertBefore(li2, ul.children[0]);
</script>
</body>
5.4 删除节点
node.removeChild(child)
5.5 复制节点(克隆节点)
node.cloneNode()
- 如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
- 如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点
先克隆，再插入
6 DOM总结
6.1 创建
- document.write
- innerHTML
- createElement
6.2 增
- appendChild
- insertBefore
6.3 删
- removeChild
6.4 改
主要修改dom的元素属性，dom元素的内容、属性, 表单的值等
- 修改元素属性： src、href、title等
- 修改普通元素内容： innerHTML 、innerText
- 修改表单元素：value、type、disabled等
- 修改元素样式： style、className
6.5 查
- DOM提供的API 方法： getElementById、getElementsByTagName 古老用法 不太推荐
- H5提供的新方法： querySelector、querySelectorAll 提倡
- 利用节点操作获取元素： 父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡
6.6 属性操作
主要针对于自定义属性。
- setAttribute：设置dom的属性值
- getAttribute：得到dom的属性值
- removeAttribute移除属性
6.7 事件操作
在这里插入图片描述
