<a href="我是属性节点的值">我是文本节点的值<a/>
a:元素节点 document.getElementsByTagName('a')[0];
href：属性节点 document.getElementsByTagName('a')[0].getAttributeNode('href');
我是文本节点：文本节点 document.getElementsByTagName('a')[0].firstChild;
-------------------------------==================--------------------------
document.getElementsByTagName('a')[0].nodeName; A
document.getElementsByTagName('a')[0].nodeType; 1
document.getElementsByTagName('a')[0].nodeValue; null
document.getElementsByTagName('a')[0].getAttributeNode('href').nodeName; href
document.getElementsByTagName('a')[0].getAttributeNode('href').nodeType; 2
document.getElementsByTagName('a')[0].getAttributeNode('href').nodeValue; 我是属性节点的值
document.getElementsByTagName('a')[0].firstChild.nodeName; #text
document.getElementsByTagName('a')[0].firstChild.nodeType; 3
document.getElementsByTagName('a')[0].firstChild.nodeValue; 我是文本节点的值
节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
- nodeName（节点名称）
- nodeValue（节点值）
- nodeType（节点类型）
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：
| 元素类型 | 节点类型 |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
1.获取/创建元素节点
element.getElementById('id');
element.getElementsByTagName('tagName'); Array
element.getElementsByClassName('classValue'); Array
document.createElement('tagName');
2.获取/设置属性节点的值
element.getAttribute('attName'); 等效于 element.attName;
element.setAttribute('name','value'); 等效于 element.name = value;
3.获取文本节点的值
element.lastChild.nodeValue
document.createTextNode('textValue');
4.父元素
element.parentNode
5.所有子元素
element.childNodes
6.第一个子元素
element.firstChild == element.childNodes[0];
7.最后一个子元素
element.lastChild == element.childNodes[element.childNodes.length-1]
1 <!doctype html> 2 <html> 3 <head> 4 </head> 5 <body> 6 <span id ="test">Drag ME</span> 7 <script src="addLoadEvent.js"></script> 8 <script src="test.js"></script> 9 </body> 10 </html>
1 function addLoadEvent(func){ 2 var oldOnload = window.onload; 3 if(typeof window.onload != 'undefined'){ 4 window.onload = func; 5 }else{ 6 window.onload = function(){ 7 oldOnload(); 8 func(); 9 } 10 } 11 12 }
1 function test(){ 2 var objs = document.getElementsByTagName('body'); 3 var obj = objs[0]; 4 var txtTotal = 'Total childNodes:'; 5 txtTotal += obj.childNodes.length; 6 7 var oul = document.createElement('ul'); 8 for(var i=0; i<obj.childNodes.length; i++){ 9 var o = obj.childNodes[i]; 10 var txt = ''; 11 txt += ' nodeName:'; 12 txt += o.nodeName; 13 txt += ' nodeType:'; 14 txt += o.nodeType; 15 16 var oli = document.createElement('li'); 17 var otxt = document.createTextNode(txt); 18 oli.appendChild(otxt); 19 oul.appendChild(oli); 20 21 } 22 var oh1 = document.createElement('h2'); 23 otxt = document.createTextNode(txtTotal); 24 var op = document.createElement('p'); 25 oh1.appendChild(otxt); 26 otxt = document.createTextNode(obj.innerHTML); 27 op.appendChild(otxt); 28 obj.appendChild(op); 29 obj.appendChild(oh1); 30 obj.appendChild(oul); 31 32 } 33 34 addLoadEvent(test);