DOM基本属性

查找元素结点：

1通过id查找:

          document.getElemengById('id');   //返回值为dom对象

2通过标签名查找

var demo =document.getElementsByTagName('li'); 

 //返回一个数组集合 ，该集合由标签名为li的元素结点组成

//问题：集合元素只有li元素结点，那么该结点的属性demo[0].innerHTML是否就是文本节点？

//严格来说不是文本节点

alert(demo);             // alert显示为：[object  HTMLCollection]

alert(demo.length);           //返回集合元素个数；

//获取所有元素：

var demo =document.getElementsByTagName('*'); 

alert(demo.length);       //在IE8及低版本浏览器中比其他浏览器多一个,   兼容问题

//因为iE6把文档元素作为第一个结点， 其他浏览器把html结点作为第一个结点：

alert(demo[0].nodeName);    //IE8及低版本浏览器：#document     其他浏览器为：html

3通过元素的name属性查找

 var demo = document.getElementsByName('name');    

 //ie浏览器不支持非法的name属性获取，

//如果name属性为非表单元素的属性，那么ie就无法通过此方法获取的结点对象。

//含有name 属性的表单元素结点可以被ie获取

 // 元素结点的属性：

//标签属性

demo.tagName;    //该元素结点的标签名

demo.id;

demo.title;

demo.style;

demo.className;       //class值,             因为class是保留字，此处使用className作为该结点的class值

demo.style.color;       //某css个属性值

//自定义属性

//还可以获取标签中的用户自定义属性；

<p id="pId" abc = "ppp"></p>

var demo = document.getElementById("pId");

alert(demo.abc;)    //ppp    但是只有IE<=8支持此种做法，非IE浏览器不支持     兼容问题

//结点属性

demo.nodeName;    //等价于tagName

demo.nodeValue;    //结点本身的value值，元素结点该属性为空，文本节点的属性为文本内容

demo.innerHTML;    //（非标准属性）元素结点里面的文本内容，包含其他子标签，为字符串。  文本节点没有改属性

注意： nodeValue属性和innerHTML属性可以赋值，并且，nodeValue会把特殊字符转义，原样输出

元素结点使用innerHTML赋值，文本节点使用nodeValue赋值。

    //节点关系属性

demo.childNodes;    // nodeList

//不同浏览器的读取方式不同，IE8-不会读取空格，其他浏览器都可以读取空格。  兼容问题

demo.firstChild;       //

demo.lastChild;

demo.ownerDocument;   //该结点的跟结点对象。

alert(demo.ownerDocument===document); //true;

demo.nextSibling;//下一个结点

demo.previousSibling;//上一个结点

demo.attributes;       //[object NamedNodeMap]   属性结点集合，保存着该元素的属性列表。从后向前保存

demo.attributes[0] ;   // Attr  属性结点

demo.attributes[0].nodeType   //属性列表中都是属性结点，该结点的nodeType值为2 

demo.attributes[0].nodeValue  
//属性结点的属性值，不同浏览器遍历顺序不同，     兼容问题
// FireFox 按照标签属性的逆序开始遍历； 
//chrome按照标签属性的顺序进行遍历
//IE8+使用自己的固定顺序。不会根据标签属性书写顺序进行更改，IE7-不能正确读取nodeValue,

//在 IE7-中demo.attributes[i]  ,保存为Object类型 ， IE8+保存为Attr对象

demo.attributes['id'];   //[object Attr]     属性名为id的属性结点。