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:获取数组的长度: 方法 ...
随机推荐
- 正确理解ContentPresenter
下图显示继承关系: ContentControl:Control (在Control類並沒有Content屬性, 所以在這之上再寫了一個ContentControl, 使控件有Content屬性可以顯 ...
- Spring MVC体系结构
[Spring MVC类图]<Spring实战>中:<Spring3.0就这么简单>中:[http://blog.csdn.net/gstormspire/article/de ...
- oracle：自定义多行合并聚合函数
原始表 COUNTRY CITY -------------------- -------------- 中国 台北 中国 香港 ...
- 转载：你可能没注意的CSS单位
出自:http://www.cnblogs.com/dolphinX/p/4097693.html 扶今追昔 CSS中的单位我们经常用到px.pt.em.百分比,px和pt不用多说 em em是相对单 ...
- linux 安装Apache----tar.gz文件安装方式（零环境安装）
一.下载apache源代码 1.下载地址:http://httpd.apache.org/download.cgi 找稳定的最新的版本(Stable Release) 得到文件 httpd-2.4. ...
- 今天做php经典实例，发现，我是对的，面试官给我说错了
那是七月中下旬在乐元素公司面试,问了我问什么 $str = "Hellow {$res} world";这么写,我回答说 在字符串中插入复杂变量可以用花括号干起来把? 他告诉我 应 ...
- Codeforces Round #306 (Div. 2) C. Divisibility by Eight 暴力
C. Divisibility by Eight Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/ ...
- C# 图片裁剪代码
/// <summary> /// 缩小裁剪图片 /// </summary> /// <param name="int_Width">要缩小裁 ...
- .Net 垃圾回收和大对象处理
CLR垃圾回收器根据所占空间大小划分对象.大对象和小对象的处理方式有很大区别.比如内存碎片整理 —— 在内存中移动大对象的成本是昂贵的,让我们研究一下垃圾回收器是如何处理大对象的,大对象对程序性能有哪 ...
- Redis 安装与简单示例 <第一篇>
一.Redis的安装 Redis下载地址如下:https://github.com/dmajkic/redis/downloads 解压后根据自己机器的实际情况选择32位或者64位.下载解压后图片如下 ...