【修真院小课堂】常见的DOM操作有哪些
1.背景介绍
DOM（文档对象模型）是针对HTML 和XML 文档的一个API（应用程序编程接口）。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
DOM脱胎于Netscape 及微软公司创始的DHTML（动态HTML），但现在它已经成为表现和操作页面标记的真正的跨平台、语言中立的方式。1998 年10 月DOM１级规范成为W3C 的推荐标准，为基本的文档结构及查询提供了接口。
DOM树
2.知识剖析
什么是DOM
DOM 是 Document Object Model（文档对象模型）的缩写。DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。在 HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML。DOM节点HTML 文档中的所有内容都是节点。整个文档是一个文档节点,每个 HTML 元素是元素节点，HTML 元素内的文本是文本节点，每个 HTML 属性是属性节点，注释是注释节点。
DOM把整个页面映射为一个多层节点结构
DOM常用操作
查找节点
新建节点
添加节点
删除节点
修改节点
我们用到最多的是element类型，用于表现HTML元素，提供了对元素标签名、子节点及特性的访问。
DOM常用操作举例
查找节点
document.getElementById('id属性值');返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName('class属性值');返回拥有指定class的对象集合
新建节点
document.createElement('元素名');创建新的元素节点
document.createAttribute('属性名');创建新的属性节点
document.createTextNode('文本内容');创建新的文本节点
document.createComment('注释节点');创建新的注释节点
document.createDocumentFragment( );创建文档片段节点
添加节点
常用来添加文本节点element.innerHTML='新增文本内容'
创建文本节点
function addText(){
var element = document.getElementsByTagName('p')[0];
element.innerHTML='新增文本内容'; //插入文本内容
}
删除节点
parentNode.removeChild( existingChild );删除已有的子节点，返回值为删除节点
element.removeAttribute('属性名');删除具有指定属性名称的属性，无返回值
element.removeAttributeNode( attrNode );删除指定属性，返回值为删除的属性
修改节点
添加属性节点，修改属性值：
element.setAttribute( attributeName, attributeValue );
属性节点
增添id属性，并修改class属性值
var element = document.getElementsByTagName('p')[0];
// 添加属性节点
var attr = document.createAttribute('id');
attr.value = 'idValue';
element.setAttributeNode(attr);
// 修改属性值
var attr = document.createAttribute('class');
attr.value = 'classNewValue';
element.setAttributeNode(attr);
３.常见问题
如何通过class和tag调用元素?如何对其设置属性？
４.解决方案
document.getElementsByClassName("time")[0].innerHTML = "16:43";document.getElementsByClassName("time")[1].innerHTML = "16:44";
document.getElementsByTagName("div")[0].className = "text-time";
ele.style.styleName = styleValue;设置ele元素的CSS样式
５.编码实战
６.拓展思考
常见的DOM事件有哪些
onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起
７.参考文献
《JavaScript高级程序设计》
菜鸟教程：http://www.runoob.com/htmldom/htmldom-tutorial.html
博客园：http://www.cnblogs.com/yinshuige/p/5812095.html
８.更多讨论
如何获取相邻的节点？
neborNode.previousSibling :获取已知节点的相邻的上一个节点
nerbourNode.nextSlbling: 获取已知节点的下一个节点
可以复制节点么？
cloneNode(true | false);复制某个节点
什么是文档碎片？
createDocumentFragment() 用来创建文档碎片节点。
文档碎片节点是若干DOM节点的集合，可以包括各种类型的节点，如 元素节点、文本节点、注释节点 等。文档碎片节点在创建之初是空的，需要向它添加节点。
感谢观看