大家好,我是IT修真院成都分院第10期学员李劲宏,一枚正直纯洁善良的web程序员,今天给大家分享一下JS如何操作DOM。
DOM(文档对象模型)是针对HTML 和XML 文档的一个API(应用程序编程接口)。DOM描 绘了一个层次化的节点树,允许开发人员添加、移除和修改页面的某一部分。DOM脱胎于 Netscape 及微软公司创始的DHTML(动态HTML),但现在它已经成为表现和操作页面标记的真正的跨 平台、语言中立的方式。
1998 年10 月DOM1级规范成为W3C 的推荐标准,为基本的文档结构及查询提供了接口。本章主 要讨论与浏览器中的HTML页面相关的DOM1级的特性和应用,以及JavaScript 对DOM1级的实现。 IE、Firefox、Safari、Chrome 和Opera 都非常完善地实现了DOM。
什么是DOM
DOM 是 Document Object Model(文档对象)
DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
在 HTML DOM中,所有事物都是节点。DOM 是被视为节点树的 HTML。
DOM节点
HTML 文档中的所有内容都是节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,
HTML 元素内的文本是文本节点,每个 HTML 属性是属性节点,注释是注释节点。
DOM常用操作
查找节点
新建节点
添加节点
删除节点
修改节点
我们用到最多的是element类型,用于表现HTML元素,提供了对元素标签名、子节点及特性的访问。
>DOM常用操作举例
查找节点
document.getElementById('id属性值');
返回拥有指定id的第一个对象的引用
document/element.getElementsByClassName('class属性值');
返回拥有指定class的对象集合。
新建节点
document.createElement('元素名');
创建新的元素节点
document.createAttribute('属性名');
创建新的属性节点
document.createTextNode('文本内容');
创建新的文本节点
document.createComment('注释节点');
创建新的注释节点
document.createDocumentFragment( );
创建文档片段节点。
>DOM常用操作
删除节点
parentNode.removeChild( existingChild );
删除已有的子节点,返回值为删除节点
element.removeAttribute('属性名');
删除具有指定属性名称的属性,无返回值
element.removeAttributeNode( attrNode );
删除指定属性,返回值为删除的属性。
DOM事件
允许 JavaScript 对 HTML 事件作出反应
onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起。