分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

js--封装类名的dom操作

发布时间:2023-09-06 01:08责任编辑:赖小花关键词:js

dom操作中的getElementByClassName()在ie6、7、8中具有兼容性问题,而在高级浏览器中就不存在这种问题。以下通过代码对getElementByClassName()的封装 。

<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style> ???????div{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: pink; ???????????margin: 10px; ???????} ???</style> ???<script> ???????window.onload = function(){ ???????????console.log(getClass("test").length); ???????} ???????function getClass(className){ ???????????//如果浏览器支持着,则直接返回 ???????????if(document.getElementsByClassName){ ???????????????return document.getElementsByClassName(className); ???????????} ???????????//不支持的浏览器 ???????????var ?arr = []; ???????????var dom = document.getElementsByTagName("*"); ???????????for(var i=0; i < dom.length; i++){// ???????????????if(dom[i].className == className){// ???????????????????arr.push(dom[i]);// ???????????????}i ???????????????//改进后的class ???????????????var ?txt = dom[i].split(" ");//["dome","test"] ???????????????for(var j=0; j < txt.length; j++){ ???????????????????if(txt[j] == className){ ???????????????????????arr.push(dom[i]); ???????????????????} ???????????????} ???????????} ???????????return arr; ???????} ???????/* ???????原理,遍历所有的div。通过每个div的className来判断 ????????*/ ???</script></head><body></body><div class="dome"></div><div></div><div class="test"></div><div></div><div class="dome test"></div><div></div><div></div><div></div><div class="dome"></div><div></div></html>

  

js--封装类名的dom操作

原文地址:http://www.cnblogs.com/jiang-z/p/7471867.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved