# DOM 简介

# 概念

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐得处理可扩展标记语言（HTML 或者 XML）得标准编程接口

W3C 已经定义了一系列得 DOM 接口，通过这些 DOM 接口可以改变网页得内容，结构，样式

# DOM 树

文档：一个页面就是一个文档，DOM 中使用 document 表示’
元素：页面中得所有标签都是元素，DOM 中使用 element 表示
节点：网页中得所有内容都是节点（标签，属性，文本，注释等），DOM 中用 node 表示

# 获取元素

# 如何获取元素

根据 ID 获取
根据标签名获取
通过 HTML5 新增方法获取
特殊元素获取

# 根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 得元素对象

	<div id="time">2022-10-4</div>
	<script>
	var element = document.getElementById('time');
	console.log(element); // 返回对象
	console.dir(element); // 返回属性和方法信息
	</script>

# 根据标签名获取

使用 getElementByTagName () 方法可以返回带有指定标签名得对象得集合

	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	</ul>
	<script>
	var lis = document.getElementsByTagName('li');
	console.log(lis);
	for (var i = 0; i < lis.length; i++) {
	console.log(lis[i]);
	}
	</script>

因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
得到元素是动态的

还可以获取某个元素内部的所有指定标签名的子元素

	<ul id="ul">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	</ul>
	<script>
	var ul = document.getElementById('ul');
	console.log(ul.getElementsByTagName('li'));
	</script>

注意：父元素必须是单个对象（必须指定是哪一个元素对象），获取的时候不包括父元素自己

# 通过 HTML5 新增方法获取

# 根据类名返回元素对象集合

	<div class="box">box1</div>
	<div class="box">box2</div>
	<script>
	var boxs = document.getElementsByClassName('box');
	console.log(boxs);
	</script>

# 根据任意选择器选择第一个元素返回

	<div class="box">box1</div>
	<div class="box">box2</div>
	<script>
	var box = document.querySelector('.box'); // 类：. 类名 id：#id 值标签：标签名
	console.log(box);
	</script>

# 根据任意选择器选择全部

	<div class="box">box1</div>
	<div class="box">box2</div>
	<script>
	var boxs = document.querySelectorAll('.box');
	console.log(boxs);
	</script>

# 获取 body 和 html

# 获取 body 元素

	<script>
	var bodyEle = document.body;
	console.log(bodyEle);
	</script>

# 获取 html 元素

	<script>
	var htmlEle = document.documentElement;
	console.log(htmlEle);
	</script>

# 事件基础

# 事件概述

JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为

网页中的元素可以产生某些触发 JavaScript 的事件，例如我们可以在用户点击某按钮时产生的一个事件，然后去执行某些操作

	<button id="btn">请点击</button>
	<script>
	var btn = document.getElementById('btn'); // 事件对象
	btn.onclick = function () { // 事件类型点击
	alert('点到了'); // 事件处理程序 function
	}
	</script>

# 事件三要素

事件源
事件类型
事件处理程序

# 执行事件步骤

获取事件源
注册事件
添加事件绑定处理程序

# 操作元素

# 修改元素内容

	<button id="btn">显示当前时间</button>
	<div>当前时间</div>
	<script>
	var btn = document.getElementById('btn');
	var div = document.querySelector('div');
	btn.onclick = function () {
	div.innerText = new Date();
	}
	</script>

# innerText

	element.innerText
	//从起始位置到终止位置的内容，但它取出html标签，同时空格和换行也去掉

# innerHTML

	element.innerHTML
	// 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行

# 修改元素属性

	<button id="ldh">刘德华</button>
	<button id="zxy">张学友</button>
	<img src="images/ldh.jpg" alt="" title="刘德华">
	<script>
	var ldh = document.getElementById('ldh');
	var zxy = document.getElementById('zxy');
	var img = document.querySelector('img');
	zxy.onclick = function () {
	img.src = 'images/zxy.jpg';
	img.title = '张学友';
	}
	ldh.onclick = function () {
	img.src = 'images/ldh.jpg';
	img.title = '刘德华';
	}
	</script>

# 表单元素的属性修改

	<button>按钮</button>
	<input type="text" value="请输入内容">
	<script>
	var btn = document.querySelector('button');
	var input = document.querySelector('input');
	btn.onclick = function () {
	input.value = '输入成功';
	btn.disabled = 'true';
	}
	</script>

# 样式属性操作

我们可以通过 JS 修改元素的大小，颜色，位置等样式

element.style    // 悍内样式操作

JS 里面的样式采取驼峰命名法，比如 fontSize,backgroundColor
JS 修改 style 样式操作，产生的是行内样式，css 权重比较高

element.className    // 类名样式操作

如果样式修改比较多，可以采取操作类名方式更改元素样式
class 因为是个保留字，因此使用 className 来操作元素类名属性
className 会直接更改元素的类名，会覆盖原先的类名

