一、文档对象模型

　　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模型的更多相关文章

  1. Java script基础

    Java script基础 Js的每个语句后面都要有分号. <script  type="text/java script">所有JS内容</script> ...

  2. Java Script 基础

    一. JS的简介 JavaScript是一种网页编程技术,经常用于创建动态交互网页 JavaScript是一种基于对象和事件驱动的解释性脚本语言,类似C语言和Java的语法 事先不编译:逐行执行:无需 ...

  3. Java Script 基础总结

    1学习ajax需要一点CSS的基础和JavaScipt基础 今天重温一下Javascrpt基础 1.<script type="text/javascript">< ...

  4. Java Script基础（七） HTML DOM模型

    一.HTML DOM. HTML DOM的特性和方法是专门针对HTML的,HTML中的每个节点都是一个对象,通过访问属性和方法的方式,让一些DOM操作更加简便,在HTML DOM中有专门用来处理白哦个 ...

  5. Java Script基础（四） BOM模型

    一.BOM模型 BOM模型(Browser Object Model),也称为文档对象模型,它包含浏览器相关的属性和方法,例如操作,前进后退按钮,控制地址栏,关闭浏览器窗口,打开新窗口等等.它包含的对 ...

  6. Java Script基础（一）

    一.为什么学习JavaScript 学习JavaScript主要有以下两点原因. 1.客户端表单验证. 2.实现页面交互(网页特效) 二.什么是JavaScript JavaScript是一种描述语言 ...

  7. Java Script基础（十） 访问样式表

    动态控制样式表 在JavaScript中,有两种方式可以动态的改变样式属性,一种是使用style属性,另一种是使用样式的className属性.另外控制元素隐藏和显示使用display属性. 1.使用 ...

  8. Java Script基础（九） 下拉列表对象

    Select下拉列表 属性: options[]:返回包含下拉列表中的所有选项的一个数组. selectedIndex:设置返回下拉列表中被选项目的索引号. length:返回下拉列表框中选项的数目. ...

  9. Java Script基础（八） Array数组对象

    一.Array数组 JavaScript中的数组也是具有相同数据类型的一个或者多个值得集合.用法和Java中的数组类似. Array对象的常用属性和方法: 属性: length:获取数组的长度: 方法 ...

随机推荐

  1. CCS5 编译器手动设置dsp支持可变参数宏等问题

    IDE:CSS5.4,compiler不支持可变参数宏.需要手动设置编译器相关选项: Language Option->Language Mode —>no strict ANSI. 1. ...

  2. 【转】BitmapFactory.Options

    BitmapFactory.Options这个类的信息:http://developer.android.com/reference/android/graphics/BitmapFactory.Op ...

  3. 重载PostNcDestroy()函数做一些清理工作

    转自:http://zhidao.baidu.com/link?url=W-OOWnvUx58w1esKfRAMtvbzBhjfyKodhk8j2DcTtlcDKAOy8sBNW-8Ey2RAhc0l ...

  4. RFID Reader 线路图收集

    This 125 kHz RFID reader http://www.serasidis.gr/circuits/RFID_reader/125kHz_RFID_reader.htm http:// ...

  5. Swift学习资源

    原文: http://leancodingnow.com/swift-learning-resources/ Swift是Apple在今年的WWDC推出的一门新的编程语言,它的1.0版本跟着Xcode ...

  6. JDBC连接各种数据库的方法（经典）

    1)连接Oracle 8/8i/9i/10g/11g(thin模式) Class.forName("oracle.JDBC.driver.OracleDriver").newIns ...

  7. Java面试葵花宝典

    面向对象的特征有哪些方面  1. 抽象:抽象就是忽略一个主题中与当前目标2. 无关的那些方面,3. 以便更充分地注意与当前目标4. 有关的方面.抽象并不5. 打算了解全部问题,而6. 只是选择其中的一 ...

  8. Navicat 导入数据报错 --- 1153 - Got a packet bigger than 'max_allowed_packet' bytes

    在用Navicat导入SQL文件时报错:MySql 错误 Err [Imp] 1153 - Got a packet bigger than 'max_allowed_packet' bytes 查了 ...

  9. 深刻理解Java中final的作用(一):从final的作用剖析String被设计成不可变类的深层原因

    声明:本博客为原创博客,未经同意,不得转载!小伙伴们假设是在别的地方看到的话,建议还是来csdn上看吧(原文链接为http://blog.csdn.net/bettarwang/article/det ...

  10. NGINX源代码剖析 之 CPU绑定(CPU亲和性)

    作者:邹祁峰 邮箱:Qifeng.zou.job@gmail.com 博客:http://blog.csdn.net/qifengzou 日期:2014.06.12 18:44 转载请注明来自&quo ...