【JavaScript】JavaScript DOM 编程

在开发的时候，最主要是对DOM进行操作。DOM：Document Object Model 文本对象模型。

DOM能够以一种独立于平台和语言的方式訪问和改动一个文档的内容和结构。

DOM是针对xml(HTML)的基于树的API。

DOM树：表示的是节点的层次。例如以下图：

DOM节点及其类型：HTML文档中的全部的内容都是节点。

元素节点：每个HTML元素是一个元素节点。

属性节点：元素的属性，属性节点。能够直接通过属性的方式来操作。

文本节点：是元素节点的子节点，其内容为文本。

例：<li id = "hello" >似水流年梦</li>

上例中，<li> 为元素节点，id="hello" 为属性节点，似水流年梦为文本节点。

首先先写一个HelloWorld程序，来感受一下。

<html>

  <head>

     <title>HelloWorld</title>

	  <script type="text/javascript" >

		window.onload = function(){

			var btn = document.getElementsByTagName("button")[0];

			btn.onclick = function(){

				alert("HelloWorld");

			}

		}

      </script>

  </head>

  <body>

	<button>点我啊 ！

</button>

  </body>

 </html>

怎样来获取元素节点

1.通过document.getElementById("id的值"): 依据 id 属性获取相应的单个节点

var bj =document.getElementById("bj"); //通过id="bj" 。 来获取id为“bj”的节点

alert(bj);

要保证id属性值是唯一的。该方法为document对象的方法。

2)通过document.getElementsByTagName("标签名"):依据标签名获取指定节点名字的数组, 数组对象 length属性能够获取数组的长度

var liNode = document.getElementsByTagName("li"); //得到的是一个数组。数组中包括全部标签名li的元素。

alert(liNode.length);

上面的方法是获取的全部li节点的个数。

假设想要获取指定节点的字节点能够使用以下的方法：

var cityNode = document.getElementById("city");	//得到id为city的元素节点

var cityLiNode = cityNode.getElementsByTagName("li"); //获取id为city元素下的子节点

alert(cityLiNode.length);

3)通过document.getElementsByName("name的值"):节点的name 属性获取符合条件的节点数组。

var genderNode = document.getElementsByName("gender");

alert(genderNode.length);

注意：在使用getElementsByName的时候，仅仅有节点的属性中有name属性，才干够获取，假设是觉得的加上name属性。在IE中是获取不到的。

获取属性节点:

1)能够直接通过“节点.属性”这种方式来获取和设置属性节点的值

//先获取指定的元素节点

var name = document.getElementById("name");

//在读取指定节点的值

alert(name.value);

//设置指定节点的属性的值

name.value="似水流年梦";

2) getAttributeNode() 通过名称获取属性节点, 然后在通过 nodeValue 来读写属性值

var nameNode = document.getElementById("name"); //通过id取得节点

var nameAttr = nameNode.getAttributeNode("value"); //使用getAttributeNode()方法得到属性节点

alert(nameAttr.nodeValue);	//得到属性节点的值

nameAttr.nodeValue = "似水流年梦"; //更改属性的值

<input type="text" name="username" id="name" value="123"/>

获取元素节点的子节点(**仅仅有元素节点才有子节点!!):

1).childNodes 属性获取所有的子节点, 但该方法不有用。

由于假设要获取指定的节点的指定子节点的集合, 能够直接

调用元素节点的 getElementsByTagName() 方法来获取。

2).firstChild 属性获取第一个子节点。

3).lastChild 属性获取最后一个子节点。

//获取city节点的全部子节点

var cityNode  = document.getElementById("city");

alert(cityNode.childNodes.length);

//获取city节点的全部子节点。

var cityLi = cityNode.getElementsByTagName("li");

alert(cityLi.length);

//获取指定节点的第一节点和最后一个节点

alert(cityNode.firstChild);

alert(cityNode.lastChild);

获取文本节点:

1). 步骤: 元素节点 --> 获取元素节点的子节点

2). 若元素节点仅仅有文本节点一个子节点,

比如 <li id="bj" name="BeiJing">北京</li>, <p>你喜欢哪个城市?

</p>,

能够先获取到指定的元素节点 eleNode,

然后利用 eleNode.firstChild.nodeValue 的方法来读写其文本节点的值

//获取文本节点所在的元素节点

var bjText = document.getElementById("bj");

//通过firstChild定位到文本节点

var bjTextNode = bjText.firstChild ;

//通过nodeValue来操作文本节点的值

alert(bjTextNode.nodeValue);

bjTextNode.nodeValue = "似水流年梦";

