元素节点，属性节点，文本节点及其类型判断和查找

发表于 | 分类于 |

元素节点

1.元素节点
规定元素节点具有以下特点：
1、nodeType 值为1
2、nodeName 值为元素的标签名（还一个别名tagName）
3、nodeValue 值为null
4、parentNode 一般是Element,也可能是Document
5、其子节点可能是 Element、Text、Conment等
代码示例：

1
2
3
4
5
6
7
8
9
var div1 = document.getElementById("div1");
echo(div1.nodeName);	//输出：DIV，用途判断节点的名称
echo(div1.nodeType);	//输出：1，用途判断节点的类型
echo(div1.nodeValue);	//输出：null，用途获取节点值
echo(div1.parentNode);	//输出：[object HTMLPreElement]，用途获取父节点
echo(div1.parentNode.nodeName); //输出：PRE	，用途获取父节点名称
echo(div1.childNodes);	//[object NodeList]	，用途获取子节点
echo(div1.childNodes.length);	//输出：2，查看本节点下面子节点的个数
echo(div1.childNodes.item(1).nodeValue);	//输出：第二节点

属性节点

属性节点常用方法与通用属性
HTML每个元素都包含下列常用属性
1、id：元素在文档中的唯一标识符
2、title：元素细节的附加说明信息，一般鼠标放上去时候以提示形式显示。
3、className：与CSS特性对应。
除了以上通用属性外，部分元素还有自己特有的属性。

1
2
3
4
5
6
7
8
9
10
var aid = document.getElementById("aid");// //获取属性信息：getAttribute
echo(aid.getAttribute("href"));			//输出：phpdl.com
echo(aid.getAttribute("title"));	//超级链接Title	
//设置属性信息：setAttribute()
aid.setAttribute("title","我是动态TITLE");	//添加属性节点
//删除属性信息：removeAttribute()
aid.removeAttribute("href");
//批量使用属性信息
echo(aid.attributes.length);	//返回一个元素的属性个数

获取元素的常用属性

1
2
3
4
5
6
var objH = document.getElementById("objh");
echo(objH.id);	//输出：objh
echo(objH.nodeName);	//输出：h1
echo(objH.className);	//输出：bordercls
echo(objH.align);	//输出：center
objH.className = "bordercls bgcls";	//设置元素的CSS样式

说明：元素对象.属性 可以快速访问和设置，是最常用的形式，但不是所有的都能通过这种方法得到我们想要的结果
例如：aid.href不一定能获取超连接href的值

1
2
3
var obj1 = document.getElementById("Dh1");
var obj2 = document.getElementById("Dh2");
alert(obj1.innerText + obj2.textContent);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
/封装写函数
function echo(  str, flag ){
 	if(arguments[1]==1){
		document.write(arguments[0]);
	}
	else{
		document.writeln(arguments[0]);
	}
	
} 	
```	
## 文本节点
文本节点由Text类型表示，包含的是可以按照字面解释的纯文本内容。
	可以是转义后的HTML字符，但是不能包含HTML代码。
	文本节点有以下特征：
	1. nodeType 值为3
	2. nodeName 值为 “#text”   
	3. nodeValue 值为节点所包含的文本(别名：data属性)
	4. parentNode 是一个Element
	5. 不能包含子节点，文本节点是最小单元。
	虽然文本节点不能包含子节点，却提供了很多操控文本节点的方法和属性，常用的如下。
	1. appendData(text)			//在文本末尾追加text内容
	2. deleteData(offset,cont)	//从offset位置开始删除，删除count个
	3. insertData(offset,text)  //在offset指定的位置插入text内容
	4. replaceData(offset,count,text) //用text替换从offset开始到(offset+count)为止处的文本
	5. splitText(offset) //从offset指定的位置将当前文本节点分成两个文本节点
	6. substringData(offset,count) //提取从从offset开始到(offset+count)为止处的文本
	文本节点的属性：length
	nodeValue.length或data.length中保存着文本节点中字符的数目。
	注意事项：默认情况下每个可以包含内容的元素最多只能有一个文本节点，而且必须确实有内容存在。
``` bash
echo("----------文本节点操控方法的应用------------");
var  obj = document.getElementById("div1");
var  obj2 = document.getElementById("div2");
var objh1 = document.getElementById("objh1");
//追加新内容
obj.childNodes[0].appendData("中华人民共和国");
//删除指定内容
obj.childNodes[0].deleteData(4,2);
//在指定位置插入指定内容
obj.childNodes[0].insertData(4,"，insertData");
//替换指定文本
obj2.childNodes[0].replaceData(10,5,"美国的") ;
//获取文本节点长度
document.writeln(obj2.childNodes[0].nodeValue.length);
//获取子节点长度 
echo("---------获取子节点个数------------");
document.writeln(obj2.childNodes.length);  //输出：1
//分割文本节点
obj2.childNodes[0].splitText(10) ;
document.writeln(obj2.childNodes.length);  //输出：2

