这是我参与「第五届青训营 」伴学笔记创作活动的第 8 天
前言
今天主要学习了JS中DOM的基础知识，主要有：
- 什么是DOM？什么是DOM Tree
- 如何获取以及操作元素节点
- 如何操作属性
一. DOM的认识
1. 回顾
JavaScript的基础，可分为三个部分：
- ECMAScript，主要是JavaScript的语法标准。
- DOM，操作网页上的元素的API
- BOM：操作浏览器部分功能的API
2. DOM
DOM，即文档对象模型，全称Document Object Model，能将页面内容表示为可以修改的对象
具体如何表示，那先了解DOM Tree
3. DOM Tree
DOM会将文档构造为对象树：
- 文档抽象成文档对象，是DOM Tree的根节点，也是入口点
- 所有的HTML元素都是元素节点。
- 所有 HTML 属性都是属性节点，并放到到相应的元素结点上
- 内容文本则作为文本节点，放到元素节点
- 注释是注释节点。
通过对象模型，JavaScript 就获得了创建动态 HTML 所需的所有功能，能够修改HTML元素、属性以及CSS样式
二. 元素的获取
由于在HTML当中，一切都是节点，而整个html文档就是一个树，树中的节点都是Object 所以元素的获取也就是节点的获取
1. 查找节点
- 方式一：通过 id 获取元素节点（唯一）
- 方式二：通过 标签名 获取元素节点数组
- 方式三：通过 类名 获取元素节点数组
- 方式四： 通过 CSS 选择器获取元素
var div1 = document.getElementById("box1");
var arr1 = document.getElementsByTagName("div");
var arr2 = document.getElementsByClassName("hehe");
var arr3 = document.querySelectorAll("p.intro");
2. 通过节点的继承关系查找
- 父节点：parentNode
- 前兄弟节点：previousSibling
- 后兄弟节点：nextSibling
- 子节点：childNodes
- 第一个子节点：firstChild
- 最后一个子节点：lastChild
三. 元素操作
- document.createElement(element) - 创建一个 HTML 元素
- document.removeChild(element) - 移除一个 HTML 元素，父节点移除指定的子节点
- document.appendChild(element) - 添加 HTML 元素
- document.replaceChild(new, old) - 替换一个 HTML 元素
- cloneNode(true) - 复制一个HTML元素，参数为true则会把子元素一起复制
- document.write(text) - 写入到HTML输入流
var a1 = document.createElement("li");
a1.parentNode.removeChild(a1);
四. 属性操作
- 访问节点的属性值 ：节点.属性名、节点[属性名]、节点.getAttribute("属性名称");
- 设置节点的属性值：节点属性 = 值 或 节点.setAttribute("属性名", "新的属性值");
- 删除节点的属性：节点.removeAttribute(属性名);
myNode.src = "images/2.jpg"
myNode.setAttribute("src","images/3.jpg");
myNode.removeAttribute("class");
