目录
文档树：浏览器在加载html文件时，会把文档、文档中的标签、属性、文本、注释转换成对象，然后按照标签的关系（父子、兄弟、祖孙）以树状结构存储到内存中。
一、DOM的概念
概念：文档对象模型。
文档：html文件
对象：属性和方法 obj={name:'',sayHi:function(){}}
模型：（树）
文档树：浏览器在加载html文件时，会把文档、文档中的标签、属性、文本、注释转换成对象，然后按照标签的关系（父子、兄弟、祖孙）以树状结构存储到内存中。
文档树中的对象，也被称为节点对象 。
节点对象的分类：==文档（document）== 、==元素（标签转换的对象）== 、文本、属性、注释
二、学DOM要干什么
操作页面元素
获取，注册事件，操作
获取元素【DOM提供方法】
给元素注册事件
操作元素的属性
动态操作元素（创建、追加、删除、克隆等）
三、获取元素
1.根据id值获取单个元素：
语法： ==document.getElementById('id值');
<button id="btn">按钮1</button>
<button id="btn">按钮2</button>
<script>
// 根据id获取单个元素，返回一个元素
var btn = document.getElementById('btn');
// dir可以打印出对象中的属性和方法
console.dir(btn);
console.log(btn);
// 细节：若页面上有相同的id值的标签时，在获取时，获取的是id值第一次出现的标签。
</script>2.根据标签名获取一组元素
语法：==document.getElementsByTagName('标签名');
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<script>
// 需求：获取所有按钮
// 根据标签名获取一组元素，返回的是一个伪数组
var btns = document.getElementsByTagName('button');
console.log(btns);
// 数组和伪数组的区别？
// 相同：都有索引和长度（length）
// 不同点：伪数组不能够调用真正数组中内置的方法（push、pop、sort...）
</script>3.根据选择器获取单个元素
语法：document.querySelector('选择器');
4.根据选择器获取一组元素
语法：document.querySelectorAll('选择器');
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
<script>
// 根据选择器获取当个元素，若有多个同样选择器的标签，获取的将会是第一次出现的标签
var btn = document.querySelector('.btn');
console.log(btn);
// 根据选择器获取一组元素
var btns = document.querySelectorAll('.btn');
console.log(btns);
</script>获取元素：
id获取元素：document.getElementById('id的值');
tagName获取元素：var obj = document.getElementsByTagName('div');
选择器：
获取单个：document.querySelector('选择器');
获取一组：document.querySelectorAll('选择器');
注册事件：事件源.事件类型 = 函数
5.案例：
1. 根据id值获取按钮
2. 根据标签名获取一组li
3. 缩小范围获取元素
<div></div>
<ul>
<li>1</li>
<li>2</li>
<li>3
<!-- <a href='#'>1234</a> -->
</li>
<li>4</li>
</ul>
<button id ='button'>按钮</button>
<script>
var li=document.getElementsByTagName('li')
console.log(li);
var a=document.querySelector('ul>li>a')
a.onclick=function(){
console.log((this));
alert('您牛掰')
}
console.log(a);
var but=document.querySelector('button');
but.onclick=function(){
alert('您好');
}二、事件基础
1.什么是事件
用户做的动作就是事件
用户和网页之间的交互行为（鼠标点击、鼠标进入、鼠标离开、键盘按下、键盘弹起、手指按压、手指移动等等）
2.事件三要素
事件源：被触发的元素，比如点击的按钮
事件类型：如何触发的事件，比如==点击==按钮 onclick
事件处理程序：事件发生后的结果。
节点元素获取
4.给元素注册事件
语法：事件源.事件类型 = 事件处理程序;
事件源→ 触发的那个元素
事件类型→ 点击 onclick
事件处理程序→ 函数
作用：获取元素，元素添加事件
// 获取按钮元素
var btn = document.getElementById('btn');
btn.onclick = function(){
// 函数体中的代码，就是事件发生后要执行的程序
alert('燃烧我的卡路里');
};
// 事件处理程序的本质是什么？
// ① onclick本质上就是事件源这个对象中的某一个键值对而已。默认值是null，表示没有注册事件
// ② 给事件源注册onclick事件，其实本质上就是给onclick赋值函数，所以onclick是事件源的一个方法而已
// ③ 点击按钮时，浏览器自动调用了btn.onclick();三、取消a标签默认行为
方式1：事件处理程序中最后设置return false;
<a id="link" href="https://www.baidu.com">点击</a>
<script>
var link = document.getElementById('link');
link.onclick = function(){
alert('你好');
// 方式1：取消a点击后的默认跳转行为 return false;
return false;
};
</script>方式2：设置a标签的href属性值为：javascript:
<!-- 方式二：给a标签的herf值设置javascript: ,表示将来点击a时，会阻止默认跳转行为，并且仅仅会执行js代码-->
<a href="javascript:">点击2</a> <a href="javascript:js_method();"></a>
<!-- 扩展：通过a可以打开打电话应用 -->
<a href="tel:">打电话</a>
<!-- 扩展：通过a可以打开电子邮件应用 -->
<a href="mailto:">打开邮件</a>四、操作元素的属性
setAttribute() 设置属性及属性值
setAttribute('属性','属性值')
getAttribute() 获取属性值
getAttribute('属性','属性值')
innerText和innerHTML的区别
<div id="box"><h2>我是div中的标题</h2></div>
<script>
// 1. 获取div元素
var div = document.getElementById('box');
console.dir(div);
// 【获取】
// ① 通过innerText获取,仅仅包含文本
console.log(div.innerText);
// ② 通过innerHTML获取，若有子标签时，会包含文本和子标签
console.log(div.innerHTML);
// 【设置】
// ① 通过innerText设置,若设置中包含了子标签，该标签不会被渲染而是当做普通文本显示
// div.innerText = '<a href="#">我是div中的超链接</a>';
// ② 通过innerHTML设置,若设置中包含了子标签，该标签会被渲染显示
div.innerHTML= '<a href="#">我是div中的超链接</a>';
</script>通过style属性设置样式
<div>111</div>
<script>
var div = document.querySelector('div');
div.style.width = '300px';
div.style.height = '300px';
// background-color → backgroundColor
div.style.backgroundColor = 'red';
// div.style.fontSize = '50px';
div.style.font = 'bold 50px "宋体"';
// 若操作少量的样式时，适合用style属性操作
</script>通过className设置样式
<style>
.a {
width: 300px;
height: 300px;
background-color: red;
font:bold 50px '宋体';
}
.b {
width: 500px;
height: 500px;
background: purple;
}
</style>
<div>111</div>
<script>
var div = document.querySelector('div');
div.className = 'b';
// 若操作多个样式属性时，用className管理比较合适
</script>
value 操作表单元素的内容
获取：==元素.value;== 返回字符串
设置：==元素.value = 值;==
disabled 操作表单元素是否禁用
获取：==元素.disabled;== 返回布尔值（true→禁用，false→不禁用）;
设置：==元素.disabled = 布尔值;==
checked 操作表单元素是否选中
获取：==元素.checked;== 返回布尔值（true→选中，false→不选中）;
设置：==元素.checked = 布尔值;==
selected 操作表单元素的是否选中
获取： ==元素.selected;==
设置：==元素.selected = 布尔值;==
自定义属性行内属性
标签内所能操作的属性：
系统支持的：href、title、src....，可以通过元素直接调用
自定义标签属性：bigSrc，不可以通过元素直接点的方式调用
往标签上自定义的属性，一定不可以直接用【元素.属性】的方式用
获取
语法：元素.getAttribute(name);
name:属性名
设置
语法：元素.setAttribute(name,value);
移除
语法：元素.removeAttribute(name,value);
五、节点
节点的nodeType、nodeName、nodeValue的属性
节点的nodeType（节点类型）属性的作用：元素→ 1；属性—>2 文本→3 -- 利用for循环配合childNodes筛选
节点的nodeName（节点名称）属性的作用：元素→ 大写的标签名 文本→
#text节点的nodeValue（节点值）属性的作用：元素→ null 文本→ 文本的内容
1.节点获取情况
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
<li>369</li>
</ul>
<script>
//获取节点第一个元素和最后一个元素
var ul=document.querySelector('ul')
// 1.第一个节点不管是文本节点还是元素节点
console.log(ul.firstChild); //#text
console.log(ul.lastChild);
// 2.返回第一个元素节点
console.log(ul.firstElementChild);
console.log(ul.lastElementChild);
// 3.开发常用写法，没有兼容性问题并且返回第一个元素
console.log(ul.children[0]);
console.log(ul.children[3]);
</script>2.节点的添加和删除节点
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<script>
//创建新的节点元素节点
var li=document.createElement('li');
//添加节点(添加在最后)
var ul=document.querySelector('ul');
ul.appendChild(li)
//添加节点（指定在某个元素之前）
var li2=document.createElement('li');
ul.insertBefore(li2,ul.children[1])
//删除节点元素
ul.removeChild(ul.children[2])
</script>插入元素
-
语法：父节点.insertBefore(新的节点,旧的子节点)
替换元素
-
语法：父节点.replaceChild(新的节点,旧的子节点) 注意节点类型要 事先获取到或创建出来
克隆元素
-
语法：元素.cloneNode(true或false); 返回一份新的克隆后的元素 false为浅拷贝
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
</body>
<script>
var ul = document.querySelector('ul')
//复制节点， false为浅拷贝
var li2=ul.children[1].cloneNode(true)
//复制后，添加
ul.appendChild(li2);
// 替换 父节点.replaceChild(新的节点,旧的子节点)
ul.replaceChild(li2,ul.children[2])
// ul.insertBefore(li2,ul.children[1])
<、script>
2079
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
