js document.getElementsByClassName的使用介绍与自定义函数_javascript技巧

getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持搜索。

getElementByClassName()函数的使用方法:

使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许多这个类脚本都是围绕着getElementByClassName()建立的,这种解决方法在HTML5中被标准化,另外,这种方法还本地存在于现代浏览器中,GetElementByClassName()只使用一个字符串值作为输入.并返回一个Nodelist,这个NodeList包含所有类名称匹配这个字符串值的元素:

var el = document.getElementsByClassName('foo');

通过在字符串中使用空格分隔类,也可以匹配多个类,下面的代码挑选出了所有既拥有foo类名称又拥有bar类名称的元素:

var el = document.getElementsByClassName('foo bar');

W3C没有getElementByClassName这个函数,我们可以自己定义一个函数来模拟它。

一般如下几种方法:

1、要不就是使用jquery来实现

2、通过自定义函数解决

class单个时 如class="test"

function getElementsByClassName (className) {
		  var all = document.all ? document.all : document.getElementsByTagName('*');
		  var elements = new Array();
		  for (var e = 0; e < all.length; e++) {
			if (all[e].className == className) {
				elements[elements.length] = all[e];
				break;
			}
		  }
		  return elements;
		 }

代码二、

function getElementsByClassName(className,parent){
        var oParent=parent?document.getElementById("parent"):document;
        var oLis=oParent.getElementsByTagName("*");
        var arr=[];
        for(var i=0;i<oLis.length;i++){
          if(oLis[i].className==className){
            arr.push(oLis[i])
          };
          return arr;
        }
      };

class有多个的时候同样匹配,如class="test1 test2 test3"

function getElementsByClassName (className) {
		  var all = document.all ? document.all : document.getElementsByTagName('*');
		  var elements = new Array();
		  for (var e = 0; e < all.length; e++) {
			 var classList = all[e].className.split(" ");
			 for(var i=0;i<classList.length;i++){
				 if (classList[i] == className) {
					elements[elements.length] = all[e];
				  break;
				 }
			 }
		  }
		  return elements;
		 }

下面再附一个完整的测试代码:

<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8' />
  <script>
    /*JS写getElementByClassName;
    我发现chorm、firefox、ie都支持document.getElementsByClassName */
      window.onload = function(){
        var adom = document.getElementsByClassName('a1');
        for(var i = 0;i<adom.length;i++)
          adom[i].style.backgroundColor="red";
      };
      function getElementByClassName(className){
        var elems = [];
        if(!document.getElementsByClassName){
          alert("no exit");
          var dom = document.getElementByTagName('*');
          for(var i = 0;i<dom.length;i++){
            if(dom[i].className == className)
              elems.push(dom[i]);
          }
        }else{
          elems = document.getElementsByClassName(className);
          alert('exit');
        }
        return elems;
      }
  </script>
</head>

<body>
  <div id="a1">a1</div>
  <div class="a1">a1</div>
  <div class="a1">a1</div>
  <div id="a1">a1</div>
  <div class="a1">a1</div>
</body>

</html>

效果如图所示:

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索getElementsByClassName
javascript document、javascript中document、javascript的document、document.name、document.name.value,以便于您获取更多的相关知识。

时间: 2024-11-05 06:26:38

js document.getElementsByClassName的使用介绍与自定义函数_javascript技巧的相关文章

Vue.js每天必学之指令系统与自定义指令_javascript技巧

基础 除了内置指令,Vue.js 也允许注册自定义指令.自定义指令提供一种机制将数据的变化映射为 DOM 行为. 可以用 Vue.directive(id, definition) 方法注册一个全局自定义指令,它接收两个参数指令 ID 与定义对象.也可以用组件的 directives 选项注册一个局部自定义指令. 钩子函数 定义对象可以提供几个钩子函数(都是可选的):  •bind:只调用一次,在指令第一次绑定到元素上时调用.  •update: 在 bind 之后立即以初始值为参数第一次调用,

100个不能错过的实用JS自定义函数_javascript技巧

1.原生JavaScript实现字符串长度截取 复制代码 代码如下: function cutstr(str, len) {    var temp;    var icount = 0;    var patrn = /[^\x00-\xff]/;    var strre = "";    for (var i = 0; i < str.length; i++) {        if (icount < len - 1) {            temp = str

JavaScript保留两位小数的2个自定义函数_javascript技巧

对于一些小数点后有多位的浮点数,我们可能只需要保留2位,但js没有提供这样直接的函数,所以我们得自己写函数实现这个功能,代码如下: 复制代码 代码如下: function changeTwoDecimal(x) {    var f_x = parseFloat(x);    if (isNaN(f_x)) {        alert('function:changeTwoDecimal->parameter error');        return false;    }    var

JS 日期验证正则附asp日期格式化函数_javascript技巧

javascript 日期验证正则 复制代码 代码如下: var pattern = /^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)

JS获取dom 对象 ajax操作 读写cookie函数_javascript技巧

复制代码 代码如下: var LF = {}; LF.version = '1.0.0'; //全局函数 function $(objName) { return document.getElementById(objName); } function $name(objName) { return document.getElementsByName(objName); } function $tag(objName) { return document.getElementsByTagNam

javascript的trim,ltrim,rtrim自定义函数_javascript技巧

<script type="text/javascript"> function trim(str){ //删除左右两端的空格 return str.replace(/(^\s*)|(\s*$)/g, ""); } function ltrim(str){ //删除左边的空格 return str.replace(/(^\s*)/g,""); } function rtrim(str){ //删除右边的空格 return str.re

用js实现的检测浏览器和系统的函数_javascript技巧

复制代码 代码如下: var sUserAgent = navigator.userAgent; var fAppVersion = parseFloat(navigator.appVersion); function compareVersions(sVersion1, sVersion2) { var aVersion1 = sVersion1.split("."); var aVersion2 = sVersion2.split("."); if (aVers

JS分割字符串并放入数组的函数_javascript技巧

复制代码 代码如下: var InterestKeywordListString = $("#userInterestKeywordLabel").html(); var InterestKeywordListArr = []; var t = ''; for (var i = 0; i < InterestKeywordListString.length; i++) { var tmp = InterestKeywordListString.charAt(i); if (tmp

js基础之DOM中document对象的常用属性方法详解_javascript技巧

-----引入 每个载入浏览器的 HTML 文档都会成为 Document 对象. Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问. 属性 1  document.anchors  返回对文档中所有 Anchor 对象的引用.还有document.links/document.forms/document.images等 2  document.URL       返回当前文档的url 3  document.title       返回当前文档的标题 4  do