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

 这篇文章主要介绍了纯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> 
 
 

时间: 2024-10-02 04:47:00

纯JS实现根据CSS的class选择DOM的相关文章

纯JS实现根据CSS的class选择DOM_javascript技巧

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

纯js和css完成贪吃蛇小游戏demo_javascript技巧

本文实例为大家分享了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

baguetteBox.js响应式画廊插件(纯JS)

baguetteBox.js baguetteBox.js 是一个简单和易于使用lightbox纯JavaScript脚本,拥有图像放大缩小并带有相应的CSS3过度,并能在触摸屏等设备上完美展示. Demo页面 github中文使用 特点 纯JS编写,无任何依赖 支持多重画廊(Multiple-gallery)效果, 且允许自定义参数 支持手势滑动(仅在支持多点触控设备上) 现代简约风格 图像字幕支持 响应式的图像 CSS3转换 SVG按钮,没有额外的文件下载 压缩后大约2.3KB 安装方法 使

纯JS文本比较工具

前段时间由于工作需要写了一个纯JS文本比较工具 在这里与大家分享下 算法有待优化,还希望大家多多指教 先上效果图:     奉上源码(把源码保存为html格式的文件就可以直接运行了): <!doctype html> <html> <head> <title>文本比较工具</title> <style type="text/css"> *{padding:0px;margin:0px;} html,body{ ov

mootools框架【八】-Dom篇:Css查询支持之Dom.js

说明:mootools支持通过Css选择器语法来获取元素节点,以最少的代码做最多的事情.在Dom.js中提供了实现这些功能的工具方法以及元素级的扩展. 1.方法:$E 作用:按照css选择器语法获取第一个符合规则的元素 参数: selector:css选择器,如a,#my_div等 filter:可选,过滤范围,默认是document 例子: <div id="myDiv"> <a href="#" id="link1">

纯js实现网页返回顶部功能(万能的兼容目前所有浏览器)

纯js实现网页返回顶部功能(万能的兼容目前所有浏览器) 在web2.0时代,越来越多的网站如雨后春笋般的冒了出来.而且这些网站提供了很多我们常见的功能.如:返回顶部等等小特性. 那么这些功能是如何实现的呢.这里将为大家提供一些快速使用的万能代码. (function() { var btnId = '__gotop'; var isIE = !!window.ActiveXObject && /msie (\d)/i.test(navigator.userAgent) ? RegExp['

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

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

纯js代码实现简单计算器_javascript技巧

本文实例分享了纯js代码实现简单计算器代码,相信大家会喜欢.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title> new document </title> <script type="text/javascript"> function count(){ var txt1 = parseInt( document.getElementById(

纯JS代码实现隔行变色鼠标移入高亮_javascript技巧

在前端开发中经常见到隔行变色鼠标移入高亮显示的效果,下面小编给大家分享基于js代码实现的隔行变色鼠标移入高亮效果,废话不多说了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #table { width: 400px; bor