什么是DOM？###
定义：文档对象模型 (DOM) 是HTML和XML文档的编程接口。
DOM是浏览器提供的接口，想要操作DOM就要使用DOM。
什么是Node？###
节点(Node)是组成DOM的最小单位。DOM树，就是由各种不同类型的节点组成。
Element和Node的区别?####
对于HTML文档，节点(Node)主要有以下六种类型：
| 节点 | 名称 | 含义 |
|---|---|---|
| Document | 文档节点 | 整个文档(window.document) |
| DocumentType | 文档类型节点 | 文档类型（比如<!DOCTYPE html>） |
| Element | 元素节点 | HTML元素（比如<body>、<div>等） |
| Attribute | 属性节点 | HTML元素属性(比如class="right") |
| Text | 文本节点 | HTML文档中出现的文本 |
| DocumentFragment | 文档碎片节点 | 文档的片段 |
So： Element继承了Node类，也就是说Element是Node多种类型中的一种，也叫作ELEMENT_NODE 。
也就是说我们平时使用的html上的元素，即Element是类型为ELEMENT_NODE的Node。
获取DOM####
//获取节点（不会搜索不在文档中的元素）
var getnode1 = document.getElementById('test')
var getnodes1 = document.getElementsByClassName('test1 test2')
//获取多个节点（返回的HTML集合是动态的）
var getnodes2 = document.getElementByTagName('p')
//支持更高级节点查询方法(只会返回第一个符合的元素)
var getnode2 = document.querySelector('div#test')
//返回与指定的选择器组匹配的元素列表(按出现的顺序排列)
var getnode3 = document.querySelectorAll("div.test, div.test2,div.test3")
创建DOM####
var createEle = document.createElement('div')
var createNode = document.createTextNode('hello world!')
查找DOM####
// 获取父元素、父节点(空时返回null)
var parent = node.parentElement;
var parent = node.parentNode;
// 返回包含指定节点的子节点的集合，该集合为即时更新的集合
var childrens = node.childrenNodes;
// 当前元素的第一个/最后一个子元素节点
var el = node.firstElementChild;
var el = node.lastElementChild;
// 下一个/上一个兄弟元素节点
var el = node.nextElementSibling;
var el = node.previousElementSibling;
修改DOM####
// 删除一个子节点。返回删除的节点（oldChild === child）
var oldChild = node.removeChild(child);
//将一个节点添加到指定父节点的子节点列表末尾。
var newChild = node.appendChild(child);
// 指定的节点替换当前节点的一个子节点（newChild 替换 oldChild）
// 返回被替换掉的节点（ replacedNode === oldChild相等）
var replacedNode = node.replaceChild(newChild, oldChild);
// 在当前节点的某个子节点之前再插入一个子节点
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
//方法返回一个布尔值，判断当前节点是否有子节点。
element.hasChildNodes()
// textContent属性返回当前节点和它的所有后代节点的文本内容(textContent会把后代的div吃掉)
element.textContent = 'hello world'
操作属性####
// 获取数组
ele.attributes;
// 获取属性
ele.getAttribute('class');
//设置属性
ele.setAttribute('class', 'highlight');
// 判断属性
ele.hasAttribute('class');
//移除属性
ele.removeAttribute('class');
// 是否有属性设置
ele.hasAttributes();
网友评论