DOM(Document Object Model,文档对象模型)是JavaScript操作HTML文档的重要手段。利用DOM可以获取和访问HTML文档的任何元素，还可以动态地在HTML文档中添加或修改元素、属性及样式等。

快速入门

利用DOM提供的document对象，可以获取和访问HTML文档的任何元素，再根据需要添加、删除或修改其属性、内容或样式等。

如下操作：一个常见编程语言列表，分别实现对列表项的获取，添加，删除等操作。

1. 创建、编写HTML文档

	
		
		
		
	

	
		常见编程语言列表
		

			

				JavaScript
				删除
			
			

				Python
				删除
			
		
		添加一项编程语言
	

2. JS获取、修改相应DOM元素对象内容
   通常利用document对象中的方法来获取HTML中的元素，而想要获取到HTML页面中的元素，无非通过标签的ID属性(唯一的)，class属性，name属性，标签名称来获取。

// 通过id属性title 获取对应的DOM元素
var spanTitle = document.getElementById('title');
// 设置此DOM元素的内置文本
spanTitle.innerText = "常见编程语言，一起来学习吧"

3. 完成删除操作 （节点操作）
   通过在我们获取到对应的DOM元素对象后，可根据需求对其进行相关节点操作，如下：

• 可通过appendChild()函数给其添加节点；
• 可通过removeChild()函数给其移除节点；
• 可通过parentNode来拿到其父节点;
• 可通过previousSibling,nextSibling来拿到其前后兄弟节点;

如以下代码：

function delNode(dom){
	// 获取 当前对象（按钮）的父节点
	var li = dom.parentNode;
	// 获取 当前对象（按钮）的父节点的父节点
	var ul = dom.parentNode.parentNode;
	// 移除节点操作
	ul.removeChild(li);
}

4. 完成添加操作 (节点操作)
   通过在我们获取到对应的DOM元素对象后，可根据需求对其进行相关节点操作，如下：

• 可通过appendChild()函数给其添加节点；
• 可通过createElement()函数来创建一个指定元素节点；

如以下代码：

// 从HTML文档中获取DOM元素UL
var ulList = document.getElementById('list');
// 从HTML文档中获取DOM元素Button(添加按钮)
var btnAdd = document.getElementById('add');
// 添加按钮的click事件
btnAdd.onclick = function(){
	// 

	// 	JavaScript
	// 	删除
	// 
	// 创建元素 li
	var li = document.createElement('li');
	// 创建元素 span
	var span = document.createElement('span');
	// 创建元素 button
	var button = document.createElement('button');
	// 设置span及button元素的内部文本内容
	span.innerText = "编程语言";
	button.innerText = "删除";
	// 设置button元素的属性 (onclick属性)
	button.setAttribute('onclick','delNode(this)');
	// li中添加
	li.appendChild(span);
	li.appendChild(button);
	// UL中添加
	ulList.appendChild(li);
}

关于节点(node)

网页中所有内容都是节点(标签, 属性, 文本, 注释等)，整个HTML文档就是一个节点树结构。

节点至少拥有nodeType(节点类型)，nodeName(节点名称) 和 nodeValue(节点值) 这三个基本属性。

• 元素节点 nodeType 为 1 (标签)
• 属性节点 nodeType 为 2 (属性)
• 文本节点 nodeType 为 3 (包括文字, 空格, 换行等)

实际开发操作过程中，我们操作最多的就是元素节点

上图展示的HTML节点树中，各节点及它们之间的常见关系如下：

• 根节点：html是整个HTML节点树的根节点，一个HTML文档仅有一个。
• 子节点：子节点为某个元素节点的下级节点，如head和body为html元素的子节点。
• 父节点：父节点为某个节点的上级节点，如head元素为meta元素和title元素的父节点。
• 兄弟节点：兄弟节点为拥有同一个父节点的节点，如h1元素和div元素为兄弟节点。

DOM元素操作

获取元素

通常利用document对象中的方法来获取HTML中的元素，在JS代码中获取HTML文件中的DOM元素，是大部分操作的首要必备操作。具体如下图：

除getElementById()方法是获取某一个元素之外，另外3个方法都是获取满足条件的所有元素。

具体使用如下：

元素内容

元素属性

元素样式

DOM节点操作

获取节点

添加节点

删除节点