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:获取数组的长度: 方法 ...
随机推荐
- 创建可执行的JAR包
创建可执行的JAR文件包,需要使用带cvfm参数的jar命令,命令如下:JAR cvfm test.jar manifest.mf testtest.jar和manifest.mf为两个文件,分别对应 ...
- Objc基础学习记录2
1.[类 方法名]; //类方法,-静态成员函数, + (void)fun; 2.[对象名 方法名]; //实例方法, -非静态成员函数, - (void) fun; 3.带有冒号必须要有参数; 4. ...
- OC键值观察KVO
什么是KVO? 什么是KVO?KVO是Key-Value Observing的简称,翻译成中文就是键值观察.这是iOS支持的一种机制,用来做什么呢?我们在开发应用时经常需要进行通信,比如一个model ...
- 常见Java基础知识（较长）
1.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节.抽象包括两个方面,一是过程抽象, ...
- 修改SVN账户密码的方法
Case1: 在Eclipse 使用SVN 的过程中大多数人往往习惯把访问SVN 的用户名密码自动保存起来以便下次自动使用,不要再次手工输入,但是有些时候需要变更密码或者用户名,这时候 ...
- document.getElementById和document.querySelector的区别
zepto中的$(".111")出错,jQuery中$(".111")不出错的原因: zepto用document.querySelector实现,jQuery ...
- CentOS FireFox Flash Player
yum install *firefox* yum install flash-plugin
- ......那么Win8.1怎么去掉文件夹？
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-11) 细心的朋友会发现,在Win8.1这台电脑(计算机)中,除了我们最熟悉的磁盘外,还新增了视频.图片.文档.下载.音 ...
- props 和 state的区别
作者:孙志勇 微博 日期:2016年11月29日 一.时效性 所有信息都具有时效性.文章的价值,往往跟时间有很大关联.特别是技术类文章,请注意本文创建时间,如果本文过于久远,请读者酌情考量,莫要浪费时 ...
- cocos2d-x 判断两条直线是否相交
bool GraphicsUtil::linesCross(b2Vec2 v0, b2Vec2 v1, b2Vec2 t0, b2Vec2 t1, b2Vec2 &intersectionPo ...