js-dom操作的属性及方法

1. 获取和设置属性

1）getAttribute函数 获取属性

getAttribute函数不属于document对象，所以不能同过document对象调用，只能通过元素节点对象调用。

用法：object.getAttribute(attribute);

当元素节点没有要寻找的属性时将会返回null

var paras = document.getElementsByTagName("p");
for(var i = 0; i < paras.length; i++){
    var title_text = paras.getAttribute("title");
    if(title_text) alert(title_text);
}

2）setAttribute函数 设置属性

setAttribute完成了两项操作：先创建这个属性，然后设置它的值。如果存在这个属性，则原来的值会被覆盖掉。

用法：object.setAttribute(attribute,value);

var paras = document.getElementsByTagName("p");
for(var i = 0; i < paras.length; i++){
    var title_text = paras[i].getAttribute("title");
    if(title_text){
        paras[i].setAttribute("title","今天天气真晴朗");
        alert(paras[i].getAttribute("title"));
    }
}

2. 获取子节点

1）childNodes属性

获取元素下所有的子节点，但是不仅仅是元素节点，会将文本节点等都选择。

用法：element.childNodes

var childs = document.getElementsByTagName('p')[0].childNodes; //获取p元素的所有子节点

2) firstChild属性

获取第一个子元素。

用法：node.firstChild

等价于：node.childNodes[0]

var firstChild = document.getElementsByTagName('p').firstChild; //获取p元素的第一个子节点

3）lastChild属性

获取最后一个子元素。

用法：node.lastChild

等价于：node.childNodes[node.childNodes.length - 1];

var lastChild = document.getElementsByTagName('p').lastChild; //获取p元素的最后一个子节点

3. 获取节点类型与设置节点文本

1）nodeType属性

获取节点的类型。

用法：node.nodeType

nodeType属性总共有12种可取值，以下为最常用的三种，其它的用的很少，不列出来了。

元素节点的nodeType属性值是1；

属性节点的nodeType属性值是2；

文本节点的nodeType属性值是3；

document.getElementsByTagName('p')[0].nodeType //获取p元素的节点类型

2）nodeValue属性

获取节点的值

用法：node.nodeValue

需要注意的地方是，比如获取p元素的文本节点，document.getElementsByTagName('p')[0].nodeValue得到的并不是包含在p元素中的文本，而是返回一个null值。

而是需要得到p标签中的第一个子节点，document.getElementsByTagName('p')[0].childNodes[0].nodeValue

设置节点的值

用法：node.nodeValue = text;

3）nodeName属性

判断一个元素是否是一个图片元素

var imgNode = document.getElementsTagName('img')[0];
if(imgNode.nodeName != "IMG") return false;

注意：nodeName属性返回的是大写字母的值