什么是Dom，以及Dom的常见的基础的增删改查

什么是 DOM ?

DOM(文档对象模型)是针对于xml但是扩展用于HTML的应用程序编程接口，定义了访问和操作HTML的文档的标准。

W3C文档对象模型是中立于平台和语言之间的接口，它允许程序和脚本动态的访问和更新文档的内容、结构、样式。总之HTML是关于如何获取、修改、添加和删除HTML元素的标准。

DOM 常用方法

获取节点

// 通过id号来获取元素，返回一个元素对象
document.getElementById(idName) 
      
// 通过name属性获取id号，返回元素对象数组 
document.getElementsByName(name)  
   
// 通过class来获取元素，返回元素对象数组
document.getElementsByClassName(className)   

// 通过标签名获取元素，返回元素对象数组
document.getElementsByTagName(tagName)       

获取/设置元素的属性值：

// 括号传入属性名，返回对应属性的属性值
element.getAttribute(attributeName)

// 传入属性名及设置的值
element.setAttribute(attributeName,attributeValue)

创建节点Node

// 创建一个html元素，这里以创建h3元素为例
document.createElement("h3")

// 创建一个文本节点；
document.createTextNode(String);

// 创建一个属性节点，这里以创建class属性为例
document.createAttribute("class");

增添节点

// 往element内部最后面添加一个节点，参数是节点类型
element.appendChild(Node);

// 在element内部的中在existingNode前面插入newNode
elelment.insertBefore(newNode,existingNode); 

删除节点

//删除当前节点下指定的子节点，删除成功返回该被删除的节点，否则返回null
element.removeChild(Node)

DOM常用属性

获取当前元素的父节点

// 返回当前元素的父节点对象
element.parentNode

获取当前元素的子节点

// 返回当前元素所有子元素节点对象，只返回HTML节点
element.chlidren

// 返回当前元素多有子节点，包括文本，HTML，属性节点。（回车也会当做一个节点）
element.chilidNodes

// 返回当前元素的第一个子节点对象
element.firstChild

// 返回当前元素的最后一个子节点对象
element.lastChild

获取当前元素的同级元素

// 返回当前元素的下一个同级元素 没有就返回null
element.nextSibling

// 返回当前元素上一个同级元素 没有就返回 null
element.previousSibling

获取当前元素的文本

// 返回元素的所有文本，包括html代码
element.innerHTML

// 返回当前元素的自身及子代所有文本值，只是文本内容，不包括html代码
element.innerText

获取当前节点的节点类型

// 返回节点的类型,数字形式（1-12）
// 常见几个1：元素节点，2：属性节点，3：文本节点。
node.nodeType   

设置样式

// 设置元素的样式时使用style
element.style.color=“#eea”;

DOM 操作

DOM中的每个HTML元素也是一个节点，可以像这样查找节点：

document.querySelector('h1').nodeType;

上面会返回1，它是Element类型的节点的标识符，还可以检查节点名称：

document.querySelector('h1').nodeName;

"H1"

上面的示例返回大写的节点名。但是需要理解的最重要的概念是，咱们主要使用DOM中的两种类型的节点：

• 元素节点
• 文本节点

创建元素节点，可以通过 createElement方法：

var heading = document.createElement('h1');

创建文本节点，可能通过 createTextNode 方法：

var text = document.createTextNode('Hello world');

接着将两个节点组合在一起，然后添加到 body 上：

var heading = document.createElement('h1');
var text = document.createTextNoe('Hello world');
heading.appendChild(text);
document.body.appendChild(heading)

在学习Dom操作时候，这些方法需要牢记并熟练使用的。
目前像咱们用这种方式创建和操作元素，是属于命令式DOM操作。现代前端库通过支持声明性方法来解决这个问题，如 JQuery,咱们可以声明需要什么HTML元素，其它就由库来完成。