Javascript DOM五个基本方法[读Javascript DOM编程艺术(第2版)笔记]

    javascript DOM 提供了五个方法，用来获取元素节点，设置属性节点的值，这个方法是 编写其他基于DOM的javascript的基石。这个方法分别为：

getElementById、getElementsByTagName、getElementsByClassName、getAttribute、setAttribute

    首先是介绍获取DOM元素节点的方法，包括getElementById、getElementsByTagName、getElementsByClassName。

    1.getElementById

    这个方法通过传入对应要获取元素节点的id属性值，来得到元素节点对应的对象。这个方法是document对象的方法。使用方法如，document.getElementById("idvalue");  其中idvalue 为html 中某一个元素id属性的值，如<div id="idvalue"></div>。这个方法最多只返回一个对象。

    2.getElementsByTagName

    这个方法入参为对应要获取元素节点的标签名称，如 p，div等，也可以为*，代表html中所有元，返回为一个对象数组。

使用方法如，document.getElementsByTagName("p"); 将返回html中所有p元素节点对应的对象数组。对象数组有一个length属性，可以得到数组中元素的个数。

    例如：var objArr = document.getElementsByTagName("p"); alert(objArr.length); 将会弹出窗口显示html中p元素的个数。

    3.getElementsByClassName

    这个方法是从HTML5 DOM开始新增的，使得我们可以通过class属性中的类名访问元素。未实现HTML5 DOM的浏览器可能不支持该方法。使用方法为，document.getElementsByClassName("className"); 入参为要获取元素的类名，得到一个对象数组。与getElementsByClassName方法类似。

    为了弥补不支持较低版本浏览器的问题，可以在进行封装，得到新的getElementsByClassName.

    function getElementsByClassName(node,    classname){

        if(node.getElementsByClassName){

            return node.getElementsByClassName(classname);

        }else{

            var results = new Array();

            var elems = node.getElementsByTagName("*");

            for(var i=0;i<elems.length;i++){

                if(elems[i].className.indexOf(classname)!=-1){

                        results[results.length]=elems[i];

                 }

            }

            return results;

        }

}

    获取和设置属性的方法为getAttribute、setAttribute

    1.getAttribute

    这个方法定义在元素节点上，入参为html中元素上属性的名称，返回对应的属性对象。无属性时返回null。

    var paras = document.getElementsByTagName("p");    

    for(var i=0; i<paras.length; i++){

        var title_text = paras[i].getAttribute("title");

        if(title_text!=null)

        {

                alert(title_text);

        }

}

 会展示所有p的title属性（不为空），判断不为空是也可以使用 if(title_text) 意思就是存在该属性

    2.setAttribute

    这个方法在元素节点上，入参为html元素上属性的名称和要为这个属性设置的值，对属性节点的值进行修改。 object.setAttribute("attributename","value");   var item = document.getElementById("para");

item.setAttribute("title","a title of para");

可以通过alert(item.getAttribute("title"); 测试前后item前后title属性的值。
    

转载于:https://my.oschina.net/mylingcc/blog/225924