节点的属性:

1). nodeName: 代表当前节点的名字. 仅仅读属性.

假设给定节点是一个文本节点, nodeName 属性将返回内容为 #text 的字符串

2). nodeType：返回一个整数, 这个数值代表着给定节点的类型.

仅仅读属性. 1 -- 元素节点, 2 -- 属性节点, 3 -- 文本节点

3). nodeValue：返回给定节点的当前值(字符串)。

可读写的属性

      ①. 元素节点, 返回值是 null.

     ②. 属性节点: 返回值是这个属性的值

     ③. 文本节点: 返回值是这个文本节点的内容

//1. 元素节点的这 3 个属性

var bjNode = document.getElementById("bj");

alert(bjNode.nodeType); //元素节点: 1

alert(bjNode.nodeName); //节点名: li

alert(bjNode.nodeValue); //元素节点没有 nodeValue 属性值: null

//2. 属性节点

var nameAttr = document.getElementById("name").getAttributeNode("name");

alert(nameAttr.nodeType); //属性节点: 2

alert(nameAttr.nodeName); //属性节点的节点名: 属性名

alert(nameAttr.nodeValue); //属性节点的 nodeValue 属性值: 属性值

//3. 文本节点:

var textNode = bjNode.firstChild;

alert(textNode.nodeType); //文本节点: 0

alert(textNode.nodeName); //节点名: #text

alert(textNode.nodeValue); //文本节点的 nodeValue 属性值: 文本值本身.

nodeType、nodeName 是仅仅读的，而 nodeValue 是能够被改变的。以上三个属性, 仅仅有在文本节点中使用 nodeValue 读写文本值时使用最多。

创建一个元素节点:

1).createElement()：依照给定的标签名创建一个新的元素节点。

方法仅仅有一个參数：被创建的元素节点的名字, 是一

个字符串。方法的返回值：是一个指向新建节点的引用指针，返回值是一个元素节点, 所以它的 nodeType 属性

值等于 1。新元素节点不会自己主动加入到文档里, 它仅仅是一个存在于 JavaScript 上下文的对象.

创建一个文本节点:

1). createTextNode(): 创建一个包括着给定文本的新文本节点. 这种方法的返回值是一个指向新建文本节点引用指针.

它是一个文本节点, 所以它的 nodeType 属性等于 3。方法仅仅有一个參数：新建文本节点所包括的文本字符串. 新

元素节点不会自己主动加入到文档里

为元素节点加入子节点:

1).appendChild(): var reference = element.appendChild(newChild): 给定子节点 newChild 将成为给定元素节点

element 的最后一个子节点。方法的返回值是一个指向新增子节点的引用指针.

 //新创建一个元素节点。并把该节点加入为指定节点的子节点

//创建元素子节点

var liNode = document.createElement("li");

//得到要加入的子节点的元素节点

var cityNode = document.getElementById("city");

//将创建的子节点追加到元素节点中

city.appendChild(liNode);

//创建文本节点

var textNode = document.createTextNode("似水流年梦");

//将文本节点加入到子节点中

liNode.appendChild(textNode);

节点的替换:

replaceChild()：把一个给定父元素里的一个子节点替换为另外一个子节点

var reference = element.replaceChild(newChild,oldChild);

括号里前面的參数是替换后的新值，后面的參数是要替换的节点。

var bjNode = document.getElementById("bj");	//获取bj节点

var rlNode = document.getElementById("rl");     //获取rl节点

var cityNode = document.getElementById("city"); //获取bj节点的父节点

cityNode.replaceChild(rlNode ,  bjNode);         //进行节点的替换

该节点除了替换功能以外还有移动的功能.

该方法仅仅能完毕单向替换, 若须要使用双向替换, 须要自己定义函数：

function replaceEach(aNode , bNode)

{

	//parentNode 获取子节点的父节点。

	var aParent = aNode.parentNode ;

	var bParent = bNode.parentNode ;

	if(aParent && bParent)

	{

		var aNode2 = aNode.cloneNode(true); //对节点进行克隆

		bParent.replaceChild(aNode2 , bNode);

		aParent.replaceChild(bNode , aNode);

	}

}

【JavaScript】JavaScript DOM 编程的更多相关文章

