常见的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常⽤操作举例
查节点
ElementsByClassName('class属性值')；返回拥有指定class的对象集合
新建节点
添加节点
常⽤来添加⽂本节点element.innerHTML='新增⽂本内容'
创建⽂本节点
function addText(){
var element = ElementsByTagName('p')[0];
element.innerHTML='新增⽂本内容'; //插⼊⽂本内容
}
删除节点
添加属性节点，修改属性值：
element.setAttribute( attributeName, attributeValue );
属性节点
增添id属性，并修改class属性值
var element = ElementsByTagName('p')[0];
// 添加属性节点
var attr = ateAttribute('id');
attr.value = 'idValue';
element.setAttributeNode(attr);
// 修改属性值
var attr = ateAttribute('class');
attr.value = 'classNewValue';
html document是什么
element.setAttributeNode(attr);
３.常见问题
如何通过class和tag调⽤元素?如何对其设置属性？
４.解决⽅案
５.编码实战
６.拓展思考
常见的DOM事件有哪些
onclick 事件——当⽤户点击时
onload 事件——⽤户进⼊
onunload 事件——⽤户离开
onmouseover事件——⿏标移⼊
onmouseout事件——⿏标移出
onmousedown事件——⿏标按下
onmouseup 事件——⿏标抬起
７.参考⽂献
《JavaScript⾼级程序设计》
８.更多讨论
如何获取相邻的节点？
neborNode.previousSibling ：获取已知节点的相邻的上⼀个节点
可以复制节点么？
cloneNode(true | false)；复制某个节点
什么是⽂档碎⽚？
createDocumentFragment() ⽤来创建⽂档碎⽚节点。
⽂档碎⽚节点是若⼲DOM节点的集合，可以包括各种类型的节点，如 元素节点、⽂本节点、注释节点 等。⽂档碎⽚节点在创建之初是空的，需要向它添加节点。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。