DOM基础及应用(一)
2016-06-19 12:18
357 查看
什么是DOM?
DOM既不是HTML的一部分,也不是JavaScript的一部分,而是一系列独立的规则,所有的主流浏览器都实现了这些规则。DOM的作用是什么?
1、规定HTML的模型2、访问和修改HTML页面
什么是DOM树?
当浏览器加载Web页面时,会在内存中创建页面的模型,DOM规定了浏览器应该使用DOM树方式创建这个模型,DOM树是由对象组成的,每个对象会作为页面的不同部分被加载到浏览器窗口中。Demo
<span style="font-size:18px;"><strong><html><body>
<div id="page">
<h1 id="header">List</h1>
<h2>Buy groceries</h2>
<ul>
<li id="one" class="hot"><em>fresh</em>figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<script src="js/list.js"></script>
</div>
</body>
</html></strong></span>
这段代码对应的DOM树如下:
节点
文档节点:树的顶端为文档节点,相当于document对象,当需要访问任何元素、属性、或文本节点时,都需要通过文档节点来进行导航。元素节点:HTML元素描述了HTML页面的结构,<h1>至<h6>元素描述了标题部分,<p>定义了段落的文本从哪里开始,在哪里结束。
属性节点:属性节点不是所在元素的子节点,它们是这个元素的一部分,当访问一个元素时由特定的方法和属性来读取或修改这个元素的属性。
文本节点:文本节点没有子节点,如果一个元素包含文本和其他子元素,这些子元素并非文本节点的子节点,而是这个容器元素的子节点。
树种每个节点都是一个对象,拥有方法和属性,脚本可以访问和更新这个DOM树,并且针对DOM树的任何修改都会反映到浏览器中。
这篇文章简单的总结了一下DOM树基础知识,在后面的博客汇总我们将会探索具体如何使用DOM树。如果文章有不合理之处请,大牛多多斧正。
相关文章推荐
- java-WEB中的监听器Lisener
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- 5个常见可用性错误和解决方案
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- js数组实现图片轮播
- 创业如何选择WEB开发语言
- Mootools 1.2教程(2) DOM选择器
- DOM 事件流详解
- Erlang实现的一个Web服务器代码实例
- 防止网页脚本病毒执行的方法-from web
- js可突破windows弹退效果代码
- Dom在ajax技术中的作用说明
- 自学成才的秘密:115个 web Develop 资源
- JSP脚本漏洞面面观
- 使用批处理修改web打印设置笔记 适用于IE
- 使用BAT一句话命令实现快速合并JS、CSS