# 排他思想

	<button>1</button><button>2</button><button>3</button><button>4</button><button>5</button>
	<script>
	var btns = document.getElementsByTagName('button');
	for (var i = 0; i < btns.length; i++) {
	btns[i].onclick = function () {
	for (var i = 0; i < btns.length; i++) {
	btns[i].style.backgroundColor = '';
	}
	this.style.backgroundColor = 'pink';
	}
	}
	</script>

# 自定义属性的操作

# 获取属性值

element. 属性：获取属性值
element.getAttribute (' 属性 ')

	<div id="demo" index="1"></div>
	<script>
	var div = document.querySelector('div');
	console.log(div.id); //demo
	console.log(div.getAttribute('index')); //1
	</script>

# 区别

element. 属性：获取内置属性值（元素自身自带的属性）
element.getAttribute（‘属性’）；主要获取自定义属性，程序员自定义的属性

# 设置属性值

element. 属性 = ' 值 ' 设置内置属性值
element.setAttribute（' 属性 '，' 值 '）

	<div id="demo" index="1"></div>
	<script>
	var div = document.querySelector('div');
	div.id = 'ok';
	div.setAttribute('index',2);
	</script>

# H5 自定义属性

自定义属性目的：是为了保存并使用数据，有些数据可以保存到页面中而不用存到数据库中

# 设置 H5 自定义属性

规定自定义属性 date - 开头作为属性名并赋值

例如： <div date-index="1"></div>

# 获取 H5 自定义属性

兼容性获取 element.getAttribute ('data-index');
H5 新增 element.dataset.index 或者 element.dateset ['index'] ie 11 才开始支持

# 节点操作

# 为什么学节点操作

获取元素

# 节点概述

网页里面所有的内容都是节点（标签，属性，文本，注释），在 DOM 中，节点 node 表示
节点的三个基本属性：节点类型 nodeType，节点名称 nodeName，节点值 nodeValue
节点类型：
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 （文本节点包含文字，空格，换行）

# 节点层级（父子兄层级关系）

# 父级节点

node.parentNode

parentNode 属性可返回某节点的父节点，注意是最近的一个父节点
如果指定节点没有父节点返回 null

# 子级节点

	parentNode.childNodes // 所有的子节点包含元素节点，文本节点等等
	parentNode.children // 所有的元素节点重点使用！！！
	parentNode.firstChild // 返回第一个子节点不是元素节点
	parentNode.lastChild // 返回最后一个子节点不是元素节点
	parentNode.firstElementCjhild // 返回第一个子元素节点
	parentNode.lastElementChild // 返回最后一个子元素节点
	parentNode.children[0] // 实际开发中常用获取第一个子元素
	parentNode.children[parentNode.children.length - 1] // 获取最后一个子元素

# 兄弟节点

	node.nextSibling; // 返回下一个兄弟节点，包含文本节点
	node.previousSibling; // 返回上一个兄弟节点，包含文本节点
	node.nextElementSibling // 返回下一个（兄弟）元素节点
	node.previousElementSibling; // 返回上一个（兄弟）元素节点

# 创建节点

	document.createElement('tagElement');
	/*
	document.createElement () 方法创建由 tagName 指定的 HTML 元素，因为这些元素原来不存在
	是根据我们的需求自动生成，所以我们称为动态创建节点
	*/

# 添加节点

	node.appendChild(child) // 在后面追加元素
	node.insertBefore(child,指定元素); // 指定元素前面追加

node.appendChild() 方法将一个节点添加到指定父节点列表末尾，类似于 css 中的伪元素

# 删除节点

	node.removeChild(child)；
	ul.removeChild(ul.children[0]);

node.removeChild() 方法时从 DOM 中删除一个子节点，返回删除的节点

# 复制节点（克隆节点）

node.cloneNode();

node.cloneNode() 方法返回调用该方法的节点的一个副本，也称为克隆拷贝节点

	<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	</ul>

	<script>
	var ul = document.querySelector('ul');
	//var copyli = ul.children [0].cloneNode (); //cloneNode () 里面为空或者 false 为浅度拷贝，不拷贝内容
	var copyli = ul.children[0].cloneNode(true); //cloneNode () 里面为 ture 为深度拷贝，拷贝内容
	ul.appendChild(copyli);
	</script>

# 三种动态创建元素的区别

document.write()
element.innerHTML
document.createElement()

区别

document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，它会导致页面重绘
innerHTML 是将内容写入某个 DOM 节点，不会导致页面全部重绘
innerHTML 创建多个元素效率更高（不要拼接字符串，采用数组形式拼接），结构稍微复杂
createElement() 创建多个元素效率稍微低一点点，但是结构更清晰

JavaScript