查找元素结点:
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; //等价于tagNamedemo.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值为2demo.attributes[0].nodeValue
//属性结点的属性值,不同浏览器遍历顺序不同, 兼容问题
// FireFox 按照标签属性的逆序开始遍历;
//chrome按照标签属性的顺序进行遍历
//IE8+使用自己的固定顺序。不会根据标签属性书写顺序进行更改,IE7-不能正确读取nodeValue,
//在 IE7-中demo.attributes[i] ,保存为Object类型 , IE8+保存为Attr对象
demo.attributes['id']; //[object Attr] 属性名为id的属性结点。