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:获取数组的长度: 方法 ...
随机推荐
- POJ1948Triangular Pastures（DP）
POJ1948http://poj.org/problem?id=1948 题目大意就是说给你n个木棍让你用它们摆成一个三角形 使得这个三角形的面积最大. 这个题我之前想的时候一直纠结怎么通过之前的 ...
- Twin Prime Conjecture(浙大计算机研究生保研复试上机考试-2011年)
Twin Prime Conjecture Time Limit: 2000/1000 MS (Java/Othe ...
- 关于 mobile sui a外链 老是出现加载失败的解决办法
mobile sui 框架里面的a本身都绑了了一个ajax方法,ajax只能处理同域,跨域就会出现问题 ,所以mobile sui 中的a如果是外链的话就会出现加载失败的提示,这种明显的bug,让用户 ...
- 用Java实现菱形的打印输出
import java.util.Scanner; public class dengyao2 { public dengyao2() { super(); } public static void ...
- Ceph Jewel 10.2.3 环境部署
Ceph 测试环境部署 本文档内容概要 测试环境ceph集群部署规划 测试环境ceph集群部署过程及块设备使用流程 mon节点扩容及osd节点扩容方法 常见问题及解决方法 由于暂时没有用到对象存储,所 ...
- Netty4.x分析（转）
官网定义: netty是一个异步.事件驱动的网络应用框架,用于快速开发可维护的.高性能的服务端和客户端程序. 原理分析 Architecture Overview 网络模型:netty采用了React ...
- Eclipse调试Java的10个技巧
原文地址: http://www.oschina.net/question/82993_69439 在看这篇文章前,我推荐你看一下Eclipse 快捷键手册,我的eclipse版本是4.2 Juno. ...
- WatchKit Learning Resources
查看原文:http://leancodingnow.com/watch-kit-learning-resources/ WatchKit是Apple发布的用来开发Apple Watch应用的框架,本 ...
- 将Excel另存为CSV格式文件
直接将Excel另存为CSV,速度很快: $CurrentPath = $MyInvocation.MyCommand.Path.substring(0,$MyInvocation.MyCommand ...
- mysql主从同步单个表实验记录
问题的提出: 在CRM管理系统与运营基础数据平台之间需要有数据表进行交换,说是交换,其实是单向的,就是CRM里面的一些数据需要实时同步到运营基础数据平台中. 解决方案: A.采用时间戳的办法进行代码开 ...