DOM （Document Object Model） 即文档对象模型， 针对 HTML 和 XML 文档的 API （应用程序接口） 。DOM 描绘了一个层次化的节点树，执行开发者加入、移除和改动页面的某一部分。

DOM中提供了两个节点接口，一个Node接口，一个是document接口，这两种接口的属性和方法基本包括了对节点树的全部操作。

那什么是节点树那？

节点树：载入 HTML 页面时， Web 浏览器生成一个树型结构， 用来表示页面内部结构。 DOM 将这样的树型结构理解为由节点组成。

比方例如以下HTML代码：

<html>

	<head>

			<title>DOM</title>

			<meta http-equiv="Content-type" content="text/html;charset=gb2312"/>

	</head>

	<body>

			<p>请先登录</p>

			<form name="myForm">

					姓名：<input type="text" name="myName">

					密码：<input type ="password" name="myPassword">

					<input type="button" value="确定">

			</form>

	</body>

</html>

生成的节点树例如以下所看到的：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

从节点树中大致能够看出，节点分为三种类型，元素节点，文本节点、属性节点。DOM中提供的Document接口和Node接口的方法与属性就是对这些节点进行操作（增删改查）。

上面说了，我们利用文档接口（Document）的一些方法对HTML节点树的操作就是一些增删改查，那么在增删改查之前，我们的先得有节点吧。这些节点能够直接在HTML中编写，也能够用JavaScript脚本创建，当然了，这里用JavaScript创建节点的优点在于能够动态的对HTML文档进行改动。避免了在HTML界面直接改动代码，这样不仅达到了HTML页面与JavaScript脚本解耦和的作用。并且还能够实现JavaScript脚本动态的操纵HTML页面。

以下这幅图片是文档接口（Document） 的部分属性与方法

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

从上面的图片能够看出，Document接口的方法能够用来创建或获得一个节点，创建分成三种，即元素节点、属性节点、文本节点，訪问方法分为两种。

遗憾的是我所列举的方法与属性都不全，只是这些方法都是一些经常使用的。

以下在介绍一些Node节点关系与节点类型，还包含Node接口的一些方法，这些方法側重于增删改查。

在上面这幅图片中。Node接口中加入节点的方法有两个，对节点的操作还有删除、替换、复制等操作。

贴张HTML代码文档，以下的一些操作都是针对这部分HTML代码进行的。

<html>

	 <head>

		 <meta http-equiv="Content-type" content="text/html;charset=gb2312"/>

		 <title>DOM基础</title>

		 <script type="text/javascript"  src="demo.js"> </script>

	 </head>

	 <body  >

	  <div  align="center">開始</div>

		<div id="box" align="center" title="标题" class="pox" style="color:red;" >

			<p>測试div1</p>

			<p>測试div2</p>

			<p>測试div3</p>

		</div>

	<div align="center" >结束</div>

	 </body>

 </html>

1、创建元素节点p，和文本节点tex。而且在元素节点p以下加入文本节点text。代码和对照效果图例如以下

window.onload=function(){

	var box=document.getElementById('box');// 查找box节点

	var p =document.createElement('p');//仅仅是创建元素节点p 。还没有加入到文档中去，仅仅是驻留在内存中。

	box.appendChild(p);//加入节点。p为节点的名称。

var text =document.createTextNode('此节点为当前节点的最后一个子节点');//创建文本节点text 主流在内存中。还没有加入到HTML中去。

p.appendChild(text);//给p节点加入文本元素

};

     
        

2、插入节点（在某节点之前插入）

window.onload=function(){

	var box=document.getElementById('box');

	var div =document.createElement('div');//仅仅是创建元素节点p 还没有加入到文档中去。仅仅是驻留在内存中。

box.parentNode.insertBefore(div,box);  //先将指针跳到插入位置的父节点，然后在运行插入

	var text =document.createTextNode('測试一下啊！');//创建文本节点text

	div.appendChild(text);//给p节点加入文本元素

};

3、自己定义方法。插入节点（在某节点之后）

// 插入节点（在某节点之后）利用创建一个包括insertBefore()的函数，将目标节点与插入节点座位參数传递进去。

function insertAfter(newElement,targetElement){

	 var  parent =targetElement.parentNode;                  //得到父节点，就是body   假设层次较多，父节点不一定是body

	 if(parent.lastChild==targetElement){                         //推断目标节点是否为该parent元素的最后一个节点。若是，则运行appendChild()操作

		 parent.appendChild(newElement,targetElement)

	 }else{																		 //若目标节点不是parent的最后一个节点。则将目标节点指针下移一位，得到其兄弟节点

		 parent.insertBefore(newElement,targetElement.nextSibling)    //这样就能够在目标节点之后插入了。

}

 }

 window.onload=function(){

	var box=document.getElementById('box');

	var p =document.createElement('p');

	insertAfter(p,box);

	var text=document.createTextNode('在此插入一个文本节点');

    p.appendChild(text);

 };

4、移除节点代码与效果图例如以下

window.onload=function(){

	var box=document.getElementById('box');

	alert('你将要移除第一个測试DIV');

	box.removeChild(box.childNodes[1])         //移除box的第一个子节点。

	alert('你将要移除整个box');

	box.parentNode.removeChild(box);           //移除整个box。

 };

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">  
 

5、替换节点

