纯JS实现根据CSS的class选择DOM

// 网上参考的，自己修改了一部分
// 代码如下，纯JS，要求浏览器支持 getElementsByClassName 方法


代码如下:

<script type="text/javascript">
function getElementsByClassName(classname,node){
node = node || window.document;
if(node.getElementsByClassName){
return node.getElementsByClassName(classname);
}else{
var results = new Array();
var elems = node.getElementsByTag("*");
for (var i=0;i<elems.length;i++){
if(elems[i].className.indexOf(classname) != -1){
results[elems.length] = elems[i];
}
}
return results;
}
};
</script>

赞 (0)

相关推荐

  • 原生JavaScript来实现对dom元素class的操作方法(推荐)

    jQuery操作class的方式非常强大 写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的样式 3.toggleClass:如果存在(不存在),就删除(添加)一个样式 4.hasClass:判断样式是否存在 下面为一toggleClass的测试例子 [html] view plain copy <style type="text/css"> div.testClas

  • JavaScript实现获取dom中class的方法

    本文实例讲述了JavaScript实现获取dom中class的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function getClass(node,classname) { if(node.getEle

  • 如何用js判断dom是否有存在某class的值

    例如: <html class="no-js"> <head> </head> <body> </body> </html> 判断html节点的class是否有no-js. 1.jquery的实现方式 $("html").hasClass('no-js'); jquery源码的实现方式: var rclass = /[\t\r\n\f]/g; jQuery.fn.extend({ hasClas

  • 纯JS实现根据CSS的class选择DOM

    // 网上参考的,自己修改了一部分 // 代码如下,纯JS,要求浏览器支持 getElementsByClassName 方法 复制代码 代码如下: <script type="text/javascript"> function getElementsByClassName(classname,node){ node = node || window.document; if(node.getElementsByClassName){ return node.getEle

  • 纯js代码生成可搜索选择下拉列表的实例

    纯js代码生成可搜索选择下拉列表的实例

    1.因为动态的css楼主写不出来,因此需要引入layui中的css样式:<link rel="stylesheet" href="${ctxStatic}/layui/css/layui.css" rel="external nofollow" rel="external nofollow" >: 2.需要引入jquery-1.8.3.js版本的jquery 话不多说,代码实现如下: var selectData=

  • 纯js+html和纯css+html制作手风琴效果

    本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;lis

  • 纯js和css完成贪吃蛇小游戏demo

    本文实例为大家分享了js贪吃蛇小游戏demo,纯js和css完成,供大家参考,具体内容如下 <!doctype html> <html> <meta charset="utf-8"> <head> <style> *{ margin: 0; padding:0; } .content{ position: absolute; width: 500px; height: 500px; background-color: #212

  • 纯js+css实现仿移动端淘宝网站的弹出详情框功能

    纯js+css实现仿移动端淘宝网站的弹出详情框功能

    点击查看图片 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="ap

  • 纯JS实现表单验证实例

    纯JS实现表单验证实例

    表单我实现了,input属性是text(文本框).radio(单选按钮).checkbox(多选按钮)的知识点, fieldset标签(组合表单中的相关元素).select标签(选择列表)和textarea标签(多行文本框). <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain" onsubmit="return check

  • JavaScript 基础表单验证示例(纯Js实现)

    JavaScript 基础表单验证示例(纯Js实现)

    验证思路 监听每个input控件的焦点离开(onblue),当焦点离开时调用验证函数,验证后修改第三栏文字,显示符合/不符合并返回true/false 实现代码: index.html <!DOCTYPE html> <html> <head> <title></title> <pnk rel="stylesheet" href="css.css" rel="external nofollo

  • 纯JS开发baguetteBox.js响应式画廊插件

    baguetteBox.js 是一个简单和易于使用的响应式的图像 Lightbox 插件,支持滑动手势在移动设备上使用.纯 JavaScript 实现,不依赖第三方库和插件,赶紧来体验吧. 效果演示    下载源码 好了,看下本文重点内容. baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. Demo页面 github 中文使用 特点 纯JS编写,无任

  • 使用纯JS实现checkbox的框选效果(鼠标拖拽多选)

    使用纯JS实现checkbox的框选效果(鼠标拖拽多选)

    目录 主要思路 css 代码如下 html结构如下 js主要逻辑如下 总结 主要思路 用一个盒子作为选区,通过定位让其固定在左上角,由于没有给定选区元素的宽高所以默认不显示,在 onmousemove 中动态获取选区定位的top left bottom right四个属性,同时将鼠标拖拽的距离作为选区的宽高,由于给选区元素的css设置了border就呈现出如图所示的框选效果.(注意:要想自己手动勾选复选框,要给选区元素的css设置pointer-events: none;否则点击复选框的事件会被

  • 纯JS实现五子棋游戏兼容各浏览器(附源码)

    纯JS实现五子棋游戏兼容各浏览器(附源码)

    纯JS五子棋(各浏览器兼容) 效果图:  代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/

随机推荐