Jxchen learn getElementsByClassName

最新推荐文章于 2024-06-25 01:50:37 发布
最新推荐文章于 2024-06-25 01:50:37 发布
阅读量572 收藏
点赞数
分类专栏： javascript 文章标签： class function javascript 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jacky_Jxchen/article/details/6150953
版权

    天天的公司宿舍两点之间游走，感到很无聊，高兴的时候学习一下JS，千里之生始于足下，一次一学会一点JS知识……

 

 

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Jxchen learn geByClass</title>
    <meta name="keywords" content="js,javascript" >
    <meta name="description" content="利用闲的时候学习一下JS为以后做前端做准备，平时的一些小笔记" >
</head>

<body>
<div class="warp">
    <ul>
        <li><a href="http://blog.csdn.net/jacky_Jxchen" title="这是参考CJ的视频来学习JS,有不足的地方请多多指教">这是参考CJ的视频来学习JS,有不足的地方请多多指教</a></li>
    </ul>
</div>
<script type="text/javascript">
  function getByClass(className,content){
      content = content || document;
      if(content.getElementsByClassName){//判断浏览器自身有没有getElementsByClassName属性
          return content.getElementsByClassName(className); //如果自身getElementsByClassName属性则用自身的方法
          }
      var node = content.getElementsByTagName("*");
          ret = [];
        for(var i = 0; i < node.length; i++){
            if(hasClass(node[i],className)){ //判断此标签有没有class属性
                ret.push(node[i]); //如果有class属性保存在数组里面
                }
            }
            return ret;
      }
      function hasClass(node,className){
        var names = node.className.split(//s+/);
        for(var i = 0; i < names.length; i++){
            if(names[i] == className){//判断此className是否与要找的className相同
                return true;
                }
            }
            return false;
          }

        var gg = getByClass("warp")[0];
        var getA = gg.getElementsByTagName("a")[0];
        alert(getA.innerHTML)
</script>
</body>
</html>
PS：本段代码原出自CJ的视频，不是用于商业用途。

Jxchen
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript getElementsByClassName函数
10-29
然而，原生的 `getElementsByClassName` 在某些浏览器或旧版本的 JavaScript 中可能不可用，因此，开发者经常需要编写兼容性的代码来实现类似的功能。 在提供的代码段中，可以看到一个自定义的 `...
javascript getElementsByClassName实现代码
10-28
根据元素clsssName得到元素集合的函数，需要的朋友可以参考下。
JavaScript getElementsByClassName()方法介绍
路虽远，行则必至！
06-25 2万+
根据元素的class属性值查询一组元素节点对象 getElementsByClassName()可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8及以下的浏览器 注意：这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中，如下图： 我们若要查找具体元素，就必须使用索引，如下图： 我们可以通过length属性，获取其长度，如下图： 我们可以通过innerHT...
兼容性-getElementsByClassName
qq_15509267的博客
11-17 177
一、getElementsByClassName的功能及使用： 功能：获取所有指定类名的元素，返回一个类数组； 使用： let classArr = getElementsByClassName("zyk");//获取所有class是zyk的dom 坑！坑！坑！：IE9以下版本都不支持getElementsByClassName（）方法 二、解决办法 思路： 1、由于IE9以下...
遍历getElementsByClassName
lianflower的博客
10-27 2621
https://stackoverflow.com/questions/3871547/js-iterating-over-result-of-getelementsbyclassname-using-array-foreach var els = document.getElementsByClassName("myclass"); Array.prototype.forEach.call(els, function(el) { console.log(el.tagName); });
getElementsByClassName和getElementsByName
weixin_51847874的博客
02-05 301
对于getElementsByClassName和getElementsByName的方法获取对象 康尾部即可，id是id，Class是class，Name是name
自定义getElementsByClassName方法
weixin_55869175的博客
08-15 274
自定义getElementsByClassName方法 在IE8以下是不兼容getElementsByClassName方法的。这时可以选择通过其他方式来达到此方法的效果。 <script> function elementByClassName(node, classStr) { //先获取node节点下的全部子节点 classStr是传入的要获取节点的类名 let nodes = node.getElementsByTagName("*");
document.getElementsByClassName的实现
最新发布
桂云帆的博客
06-25 460
还有个更古老级的，我从prototype.js1.01版本中找到的，它能支持多个类名的查找（上面两个不行）。它不支持IE5，效率一般般，但作为最早的框架之一，它已经做得很好，其他框架还没有想到这个呢！另一个实现，由Dustin Diaz（《JavaScript Design Patterns》的作者）提供，但兼容性不如上面的，不支持IE5。取出文档中所有元素，然后进行遍历，使用正则表达式找出匹配的元素放入一个数组返回。当然如果游览器原生支持，就用原生的。要使用分支document.all以防错误。
getElementsByClassName( )方法
m0_57835615的博客
05-28 6121
getElementsByClassName( )方法可以返回带有相同类名的所有元素。 语法格式： document.getElementsByClassName('类名称'); 示例：
getElementsByClassName
weixin_33810006的博客
03-17 630
document.getElementsByClassName() 返回值： NodeList 对象，表示指定类名的元素集合。元素在集合中的顺序以其在代码中的出现次序排序。 HTML<div class="hd"> <ul> <li class="current">Beijing</li&g...
getElementsByClassName()的详细用法
热门推荐
caa112的博客
10-11 6万+
1.document.getElment(“id”).getElementsByClassName(“class”) 例子： html: <div id="Paris" class="tabcontent"> <span class="topright">&times;</span> </div> js: var Id=document....
推荐一个封装好的getElementsByClassName方法
09-04
在JavaScript中，`getElementsByClassName` 是一个非常实用的方法，它允许开发者根据指定的类名来查找DOM树中的元素。然而，这个方法在早期版本的Internet Explorer（尤其是IE8及以下）中并不支持，这给跨浏览器的...
js document.getElementsByClassName的使用介绍与自定义函数
10-21
`getElementsByClassName()` 是 JavaScript 中用于获取页面上具有特定类名的元素集合的 DOM API。这个方法在 HTML5 中被引入，但在 Internet Explorer 8 及以下版本中并不支持。为了确保在旧版浏览器中的兼容性，...
关于IE中getElementsByClassName不能用的问题解决方法
09-05
在IE6、8等较旧版本的Internet Explorer浏览器中，`getElementsByClassName` 方法并不被支持，这导致了开发者在尝试获取页面上具有特定类名的元素时遇到问题。`getElementsByClassName` 是一个非常方便的DOM API，它...
js随机打乱数组
Jxchen
12-11 6470
一、比较乱的排序方法 function fnLuanXu(num) { var aLuanXu=[]; for (var i = 0; i < num; i++) { aLuanXu[i] = i; } for (var i = 0; i < num; i++) { var iRand = parseInt(num * Math.random()); var
根据select选中的值来做的切换
Jxchen
08-25 5606
根据选择下拉菜单的中的值来切换显示内容 HTML： 选择内容1 选择内容2 选择内容3 选择内容4 要显示的内容1 要显示的内容2 要显示的内容3 要显示的内容4 JS： (function($)
删除数组中下标为n的元素
Jxchen
02-20 5577
无标题文档 function removeArrayOfN(arr,n) { if(n > arr.length-1 || n < 0){ alert('没有找到下标为'+n+'的元素！'); return;}//如果n大于或小于指定数组的长度则返回 var arr1 = []; for(var i = 0; i < arr.length; i++) { if(i =
js生成web安全色
Jxchen
11-28 5399
256色里有40种颜色在Macintosh和Windows里显示的效果不一样，所以能安全使用的只有216色。 web安全色 div{ color:#f60; font:12px/1.5 Georgia;} window.onload = function() { var aColor = ['00','33','66','99','CC
getelementsbyclassname
09-26
### 回答1： getElementsByClassName 是一种 DOM API，用于通过类名获取 HTML 文档中的元素。它返回一个 NodeList 对象，其中包含具有指定类名的所有元素。在 JavaScript 中，可以使用以下代码来调用它： var elements = document.getElementsByClassName('class-name'); ### 回答2： getElementsByClassName是一个JavaScript方法，它根据指定的类名返回一个类似数组的HTML元素集合。该方法的参数是一个字符串，用于指定要查找的元素的类名。 getElementsByClassName方法会在整个文档中搜索符合要求的元素，并将它们作为一个集合返回。这个集合可以使用索引进行访问，集合中的每个元素都是一个HTML对象。 使用getElementsByClassName的步骤如下： 1. 首先，使用文档对象document调用getElementsByClassName方法。 2. 作为方法参数，传入要查找的类名。 3. 方法会返回一个HTML对象的集合，可以使用索引访问其中的元素。 4. 如果找不到符合要求的元素，则返回一个空的集合。 这个方法非常有用，可以通过指定的类名来选择和操作特定的元素。例如，如果网页中有多个具有相同类名的元素，可以使用getElementsByClassName方法找到它们并进行批量操作，而不需要一个一个地遍历。 需要注意的是，getElementsByClassName方法返回的是一个动态集合，即它会随着DOM的变化而自动更新。这意味着当文档中有元素的类名发生变化或者被添加/移除时，集合中的元素会自动反映这些变化。 综上所述，getElementsByClassName是通过类名来获取HTML元素的方法，它简化了对特定元素的查找和操作，并且具有动态更新的特性。 ### 回答3： getElementsByClassName是一种用于通过类名获取元素的方法。它是在JavaScript中常用的DOM操作方法之一。该方法可以根据指定的类名返回一个包含所有匹配元素的数组。 使用getElementsByClassName方法，我们可以在HTML文档中通过类名进行元素的选择和操作。它可以作为一种有效的选择器，与其他选择器方法如getElementById和getElementsByTagName一起使用，可以更加灵活地操作HTML文档。 这个方法的使用非常简单。我们只需要调用document对象的getElementsByClassName方法，并将想要选择的类名作为参数传递进去。例如，要选择拥有类名为“demo”的元素，可以使用以下代码： var elem = document.getElementsByClassName("demo"); 这样，所有拥有类名为“demo”的元素都会被存储在elem变量中。需要注意的是，getElementsByClassName返回的是一个带有元素的类数组对象，并不是一个真正的数组。如果需要使用数组的方法和属性，可以将其转换成数组，或者通过for循环来进行遍历。 通过getElementsByClassName方法，我们可以方便地对选择的元素进行各种操作，比如修改元素的样式、改变元素的内容、绑定事件等。此外，它还可以与其他选择器方法一起使用，组合多个条件进行元素的选择。如此一来，我们可以更加灵活地操作和控制HTML文档中的元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值