window.onload=function(){

	var box=document.getElementById('box');

	var p =document.createElement('p');//仅仅是创建元素节点p 还没有加入到文档中去。仅仅是驻留在内存中。

	box.parentNode.insertBefore(p,box);  //先将指针跳到插入位置的父节点，然后在运行插入

	var text =document.createTextNode('測试一下啊！

');//创建文本节点text

	p.appendChild(text);//给p节点加入文本元素

	alert('你将要把第一測试DIV换成“測试一下啊”');

	box.replaceChild(p,box.childNodes[1]);

};

6、克隆节点

window.onload=function(){

	var box=document.getElementById('box');

	var clone = box.childNodes[1].cloneNode(true); //获取第二个子节点，true 表示复制内容

    box.appendChild(clone);

};

小结

以上就是节点操作的部分方法，节点操作的方法不只这些，还有非常多非常多，我们学习DOM，就是学习里面对象的方法与属性的使用。希望我们能在今后的项目中经常使用。PS一句。有没有发现这些方法属性就死增删改查操作，先查，在操作，上面的一些操作都是依照这个步骤来的。

《JavaScript》——DOM的更多相关文章

  1. 《JavaScript》数组Array

    构造函数 var arr1 = new Array();// [] 空数组 var arr2 = new Array(3);//定义长度,0是空数组 var arr3 = new Array(1,2, ...

  2. 《JavaScript》JavaScript的名字和版本

    语言标准版本名字:ECMAScript(ECMA是欧洲计算机制造协会,据说可能是专门做标准的,除了JavaScript遵循这个标准以外,还有XX....)    Jscript(IE对该语言实现版本的 ...

  3. 《JavaScript》web客户端存储

    Web存储: 兼容IE8在内的所有主流浏览器,不兼容早期浏览器:支持大容量但非无限量 LocalStorage和sessionStorage是window对象的两个属性,这两个属性都代表同一个stor ...

  4. 《JavaScript》高级程序设计第21章：Ajax和Comet，jsonp

    一.创建XMLHttpRequest对象 二.XHR的用法 五.跨域资源共享 六.其他跨域技术七.安全七.安全 1. 图像Ping 2. JSONP(JSON with padding,填充式JSON ...

  5. 《JavaScript》 程序基本知识 数据类型。 {0912上} {0912下}

    JS脚本语言: 这是JaxaScript的全称名 JS是网页里面使用的脚本语言 JS是一个非常强大的语言 JS的基础语法 注释语法:  单行注释 //     多行注释 /**/ 输出语法:   双标 ...

  6. 《JavaScript》JS中的常用方法attr(),splice()

    1.jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式. attr(属性名) ...

  7. 《javascript》高级程序设计——类型转换错误

    容易发生类型转换错误的另一个地方,就是流控制语句.像if之类的语句在确定下一步操作之前,会自动把任何值转换成布尔值.尤其是if语句,如果使用不当,最容易出错.来看下面的例子. function con ...

  8. 《JavaScript》高级程序设计第7章 函数表达式

    7.2 闭包 定义: 闭包是指有权访问另一个函数作用域中的变量的函数. 理解闭包: 作用域链: 当某个函数被调用时,会创建一个执行环境以及相应的作用域链. 作用域链中,外部函数的活动对象始终处于第二位 ...

  9. 《JavaScript》字符转义

    escape/unescape encodeURIComponent/decodeURIComponent encodeURI/decodeURI 转义函数会对一些 特殊字符进行转义编码 英文.数字. ...

随机推荐

  1. Python之文件操作：文件的读写

    一.open函数:对文件读写之前,需要先打开文件,获取文件句柄 注意:open() file() 尽量使用open(),Python3以后不支持file()了 1.open(file_name[,ac ...

  2. 检测字符串当中x与o的数目是否相等

    题目如上 答案 function XO(str) { var arr = str.split(""), xCount = , oCount = ; var reX = /x/i, ...

  3. 虚拟 ​router 原理分析

    上一节我们创建了虚拟路由器“router_100_101”,并通过 ping 验证了 vlan100 和 vlan101 已经连通. 本节将重点分析其中的原理. 首先我们查看控制节点的 linux b ...

  4. Android Win7 上使用cmd生成Jks

    Android Win7 上使用cmd生成Jks cmd 命令 C:\Program Files\Java\jre1.8.0_111\bin>keytool -genkeypair -alias ...

  5. Fedora 24 Linux 环境下实现 Infinality 字体渲染增强及 Java 字体渲染改善的方法（修订）

    Fedora 24 Linux 桌面环境默认字体渲染引擎 freetype 及字体配置工具 fontconfig 采用的是未经优化的编译及设置,字体渲染效果比较差.而某些 Linux 发行版的桌面字体 ...

  6. OpenMP参考链接

    做个笔记. http://www.cnblogs.com/China3S/p/3500507.html

  7. javascript 省市二级联动

    通过遍历二维数组 获取到 二级列表的 每个option 然后onchange事件 获取到省,然后循环遍历该省具有的市并将遍历到的市添加到id为city的选择器中. 获取完需要清空二级列表的内容,不然不 ...

  8. POJ 2505 A multiplication game [博弈]

    题意:两个人做游戏,每个人都可以在自己的回合里将数p乘以2到9之间的一个数,初始时p=1,谁先将p乘到大于等于n就算赢. 思路:一开始我算sg值,结果算来算去都没算明白... 后来看了别人题解,才豁然 ...

  9. luogu P3376 【模板】网络最大流（no）ek

    题目描述 如题,给出一个网络图,以及其源点和汇点,求出其网络最大流. 输入输出格式 输入格式: 第一行包含四个正整数N.M.S.T,分别表示点的个数.有向边的个数.源点序号.汇点序号. 接下来M行每行 ...

  10. Springboot如何优雅的解决ajax+自定义headers的跨域请求

    1.什么是跨域 由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript 的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.),凡是发 ...