判断节点类型

经常我们需要的是知道一个对象是元素、是属性、还是文本，下一节节点查找我们将看的他的用途。
元素节点的 nodeType值为1
属性节点的nodeType值为2
文本节点的nodeType值为3

1
2
3
4
var ul = document.getElementById("ul1");
echo(ul.nodeType);		//输出 1，说明是元素节点
echo(ul.childNodes[0].nodeType);	//输出 3，说明是文本节点，空白也算
echo(ul.childNodes[1].nodeType);	//输出 1，说明是元素节点就是第一个li

节点的查找

知识点一：父子关系查找
1、hasChildNodes()方法，判断一个对象是否包含子节点。
语法格式：element.hasChildNodes()
返回值：如果对象包含子节点则返回true,如果对象不包含子节点返回false.

2、childNodes 对象，返回一个元素子节点的集合。

3、parentNode属性返回指定节点的父节点。
    语法格式：element.parentNode

4、firstChild 指向childNodes中的第一个节点    
    语法格式：element.firstChild

5、lastChild 指向childNodes列表中的最后一个节点        
    语法格式：element.lastChild

单词必背：
parent：父亲
child：孩子
node：节点
first：第一
last：最后一个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var oUl = document.getElementById("oUl");
if(oUl.hasChildNodes()){
	oUlChild = oUl.childNodes;
	for(var i=0;i<oUlChild.length;i++){
		echo(oUlChild[i].nodeName);
	}
}
echo("----------------只获取元素节点-------------");
var oUl = document.getElementById("oUl");
if(oUl.hasChildNodes()){
	oUlChild = oUl.childNodes;
	for(var i=0;i<oUlChild.length;i++){
		if(oUlChild[i].nodeType==3) continue;
		echo(oUlChild[i].nodeName);
	}
}
echo("----------------批量修改元素节点的样式-------------");
var oUl = document.getElementById("oUl");
if(oUl.hasChildNodes()){
	oUlChild = oUl.childNodes;
	for(var i=0;i<oUlChild.length;i++){
		if(oUlChild[i].nodeType==3) continue;
		oUlChild[i].style.border = "#ff0000 solid 5px";
	}
}
echo("----------------parentNode获取父节点-------------");
var oLi = document.getElementById("oLi");
echo(oLi.parentNode.tagName);	//输出：UL
echo(oLi.parentNode.hasChildNodes());	//输出：true
echo(oLi.parentNode.childNodes.length);		//输出：7
/*提示：parentNode属性可以反复使用，我们可以通过一个元素，找到其父亲，其爷爷(如果有的话)
	element.parentNode.parentNode 等等*/

知识点二：兄弟关系查找
1、nextSibling
2、previousSibling

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
echo("--------兄弟关系查找--------------");
var oH2 = document.getElementById("oH2");
var next  = oH2.nextSibling.nodeType==1?oH2.nextSibling:null;
echo(next)  ;	//输出null,
说明：在IE老版浏览器输出下一个元素，因为对空白文本节点解释不同，现在浏览器认为空白属于文本节点。
	为了解决这个问题。一般我们把nexSibling与previousSibling重新封装
//封装后的nextSib
function nextSib(node){
	var t = node.parentNode.lastChild;
	if(node == t){return null;} //如果是最后一个直接结束函数
	var t2 = node.nextSibling;	//获取下一个兄弟
	//如果下一个兄弟不是元素型的，并且下下一个还有元素
	while(t2.nodeType != 1&&t2.nextSibling != null){
		t2 = t2.nextSibling;
		return (t2.nodeType==1?t2 : null);
	}
}
var next = nextSib(oH2);
echo(next);		//[object HTMLPhraseElement]