DOM基础笔记
Document Object Model（DOM）是 文档对象模型。
DOM的本质
DOM是浏览器从HTML文件解析出来的一种树。
DOM节点操作
获取DOM节点
HTML5之前
- document.getElementById(); 获取某个id的单个元素。
- document.getElementByTagName(); 获得某tag元素的集合
HTML5新增
- document.getElementByClassName(); 获得某类元素的集合
- document.querySelector(); CSS选择器，返回选择到的第一个对象
- document.querySelectorAll(); CSS选择器，返回选择器选择到的所有对象
获取特殊元素<body>, <html>
document.body;
document.documentElement;
DOM事件基础
事件是触发响应的机制。
事件的三要素： 事件源，事件类型，事件处理程序
- 事件源是事件被触发的对象，如指定的按钮，div等
- 事件类型是事件的触发方式，如鼠标事件，滚轮事件，键盘事件
- 事件处理程序 -- 回调函数
事件执行过程
- 获取事件源
- 绑定/注册事件
- 添加回调函数
操作元素的方式
前置内容-H5自定义属性的规范
自定义属性的命名： data-属性名
element.dataset.属性名： 所有‘data-’ 开头的属性
修改元素内容
element.innerText 某元素标签内部文本的值
element.innerHTML 某元素内HTML代码的值，识别HTML标签
获取元素属性
element.属性； 这个只能获取默认属性
element.getAttribute(属性); 这个可以获得默认属性以及自定义的属性(推荐)
修改元素属性
img.src = 'imgs/me.png'; 其它属性同理
element.setAttribute(属性，值); 设置或者添加属性(推荐)
移除元素属性
element.removeAttribute(属性);
修改表单属性
input.value = '';
input.disabled = true;
修改CSS样式
element.style.border = “solid 1px black”； 修改行内样式，权重高于内嵌样式，一次只能修改一个属性
element.className = "new-class"; 在开头css定义个新的new-class样式，这样就可以通过改变元素class来修改大量样式属性
节点操作：整个页面的所有内容都是节点
方法1：
利用DOM提供的方法获取元素
方法2(常用)：
通过父元素获取子元素进行操作
节点有三个基本属性，包括nodeType, nodeName, nodeValue。
- 元素节点的nodeType为1
- 属性节点的nodeType为2
- 文本节点的nodeType为3
节点层级
获取元素上一级的父节点
node.parentNode
获取元素的子节点: 包括元素节点和文本节点
node.childNodes
为了获取所有的元素节点，过滤掉文本节点
用for循环遍历子节点，获取 nodeType==1的节点
或者直接用 node.children（常用）获取所有的子元素
获取兄弟节点
node.nextSibling 获取下一个兄弟节点
node.previousSibling 获取上一个兄弟节点
node.nextElementSibling 获取下一个兄弟元素节点 IE9以上
node.previousElementSibling 获取上一个兄弟元素节点 IE9以上
创建节点
let div = document.createElement('div');
添加子节点到末尾
node.appendChild(div);
添加子节点到指定元素前面
node.insertBefore(div, 指定元素);
删除节点
如果删除按钮是要删除的元素的子节点，就让爷爷删除父节点
document.write(), createElement()和 innerHTML创建元素的区别
- document.write() 它是直接将内容写入页面的内容流，在文档流执行完后，导致页面全部重绘
- innerHTML 是将内容写入操作的DOM节点里，不会导致全部重绘，但是直接拼接字符串效率很低，用数组的join方法拼接字符串后执行效率非常高
- createElement() 效率中等，但是结构清晰
浙公网安备 33010602011771号