JavaScript学习笔记(一) 根据类名获取元素

最新推荐文章于 2024-06-20 23:15:00 发布

tesiksas

最新推荐文章于 2024-06-20 23:15:00 发布

阅读量468

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/tesiksas/article/details/42374717

本文详细介绍了如何使用Document对象来操作HTML页面中的元素，包括getElementById、getElementsByName、getElementsByTagName及自定义getElementsByClass方法的实现。

1.Document对象

Document对象：每个载入浏览器的HTML文档都会成为Document对象。Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。

提示：Document对象是Window对象的一部分，可通过window.document属性对其进行访问。

2.getElementById()

// 封装getElementById()方法
function $(id){
    return document.getElementByid(id);
}

3.getElementsByName()

它查询的是元素的name属性。

因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

4.getElementsByTagName()

TagName就是标签名，如：<input>、<img>...

getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。

如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。

5.getElementsByClass()

这个方法要自己写。

// 根据类名获取元素
function getElementsByClass(oParent,sClass){
    var aResult = [];
    var aNode = oParent.getElementsByTagName("*");
    for(var i=0; i<aNode.length; i++){
        if(aNode[i].className == sClass){
            aResult.push(aNode[i]);
        }
    }
    return aResult;
}