Java Script基础（六） DOM模型
一、文档对象模型
DOM（ Document Object Model）文档对象模型，它提供了访问、动态修改文档的借口，W3C指定了DOM规范，主流浏览器都支持。DOM由3部分组成，分别是CoreDom、XML DOM和HTML DOM。
1、Core DOM:也称核心DOM变成，定义了一套标准的针对任何结构化文档的对象，包括HTML、XHTML和XML。
2、XML DOM：定义了一套标准的针对XML文档的对象。
3、HTML DOM：定义了一套标准的针对HTML文档的对象。
二、认识DOM节点树。
DOM以树形结构组织HTML文档，文档中每个标签或者元素都是一个节点，各个节点之间都存在着关系。
三、访问DOM节点。
1、使用getElement系列方法访问指定节点。
（1）getElementById()：返回对拥有指定id的对一个对象的引用。
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader"); //点击标题，弹出标题的值。
alert(x.innerHTML);
}
</script>
<body>
<h1 id="myHeader" onclick="getValue()">这是标题</h1>
</body>
</html>
（2）getElementsByName()：返回带有指定名称的对象的集合。
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByName("myInput"); //获取页面中名字为myInput文本框的个数。数量为3
alert(x.length);
}
</script> <input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="名为 'myInput' 的元素有多少个？" />
（3）getElementsByTagName()：返回带有指定标签名的对象的集合。
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("input"); //获取页面中标签名字为input的文本框。数量为4
alert(x.length);
}
</script> <input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="How many input elements?" />
2、使用层次关系访问节点。
（1）访问根节点：
有两种特殊的文档属性可用来访问根节点：
document.documentElement：第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。
document.body：第二个属性是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。
（2）访问父节点
parentNode：返回节点的父节点。
（3）访问兄弟节点
firstChild：返回节点的首个子节点。如果元素没有子节点则返回null。文本和属性节点没有子节点。如果是firefox浏览器会将空标签算在内。IE浏览器不计算空标签。
lastChild：返回节点的最后一个字节点，同 firstChild。 如果是firefox浏览器会将空标签算在内。IE浏览器不计算空标签。
四、操作节点的属性值
1、Core DOM的标准方法包括以下两种：
getAttribute("属性名")：获取属性的值。
setAttribute("属性名")：设置属性的值。
2、HTML DOM标准方法可以直接获取dom.属性。例如：img.src直接获取图片src属性。
五、创建和增加节点。
createElement(tagName)：按照给定的标签名创建一个节点。
appendChild(nodeName)：在已经存在节点的末尾添加新的子节点。
insertBefore(newNode,oldNode)：向指定节点之前插入新的节点。其中newNode参数是必须的，表示新插入的节点；oldNode是可选的。
cloneNode(deep)：复制某个节点。其中deep参数是布尔值，当deep的值为true时，会复制指定的节点以及它的所有子节点。如果为false，则只复制当前节点和它的属性。
六、删除和替换节点
removeChild(node)：删除指定的节点。
replaceChild(newNode,oldNode：将newNode替换为oldNode。
Java Script基础（六） DOM模型的更多相关文章
- Java script基础
Java script基础 Js的每个语句后面都要有分号. <script type="text/java script">所有JS内容</script> ...
- Java Script 基础
一. JS的简介 JavaScript是一种网页编程技术,经常用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言,类似C语言和Java的语法 事先不编译:逐行执行:无需 ...
- Java Script 基础总结
1学习ajax需要一点CSS的基础和JavaScipt基础 今天重温一下Javascrpt基础 1.<script type="text/javascript">< ...
- Java Script基础（七） HTML DOM模型
一.HTML DOM. HTML DOM的特性和方法是专门针对HTML的,HTML中的每个节点都是一个对象,通过访问属性和方法的方式,让一些DOM操作更加简便,在HTML DOM中有专门用来处理白哦个 ...
- Java Script基础（四） BOM模型
一.BOM模型 BOM模型(Browser Object Model),也称为文档对象模型,它包含浏览器相关的属性和方法,例如操作,前进后退按钮,控制地址栏,关闭浏览器窗口,打开新窗口等等.它包含的对 ...
- Java Script基础（一）
一.为什么学习JavaScript 学习JavaScript主要有以下两点原因. 1.客户端表单验证. 2.实现页面交互(网页特效) 二.什么是JavaScript JavaScript是一种描述语言 ...
- Java Script基础（十） 访问样式表
动态控制样式表 在JavaScript中,有两种方式可以动态的改变样式属性,一种是使用style属性,另一种是使用样式的className属性.另外控制元素隐藏和显示使用display属性. 1.使用 ...
- Java Script基础（九） 下拉列表对象
Select下拉列表 属性: options[]:返回包含下拉列表中的所有选项的一个数组. selectedIndex:设置返回下拉列表中被选项目的索引号. length:返回下拉列表框中选项的数目. ...
- Java Script基础（八） Array数组对象
一.Array数组 JavaScript中的数组也是具有相同数据类型的一个或者多个值得集合.用法和Java中的数组类似. Array对象的常用属性和方法: 属性: length:获取数组的长度: 方法 ...
随机推荐
- UVaLive 7512 November 11th （思维漏洞）
题意:给定n*m个座椅,然后有b个是坏的,要做人,并且两个人不能相邻,问你最多坐多少人,最少坐多少人. 析:这个题其实并不难,只要当时一时没想清楚,结果就一直WA,就是最少的情况时,其实一个人可以占三 ...
- PHP导出数据库数据字典脚本
<?php /** * mysql数据字典在线生成 * @author change */ //配置数据库 $dbserver = "192.168.1.218:3306"; ...
- chrome内核浏览器缓存资源找回方法
曾几何时,用chrome浏览器看了某个图片,网页,视频等,当时没保存,后来再怎么找都找不到了,chrome还把缓存加密了,不能像ie那样找回,这世上有买后悔药的吗?还真有! 搜索chromeCache ...
- Jquery基础：append、prepend、after、before、appendTo的区别
append() 是在被选元素的结束标签前面(即改被选元素的内部)插入指定内容. after() 是在被选元素的结束标签后面(即该被选元素的外部)插入指定的内容. appendTo() 仍然是在被选元 ...
- .NET开发中的事务处理大比拼
本文转载:http://www.cnblogs.com/jhxk/articles/2696307.html http://liubaolongg.blog.163.com/blog/static/2 ...
- C#制作艺术字
相信 Word 中的 艺术字 功能大家都不陌生, 前面这个 "Word" 单词就是它所为. 今天, 我们就利用C#来制作几款自己的艺术字, 可能会对我们了解字体图像的制作原理有一 ...
- HttpRuntime.Cache 失效
最近做一个报纸内容类网站,为了提高响应速度,将首页各栏目以及二级栏目中Part文献列表存储在HttpRuntime.Cache缓存中,发布后发现问题,刚插入的缓存很快就失效,本机调试没有问题. 由于H ...
- C++ Primer 学习笔记_67_面向对象编程 --转换与继承、复制控制与继承
面向对象编程 --转换与继承.复制控制与继承 I.转换与继承 引言: 由于每一个派生类对象都包括一个基类部分,因此能够像使用基类对象一样在派生类对象上执行操作. 对于指针/引用,能够将派生类对象的指针 ...
- Ext combox 动态 检索
spring mvc + extjs 免费下载 1 ext jar包 点击打开链接 2 ext 中文api 点击打开链接 java code: package com.paic.bbs.action; ...
- nested exception is java.io.FileNotFoundException: class path resource [spring/spring-datasource-mog
spring单元測试时发现的问题: org.springframework.beans.factory.BeanDefinitionStoreException: IOException parsin ...