JavaScriptJavaScript DOM 编程
Posted jhcelue
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScriptJavaScript 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);
}
}
以上是关于JavaScriptJavaScript DOM 编程的主要内容，如果未能解决你的问题，请参考以下文章