DOM
一、什么是DOM？
DOM(Document Object Model)：文档对象模型
一套大量使用
Document对象来控制HTML和样式信息的文档对象模型（DOM），用来实现对文档结构的操作简而言之： DOM是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API
什么是API？
应用程序编程接口，就是一个工具，以便于能轻松实现想要完成的功能
MDN API : developer.mozilla.org/zh-CN/docs/…
什么是WebAPI？
Web API是浏览器提供的一套操作浏览器功能和页面元素的API ( BOM和DOM )。
DOM树
文档：一个文档(document)就是浏览器的一个页面
元素：页面中的所有标签叫做元素(element)
节点： 页面中的所有内容均可称为节点，（例如：标签、属性、文本、注释等）
MDN解释：
- 元素节点: 一个元素，存在于DOM中。
- 根节点: 树中顶层节点，在HTML的情况下，总是一个
HTML节点（其他标记词汇，如SVG和定制XML将有不同的根元素）。 - 子节点: 直接位于另一个节点内的节点。例如上面例子中，
IMG是SECTION的子节点。 - 后代节点: 位于另一个节点内任意位置的节点。例如 上面例子中，
IMG是SECTION的子节点，也是一个后代节点。IMG不是BODY的子节点，因为它在树中低了BODY两级，但它是BODY的后代之一。 - 父节点: 里面有另一个节点的节点。例如上面的例子中
BODY是SECTION的父节点。 - 兄弟节点: DOM树中位于同一等级的节点。例如上面例子中，
IMG和P是兄弟。 - 文本节点: 包含文字串的节点
二、如何获取页面元素？
getElementById()
id选择器
- 因为文档页面从上往下加载，所以先有标签，然后才能getElementById
- 参数是字符串，所以需要加引号
- 返回的是一个 element 对象
<div id="time">2019-12-23</div>
<script>
var timer = document.getElementById('time')
console.log(timer); //<div id="time">2019-12-23</div>
</script>
console.dir 可以打印返回的元素对象，更好的查看里面的属性和方法
getElementsByTagName()
- 参数是字符串，所以需要加引号d
- 得到的是对象的集合，可以用遍历来获取所有对象
- 得到的是动态的
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<ol id="ol">
<li>ol001</li>
<li>ol002</li>
<li>ol003</li>
<li>ol004</li>
<li>ol005</li>
</ol>
<script>
//
var lis = document.getElementsByTagName('li')
console.dir(lis);//HTMLCollection(10)
//先获取ol的节点，再进一步获取ol后代节点中的li节点
var ol = document.getElementById('ol');
console.log(ol.getElementsByTagName('li'));//HTMLCollection(5)
</script>
getElementsByClassName()
类名选择器同id选择器
以下是HTML5新增
querySelector()
返回指定选择器的第一个对象
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// getElementsByClassName
var boxs = document.getElementsByClassName('box')
console.log(boxs);
// querySelector 获取的都是第一个
var firstBox = document.querySelector('.box');
console.log(firstBox);
var nav = document.querySelector('#nav');
console.log(nav);
var firstLi = document.querySelector('li');
console.log(firstLi);
</script>
querySelector()
返回指定选择器的所有对象集合用法和querySelector()一样
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<div id="nav">
<ul>
<li>首页</li>
<li>产品</li>
</ul>
</div>
<script>
// getElementsByClassName
var boxs = document.getElementsByClassName('box')
console.log(boxs);
// querySelectorAll 获取指定选择器的所有对象集合
var allBox = document.querySelectorAll('.box')
console.log(allBox);
var allLi = document.querySelectorAll('li')
console.log(allLi);
</script>
注意：
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(‘ # nav’); 、document.querySelectorAll(‘ . box’)
document.body
返回body元素对象
document.documentElement
返回html元素对象
三、给元素注册事件
事件三要素
-
事件源 （谁）
-
事件类型 （什么事件）
-
事件处理程序 （做啥）
事件由三部分组成
- 事件源 事件被触发的对象 比如按钮
- 事件类型 如何触发 比如鼠标点击、鼠标经过、键盘按下、滚动滚轮
- 事件处理程序 通过函数赋值的方式完成
常见鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击左键触发 |
| onmouseover | 鼠标经过触发 |
| onmouseout | 鼠标离开触发 |
| onfocus | 获得鼠标焦点触发 |
| onblur | 失去鼠标焦点触发 |
| onmousemove | 鼠标移动触发 |
| onmouseup | 鼠标弹起触发 |
| onmousedown | 鼠标按下触发 |
两个简单的小案例
<button id="btn">唐伯虎</button>
<script>
var btn = document.getElementById('btn')
// console.dir(btn);
btn.onclick = function () {
alert('点秋香')
}
</script>
<div>123</div>
<script>
var div = document.querySelector('div')
div.onclick= function () {
console.log('我被选中了');
}
</script>
操作 DOM 元素的属性
改变元素内容
- element.innerText
- 从起始位置到终止位置的内容, 但它去除 html 标签， 同时空格和换行也会去掉
- element.innerHTML
- 起始位置到终止位置的全部内容，包括 html 标签，同时保留空格和换行
示例
<div>div</div>
<script>
let div = document.querySelector('div')
// div.innerText = '<b>今天是：</b>2019'; //<b>今天是：</b>2019 无法解析Html标签
div.innerHTML = '<b>今天是：</b>2019';//今天是：2019 可以解析Html标签
</script>
<p>
我是文字
<span>123</span>
</p>
<script>
var p = document.querySelector('p');
console.log(p.innerText); //我是文字 123
console.log(p.innerHTML); //输入的空格和换换行都保留
//
// 我是文字
// <span>123</span>
//
</script>
输出截图：
