javascript笔记

<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);