这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战
文档对象模型DOM
01.基本概念
（1）DOM概述
- DOM：
Document Object Model，文档对象模型 - 是W3C组织定义的编程接口，通过这些
DOM接口可以改变网页的内容、结构和样式 - DOM树：
- 文档：一个页面就是一个文档
- 元素：页面中的所有标签都属于元素
- 节点：网页中的所有内容都属于节点
- 针对元素的操作：创建、增、删、改、查、属性操作、事件操作
02.获取元素
获取DOM元素后，返回的是一个对象
（1）根据ID获取元素
-
document.getElementById(" ");（ID是唯一的，所以是Element）<div id="time"> 2020-10-10 </div> <div class="animal"> Dog </div>var time = document.getElementById("time")
（2）根据标签名获取元素
-
document.getElementsByTagName(" ");（标签名可以有多个，所以是Elements）var tagName = document.getElementsByTagName("div")- 获取的是元素对象的集合
- 获取过来的元素：以伪数组的形式存储（不管元素是：一个、多个、没有，都是伪数组）
-
element.getElementsByTagName(" ");var li = element.getElementsByTagName("ol") //获取 ol 中的子元素 li- 获取指定父元素内部的子元素
- 【注意】父元素必须是单个对象、是唯一的，即必须指明是哪一个元素对象
（3）根据class获取元素（H5新增）
-
document.getElementsByClassName(" ");var animal = document.getElementsByClassName("animal")
（4）根据选择器获取元素（H5新增）
【注意】这里的选择器同CSS选择器使用方法一样，类名和id名都需要加符号
-
doucument.querySelector(" ")只会返回指定选择器的第一个元素对象
var animal = document.querySelector(".animal") //返回第一个，元素类名为 animal 的，元素 -
doucument.querySelectorAll(" ");可以返回指定选择器里的所有元素对象
var div = doucument.querySelectorAll("div") //返回所有div标签元素
（5）获取body和HTML元素
- 获取body元素：
document.body - 获取HTML元素：
document.documentElement
03.改变元素
（1）改变元素内容
innerText- 不识别HTML标签
- 在读取内容时，会跳过空格、换行、HTML标签
- 在写入内容时，会将**HTML标签（如果有）**一起写入
var p = document.querySelector("p") // <p> 没有变化<span>还是没有</span> </P>
// 在读取内容时，会跳过元素内部的HTML标签、空格、换行
p.innerText
// 输出结果：没有变化 还是没有
// 在写入内容时，会把HTML标签 一起写入内容中
p.innerText("<strong>改变内容</strong>")
// 输出结果：<strong>改变内容</strong>
innerHTML- 可识别HTMl标签
- 在读取内容时，会保留页面原有的空格、换行、标签
- 在写入内容时，会应用HTMl标签（如果有）
var p = document.querySelector("p") // <p> 没有变化<span>还是没有</span> </P>
//在读取内容时，会将元素内部的HTML标签、空格、换行一起显示出来
p.innerHTML
// 输出结果：没有变化<span>还是没有</span>
//在写入内容时，会识别到 HTML 标签并应用
p.innerHTML("<strong>改变内容</strong>")
// 输出结果（加粗的）：改变内容
- 其它
- 【注意】表单元素
form里面的内容是通过元素属性更改的！！！
- 【注意】表单元素
（2）改变元素属性
-
内置属性获取
-
element.属性名
主要获取内置属性，自定义属性无法通过这种方式获取
element.属性名 = “属性值”;
var img = document.getElementById("image") img.src = "url" img.title = "new_title" -
-
自定义属性获取
-
兼容性获取：
-
element.getAttribute("属性名");
主要获取自定义属性
-
element.setAttribute("属性名","属性值");
设置自定义属性
-
-
element.removeAttribute("属性名");
-
H5新增：
H5新增的规定，将以
data-开头的属性名作为自定义属性-
element.dataset.属性名：获取属性，适用于以data-开头的自定义属性，属性名是data-后面的值这个方法只能获取以
data-开头的，dataset是一个集合，里面存放了所有以data-开头的自定义属性 -
如果属性有多个
-连接的单词，【需要注意】，在获取时，从第二个-开始，需要驼峰命名<div data-index="1" data-last-name="demo"> </div>var div = document.querySelector("div") //获取 data-index 属性 div.dataset.index //获取 data-last-name 属性，驼峰命名 div.dataset.lastName
-
（3）改变样式属性
-
element.style对元素的行内样式进行操作
【注意】：如果样式没有写在行内，是无法通过这种方式获取到的
-
使用方法：+
.属性注意属性名是驼峰命名法，且没有分隔符
element.style.backgroundColor = " "; element.style.fontSize = "";
-
-
element.className对样式文件中的类名样式进行操作
-
改变当前元素的类名，注意会覆盖原先的类名
-
可通过拼接字符串的方式添加，避免覆盖
element.className += " newClassName"; //注意要加空格
-
-
运用：精灵图的实现方法
for循环遍历，改变backgroundPosition的属性值
本人前端小菜鸡，如有不对请谅解
