<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'));//结果就对了
};
//至此结束
相关推荐
在JavaScript中，GUI动画通常是通过操纵DOM元素的样式属性，如位置、透明度或尺寸来实现的。这些变化可以通过时间间隔或事件触发，创建出动态视觉效果。JavaScript的动画实现可以使用原生API，如`...
首先，要实现ul列表的显示和隐藏，我们通常会使用JavaScript中的DOM操作方法。DOM（文档对象模型）是W3C组织制定的一套标准，允许程序和脚本动态访问和更新文档内容、结构和样式。在这其中，我们可以通过document....
JavaScript是Web开发中不可或缺的一部分，尤其在前端领域，它提供了丰富的功能来操作页面和与用户交互。本篇文档主要探讨了JavaScript中的计时器和浏览器对象模型（BOM）的相关概念，通过实例代码来深入理解这些知识...
通过这些函数的实现，我们可以学习到如何封装自己的JavaScript库，如何组织代码以及如何使用一些JavaScript的核心特性，如正则表达式、数组操作和函数式编程。此外，这个简单的例子也展示了如何将多个函数组织在一起...
在DHTML中，CSS允许我们实现元素的动态动画和位置变化。 3. **JavaScript**：这是一种解释型的、跨平台的脚本语言，广泛用于网页的客户端编程。JavaScript可以操作DOM，响应用户事件，实现动态效果和页面逻辑。 4....
该项目旨在探索递归的使用，同时重新实现以下本机javascript和DOM方法polyfill： getElementByClassName（） parseJSON（） stringifyJSON（） 某些代码可能是用ES6编写的，可能需要进行编译才能进行测试。 ...
在这个项目中，JavaScript被用来检测网页中的水杯图像，并实现图像的实时替换。通过操作DOM（Document Object Model）——HTML和XML文档的结构化表示，JavaScript可以找到网页上的特定元素，然后进行修改，比如将...
熟悉selectElementById、getElementByClassName等方法对于实现网页交互至关重要。 3. **事件处理**：JavaScript通过事件监听来响应用户的交互行为，如点击按钮、滚动页面等。学会addEventListener和...
2. **DOM操作**：JavaScript可以操纵HTML元素，添加、删除或修改DOM节点，通过`document.getElementById`、`querySelector`、`getElementByClassName`等方法获取元素，使用`innerHTML`、`innerText`、`style`属性...
【aceshooting.github.io:星星的全景】是一个项目，它展示了卢森堡的星空全景，主要基于JavaScript技术实现。这个项目可能是一个互动的天文体验，让用户能够浏览和探索卢森堡夜晚的美丽星空。JavaScript是一种广泛...
JavaScript，简称JS，是Web开发中的重要脚本语言，它主要负责网页的动态效果和交互。这107个常用语句涵盖了JS的基础语法、控制结构、数据类型、函数、对象、DOM操作等多个方面，旨在帮助开发者提升工作效率并增强对...
- **类选择器**：如`$(".className")`，在不同的浏览器中性能表现不一，取决于浏览器是否支持特定的原生方法（如`getElementByClassName`）。 - **伪类和属性选择器**：这类选择器的性能依赖于浏览器是否提供了相应...
接下来，我们将深入探讨JavaScript在构建此类应用中的关键知识点。 **JavaScript基础** JavaScript是一种广泛应用于Web开发的编程语言，它允许在浏览器端执行代码，提供动态交互性。在"movie-app"中，JavaScript...
或 var color = new ewColorPicker(document.getElementByClassName('demo')); //点击确定 color.config.sure = function(color){ //返回颜色值 } //点击取消 color.config.clear = function(d
1. DOM操作：通过JavaScript获取、修改和操作HTML元素，如document.getElementById、querySelector、getElementByClassName等方法。 2. 事件处理：如addEventListener绑定事件监听器，以及onclick、onmouseover等...
- `getElementByClassName()`和`getElementsByTagName()`：按类名或标签名获取元素。 3. **AJAX（异步JavaScript和XML）** - 实现页面局部更新，提高用户体验。 总结来说，"personal_website"项目涉及到了HTML的...
相反，class选择器（如`$('.className')`）在某些浏览器中可能相对较慢，尤其是IE5-IE8，因为它们没有`getElementByClassName`的原生支持。最慢的选择器是伪类选择器（如`':hidden'`）和属性选择器（如`'[attribute=...