189 8069 5689
这篇文章主要介绍了JavaScript的DOM实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇JavaScript的DOM实例分析文章都会有所收获，下面我们一起来看看吧。
让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名注册、网络空间、营销软件、网站建设、木兰网站维护、网站推广。
一、DOM
文档对象模型（简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。
二、DOM树
DOM把以上内容都看做是对象，我们获取过来的DOM元素是一个对象（object），所以称为文档对象模型。
文档：一个页面就是一个文档，DOM中使用document表示。
元素：页面中的所有标签都是元素，DOM中使用element表示。
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示。
三、DOM操作
1·1 获取元素
获取页面中元素可以使用以下几种方式：
根据ID获取，getElementById('ID名')；
根据标签名获取，getElementsByTagName('标签名')；
通过HTML5新增的方法获取，getElementsByClassName('类名)，document.querySelector('（./#）选择器')，document.querySelectorAll（'（./#）选择器')；
特殊元素获取，document.body;（获取body元素），document.documentElement;（获取html元素）；
注意：
通过标签名获取：因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历，得到元素对象是动态的。
根据ID获取元素是唯一的。
H5新增方法：根据类名返回的是元素对象集合。根据指定选择器返回的是第一个元素对象。
1·2 事件基础
事件概述：JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为。
简单理解：触发——响应机制。
网页中的每个元素都可以产生某些可以触发JavaScript的事件。
事件是有三部分组成 ：事件源 事件类型 事件处理程序 我们也称为事件三要素
例如：
执行事件的步骤：
例如：
1·3 鼠标事件
补充鼠标事件：
mouseenter：移入事件。
mouseleave：移出事件。
contextmenu：右键事件。
selectstart：禁止鼠标选中。
1·4 键盘事件
例如：
1·5 操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。
1·5·1 改变元素内容
element.innerText;从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉
element.innerHTML;起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行
例如：
关于“JavaScript的DOM实例分析”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“JavaScript的DOM实例分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。