HTML、css、javascript、DOM编程
HTML.css.javascript.DOM编程一.Html 1.1html概述 Html就是超文本标记语言的简写,是最基础的网页语言,其代码都是由标签所组成,是通过标签来定义的语言,代码不需要区 ...
高性能JavaScript之DOM编程
我们知道.DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价非常昂贵. 有个贴切的比喻.把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之 ...
高性能Javascript(2) DOM编程
第三部分 DOM编程文档对象模型(DOM)是一个独立于语言的,使用XML和HTML文档操作的应用程序接口(API).在浏览器中,主要与HTML文档打交道,在网页应用中检索XML文档也很常见.DOM ...
JavaScript的DOM编程--12--innerHTML属性
innerHTML属性: 1). 浏览器几乎都支持该属性, 但不是 DOM 标准的组成部分. innerHTML 属性可以用来读, 写某给定元素里的 HTML 内容 <html> < ...
JavaScript的DOM编程--01--js代码的写入位置
DOM:Document Object Model(文本对象模型) D:文档 – html 文档或 xml 文档 O:对象 – document 对象的属性和方法 M:模型 DOM 是针对xml(h ...
高性能JavaScript（DOM编程）
首先什么是DOM?为什么慢? DOM:文档对象模型,是一个独立于语言的,用于操作XML和HTML文档的程序接口(API) 用脚本进行DOM操作的代价很昂贵.那么,怎样才能提高程序的效率? 1.DOM访 ...
JavaScript的DOM编程--11--插入节点
插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,t ...
JavaScript的DOM编程--10--删除节点
1). removeChild(): 从一个给定元素里删除一个子节点 var reference = element.removeChild(node); 返回值是一个指向已被删除的子节点的引用指针. ...
JavaScript的DOM编程--09--节点的替换
节点的替换: 1). replaceChild(): 把一个给定父元素里的一个子节点替换为另外一个子节点 var reference = element.replaceChild(newChild,o ...
JavaScript的DOM编程--08--复习
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

15、Django实战第15天：我要学习咨询
今天完成的是课程机构列表页面的最后一个模块:我要学习我们在models中创建对应的表时UserAsk.之前我们讲过:在做表单的时候,我们可以通过forms先对提交的数据做验证,之前我们使用的是For ...
算法-插入排序(Insertion sorting)
本文由@呆代待殆原创,转载请注明出处. 简介:这是一个比较算法,形象的描述插入算法就和我们玩扑克的时候我们排列手牌的方式是一样的,最开始我们手上什么都没有,然后我们每摸一张牌就把它插入到正确的位置,直 ...
【高斯消元】【异或方程组】【bitset】bzoj1923 [Sdoi2010]外星千足虫
Xor方程组解的个数判定: ——莫涛<高斯消元解Xor方程组> 使用方程个数判定:消去第i个未知数时,都会记录距第i个方程最近的第i位系数不为0の方程是谁,这个的max就是使用方程个数. ...
[测试技术分享]DNS域传送漏洞测试
DNS域传送漏洞测试 1.简介: DNS(Domain Name System)也叫域名管理系统,它它建立在一个分布式数据库基础之上,在这个数据库里,保存了IP地址和域名的相互映射关系.正因为DNS的 ...
Matlab与神经网络入门
第一节.神经网络基本原理 1. 人工神经元( Artificial Neuron )模型人工神经元是神经网络的基本元素,其原理可以用下图表示: 图1. 人工神经元模型图中x1~xn是从其他神经 ...
virtualenv、virtualenvwrapper安装和使用;Mac os的特殊性
[sudo] pip install virtualenv 或者[sudo] pip3 install virtualenv [sudo]可用可不用 pip/pip3 install virtuale ...
80端口被system进程占用解决方法
今天启动Apache的时候老是提示失败,很简单,使用 netstat -ano 发现80端口被占用.如图所示: 按照PID 来说:在任务管理器中查看PID 的进程名既然是system.那么应该不回 ...
Linux的PCI驱动分析
1. 关键数据结构 PCI设备上有三种地址空间:PCI的I/O空间.PCI的存储空间和PCI的配置空间.CPU可以访问PCI设备上的所有地址空间,其中I/O空间和存储空间提供给设备驱动程序使用,而配置 ...
算法导论-求(Fibonacci)斐波那契数列算法对比
目录 1.斐波那契数列(Fibonacci)介绍 2.朴素递归算法(Naive recursive algorithm) 3.朴素递归平方算法(Naive recursive squaring) 4 ...
JS断点调试
断点调试在这种场景下能发挥很大的作用.上手这个办法也利益于我以前玩VB编程时也习惯了IDE的单步/断点调试,一般的纯Web开发入门的程序员我没看到几个会用的.其实难度不大,只是他们不懂得主动去探索首 ...

【JavaScript】JavaScript DOM 编程

【JavaScript】JavaScript DOM 编程的更多相关文章

随机推荐

热门专题