<style>
body{
margin:0px;
padding:0px;
}
#div1{
width:300px;
height:200px;
background:#CC3;
margin:30px auto 0px 10px;
position:relative;
}
#div2{
width:300px;
height:200px;
background:#096;
position:absolute;
left:310px;
}
#div11{
margin-left:10px;
}
</style>
</head>
<body>
<div id='div1' class='div1'>
xxxxxx
<div id='div11' class='div1'>fasdfa</div>
</div>
<div id='div2' class='div1'>
</div>
<div id='div3' class='div1' style="width:200px">
<div id='div31' class='div1'></div>
</div>
</body>
//测试版本 chrome 40.0.2214.115
//getElementByClassName函数做兼容
//最重要的部分在最后一个测试函数，看懂了也可以不用再看了
window.onload=function(){
//先来看看本浏览器是否兼容
console.info(document.getElementsByClassName('div1'));
console.info(document.getElementById('div1').getElementsByClassName('div1'));
var oNodes=document.getElementsByTagName('*');
console.info(oNodes);//HTMLCollection[14]
for(var i=0;i<oNodes.length;i++){
console.info(oNodes[i]+' '+oNodes[i].className+' '+i);
if(oNodes[i].className){
console.info('calssName: '+oNodes[i].className);
}else{
console.info('calssName: 不存在');
}
}
//进入正题
//思路
//先getElementsByTagName('*'),再从中选取符合要求的返回
//参数两个，第一个限制所选节点的范围，第二要查的元素名称
//测试下正则表达式
var temp=new RegExp("^|\\s"+"fsdfsa"+"\\s|$","ig")
console.info(temp);
console.info(temp.test( 'fSdfsa' ));
//和最下面测试的一样，添加到Object的原型上，不然找不到方法
function getFilter(className){
//首先判断是否兼容
if(this.getElementsByClassName){
this.getElementsByClassName(className);
}else{
var ret=[];
var oNodes=this.getElementsByTagName('*');
for(var i=0;i<oNodes.length;i++){
if(new RegExp("^|\\s"+className+"\\s|$","ig").test(oNodes[i].className)){
ret.push(oNodes[i]);
}
}
return ret;
}
}
//单独拿出测测
/*function getFilter1(className){
var ret=[];
var oNodes=this.getElementsByTagName('*');
for(var i=0;i<oNodes.length;i++){
if(new RegExp("^|\\s"+className+"\\s|$","ig").test(oNodes[i].className)){
ret.push(oNodes[i]);
}
}
return ret;
}*/
//简单实用的getElementsByTagName方法就实现了
Object.prototype.getFilter1=function(className){
var ret=[];
var oNodes=this.getElementsByTagName('*');
for(var i=0;i<oNodes.length;i++){
if(new RegExp("^|\\s"+className+"\\s|$","ig").test(oNodes[i].className)){
ret.push(oNodes[i]);
}
}
return ret;
};
console.info(document.getElementById('div1').getFilter1('div1'));//结果就对了
};
//至此结束
相关推荐
整理的10大JavaScript函数，prototype的$函数，隐藏、显示元素函数，通过className获取DOM元素函数
3)element.getElementByClassName(class);通过属性类名来获取; 2:属性的set和get方法. 1)object.getAttribute(attribute);获取元素的属性.===>>>HTMLDOM: object.attribute; 2)object.setAttribute(attribute,...
chainons-js 用于小部件的一些有用的 javascript 片段列表（Affinitad-Twenga 项目） 随机百分比.js 哈萨德（） 格式价格.js 删除十进制（） addDecimals() 货币开关（） DOMsibling.js 下一个兄弟姐妹（） 上一个...
该项目旨在探索递归的使用，同时重新实现以下本机javascript和DOM方法polyfill： getElementByClassName（） parseJSON（） stringifyJSON（） 某些代码可能是用ES6编写的，可能需要进行编译才能进行测试。 ...
使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许多这个类脚本都是围绕着...
自述文件- 如何运行 从下载整个目录并打开 Index.html 为主页和打开 views/pizza.html 为披萨页面*对 index.html 进行优化 *-缩小 HTML、JS 和 CSS *-将谷歌字体异步到 javascript 字体加载器中 *-异步谷歌分析 *-...
或 var color = new ewColorPicker(document.getElementByClassName('demo')); //点击确定 color.config.sure = function(color){ //返回颜色值 } //点击取消 color.config.clear = function(d
本文实例讲述了JS中getElementsByClassName与classList兼容性问题解决方案。分享给大家供大家参考，具体如下： document(element).getElementsByClassName(classNames:classString); HTML5新添加了这个方法，这个...
在jQuery中，可以用多种选择器，选择同一个网页元素。每种选择器的性能是不一样的，应该了解它们的性能差异 1、最快的选择器：id选择器和元素标签选择器 举例来说，下面的语句性能最佳： $('#id') $('form') $('...
在jQuery中，可以用多种选择器，选择同一个网页元素。每种选择器的性能是不一样的，应该了解它们的性能差异 1、最快的选择器：id选择器和元素标签选择器 举例来说，下面的语句性能最佳： $('#id') $('form') $('...
表中的内容 基本问题解决 JS代码段 填充胶 Array.flat 数组查找 对象创建 setInterval document.getElementById document.getElementByClassName 帮手 防抖和油门 睡觉 objectToArray和arrayToObject 2个对象的...