目录
第一节：DOM树
又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
总结：
文档：一个页面就是一个文档，DOM中使用document表示。
节点：网页中的所有内容，在文档树中都是节点（标签、属性、文本、注释等），使用node表示。
标签节点：网页中的所有标签，通常称为元素节点，又简称为“元素”，使用element表示
DOM把以以上内容都看做成对象。
第二节：获取元素
我们想要操作页面上的某部分(显示/隐藏)，就要获取到该部分对应的元素，再对其进行操作。
2.2.1 根据ID获取
语法：document.getElementById(id)
作用：根据ID获取元素对象
参数：id值，区分大小写的字符串
返回值：元素对象 或 null
//html
<div id="time">2022-10-10</div>
<script>
// 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面
var timer = document.getElementById('time');
console.log(timer);
console.log(typeof timer);
// console.dir打印我们返回的元素对象 更好的查看里面的属性和方法
console.dir(timer);
</script>2.2.2 根据标签名获取元素
语法：document.getElementsByTagName('标签名') 或者 element.getElementsByTagName('标签名')
作用：根据标签名获取元素对象
参数：标签名
返回值：元素对象集合（伪数组，数组元素是元素对象）
//html
<ul>
<li>路遥知马力，日久见人心</li>
<li>路遥知马力，日久见人心</li>
<li>路遥知马力，日久见人心</li>
<li>路遥知马力，日久见人心</li>
<li>路遥知马力，日久见人心</li>
</ul>
<ul id="nav">
<li>超链接</li>
<li>超链接</li>
<li>超链接</li>
<li>超链接</li>
<li>超链接</li>
</ul>
<script>
// 1.返回的是 获取过来元素对象的集合 以伪数组的形式存储的
var lis = document.getElementsByTagName('li');
console.log(lis);
console.log(lis[0]);
// 2. 我们想要依次打印里面的元素对象我们可以采取遍历的方式
for (var i = 0; i < lis.length; i++) {
console.log(lis[i]);
}
// 3. element.getElementsByTagName() 可以得到这个元素里面的某些标签
var nav = document.getElementById('nav'); // 这个获得nav 元素
var navLis = nav.getElementsByTagName('li');
console.log(navLis);
</script>注意：
getElementsByTagName()获取到是动态集合，即：当页面增加了标签，这个集合中也就增加了元素。
2.2.3 根据类名获取元素集合
(Html5新增) getElementsByClassName(‘类名’) 根据类名获得某些元素集合。
document.getElementsByClassName(“box”);2.2.4 获取指定选择器第一个元素
(Html5新增) querySelector 返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 “.” “#”。
document.querySelector('.box');
document.querySelector('#box');
document.querySelector(‘li’);2.2.5 根据指定选择器返回所有元素
(Html5新增) querySelectorAll()返回指定选择器的所有元素对象集合。
document.querySelectorAll('.box');
document.querySelectorAll('li);第三节 获取特殊元素
document.body //返回body元素
document.documentElement //返回HTML元素-
：事件基础
JavaScript 使我们有能力创建动态页面，而事件是可以被 JavaScript 侦测到的行为。
简单理解：
网页中的每个元素都可以产生某些可以触发 JavaScript 的事件，例如，我们可以在用户点击某按钮时产生一个 事件，然后去执行某些操作。
第一节：事件的步骤
- 事件源：触发事件的元素（获取事件源）
- 事件类型： 例如 click 点击事件（绑定事件）
- 事件处理程序：事件触发后要执行的代码(函数形式)，事件处理函数
var btn = document.getElementById('btn');
btn.onclick = function() {
alert('鼠标单击事件');//鼠标点击事件
}第二节：常见的鼠标事件
onclick 鼠标点击左键触发
onmouseover 鼠标经过触发
onfocus 获得鼠标焦点触发
onblur 失去鼠标焦点触发
onmousemove 鼠标移动触发
onmouseup 鼠标弹起触发
onmousedown 鼠标按下触发第三节：操作元素
JavaScript的 DOM 操作可以改变网页内容、结构和样式。（注意：这些操作都是通过元素对象的属性实现的）。
3.3.1 操作元素内容
element.innerText 从起始位置到终止位置的内容，去除了html标签，空格换行也会去掉。
element.innerHtml 起始位置到终止位置的全部内容，包括了HTML标签，同时保留了空格与换行符。
<input type="button" name="onname" value="白日依山尽"/><br/><br/><br/>
<div>下一句</div>
<script>
var btn = document.querySelector('input');
var ele_div = document.querySelector('div');
btn.onclick = function(){
// ele_div.innerText = "日久见人心";
ele_div.innerHTML = "<span style='color:red;'>日久见人心</span>"; }
</script>3.3.2 常见的元素属性
innerText、innerHtml 改变元素内容
src、href、id、alt、title
<a href="http://www.baidu.com/">百度</a>
<input type="button" name="" value="改变链接地址" />
<script>
var btn = document.querySelector('input');
var objA = document.querySelector('a');
btn.onclick = function(){
objA.innerText = "QQ官网";
objA.href="http://www.qq.com/";
objA.title="点击去qq网站";
}
</script>3.3.3 表单元素的属性操作
表单属性：type、value、checked、selected、disabled
btn.value = "被点击啦";
btn.disabled = true;//按钮禁用
btn.type = "text";//改变input框的类型3.3.4 样式属性操作
element.style 行业样式操作
element.className 类名样式操作
<div>盒子</div>
<script>
var divObj = document.querySelector("div");
divObj.onclick = function(){
this.style.background = "red";
this.style.width = "200px";
}
</script>
//class是保留关键词，所有用className来更改类名
this.className = "box";
this.className = "box box1";