几种获取元素的方法

公告

Posted on 2012-07-09 23:55 LazyerHong 阅读(1303) 评论(0) 收藏举报

趁着这一段的热情，看看DOM的方法获取元素结点；

一共有三种的方法：

getElementById

getElementByTagName

getElementByClassName

第一个是通过有特定id的对象来获取该对象的结点。

使用的方法：

document.getElementById("purchase");

返回的是一个对象。这个对象对应的document对象里的一个独一无二的元素。

什么是元素呢？

　　元素指的的<body>之类的构成整个html文档的砖块。

在文档中，每一个元素对应一个对象。

为了不需要一个为每一个元素定义一个id值从而来使用DOM的方法来获取元素，因此引入了另外一个获取那些没有id属性的元素或者称为对象。

document.getElementByTagName("li")

参数是标签的名称。

返回的是一个对象的数组。

可以使用length的属性来查询数组的元素的个数。

为了更好来存取使用数组中的元素可以这样来写代码：

var items = document.getElementByTagName("li");

for(var i = 0; i < items.length; i++)
{
      alert(typeof items[i]);
}

为什么是document调用getElementByTagName？

　　如果我们使用document的话，那就是对整个文档进行查询获取文档中存在这个标签的，但是我们也可以使用自己定义

例如使用一个已知特定id的元素，那么我们可以通过getElementById返回的对象来取得其中含有的列表项。

var shopping  = document.getElementById("purchase");

var items = shopping.getElementByTagName("*");

//items数组中中包含id为purchase的元素中存在的列表项

在html5的DOM中新增了新的方法:

document.getElementByClassName("sal");

参数是一个类名。

可以查找具有许多类名的元素。类名可以时无序的。

在旧版的浏览器却支持的是另外一种的版本：

//方法接受两个参数
//为什么接受两个参数是
//一个是开始的结点，一个是我想要的类名
function getElementByClassName(node, classname)
{
     if(node.getElementByClassName){
          //使用现有的方法
            return node.getElementByClassName(classname);
      }
     else{
         var results = new Array();
         var elems  = node.getElementByTagName("*");//为什么是node
         for(var i = 0; i < elems.length; i++)
         { 
               if(elems[i].className.indexof(classname) != -1)//className哪里来的，indexof呢，
               {
                      results[results.length] = elems[i];
               }
               return results;
         }
     }
}

为什么只要判断node，node是DOM树种的搜索的起点。

先这样了，留着问题，有时间再思考了。。。该洗洗睡了！

刷新页面返回顶部