一道JS面试题目引发的思考

今看到一道有意思的题目,引发很多未知的东西,页面上有html代码如下:

<body>

    <form id="form1" runat="server">

    <div id="Div1"></div>

    <div id="Div2"></div>

    <div id="Div3"></div>

    <div id="Div4"></div>

    <div id="Div5"></div>

    <div id="Div3">这是重复的DIV元素</div>

    </form>

</body>

找出html中重复id的元素。如果是我来解答那应该就是先得到所有的元素document.getElementsByTagName("*"),然后一个一个去匹配数组中有没有重复的,这样应该是两个for循环。- _-|||

现在摘录网上比较牛B的解法。

 

方法一:巧用document.getElementById

 

document.getElementById根据id获取DOM对象时,如果有多个同名id,获取的是第一个该idDOM对象,获取所有标签后,逆序遍历判断该DOM元素odocument.getElementByIdo.id)是不是同一个DOM元素,是就继续,不是就说明id重复了。

 

ExpandedBlockStart.gif 代码
var  tags  =  document.getElementsByTagName( " * " );

for  ( var  i  =  tags.length  -   1 ; i  >   - 1 ; i -- ) {

    
var  o  =  tags[i];

    var  id  =  o.id;

// 如果该元素不等于document.getElementById出来的那个就说明重复了
    
if  (id  &&  document.getElementById(id)  !=  o) {
        alert(id 
+   " 重复了 " );
        
break ;
    }
}

if  (i  ==   - 1 ) { alert( " 没有出现相同的id " ) }

 

 

总结:document.getElementById这么简单的东西也有额外的知识点存在^_^

 

方法二:运用字典的方式

 

new出一个字典对象,然后将页面上所有的元素id当成key放进字典对象中,循环的时候如果在字典对象中已经存在了就说明重复了

 

ExpandedBlockStart.gif 运用字典方式
var  el  =  document.getElementsByTagName( " * " );

// 创建字典对象
var  d  =   new  ActiveXObject( " Scripting.Dictionary " );

// 循环每一个节点
for  ( var  i  =   0 ; i  <  el.length; i ++ ) {

    
if  (el[i].id  !=   "" ) {

        
// 字典中是否已经存在
        
if  (d.Exists(el[i].id)) {

            
return  alert( " 有重复元素 "   +  el[i].id)

        }

        
else  {

            d.add(el[i].id, 
"" )

        }

    }

}

 

 

总结:ActiveXObject对象可以研究一下,后面再来讨论。

 

方法三:利用对象中的hasOwnProperty方法

 

该方法与上面的利用字典差不多是一个意思,巧妙的运用了hasOwnProperty方法。

ExpandedBlockStart.gif 利用对象中的hasOwnProperty()方法
var  el  =  document.getElementsByTagName( " * " );

// 声明一个对象
var  obj  =  {};

for  ( var  i  =   0 ; i  <  el.length; i ++ ) {

    
if  (el[i].id  !=   "" ) {

        
// obj对象中是否已经有该属性
         if  (obj.hasOwnProperty(el[i].id)) {

            
return  alert( " 有重复 "   +  el[i].id)

        }

        
// 没有就给该对象添加这么一个属性,赋值为空
         else  {

            obj[el[i].id] 
=   '' ;

        }

    }

}

 

 

 

另外补充知识:

 

JavaScriptActiveXObject对象是启用并返回 Automation 对象的引用。通过它可以访问windows的本地文件系统和应用程序,比如:有的时候我们需要得到用户的机器名,用户名,得到某个文件的信息,或者读写注册表,或者启动计算器、outlook等应用程序。

 

var WshNetwork = new ActiveXObject("WScript.Network");

var pnsys = new ActiveXObject("WScript.shell");

var fs = new ActiveXObject("scripting.filesystemobject"); //文件信息相关

 

new ActiveXObject("Scripting.Dictionary");//字典对象

它的集合中每一项包含两个属性一个是键值,一个是值,即(keyvalue),其中value可以是任何类型的对象或数值。

 

示例代码:

var obj = new ActiveXObject("Scripting.Dictionary"); //创建对象

obj.Add("hello", null); //增加新项

obj.Item("hello") = "Chiweiyao"; //给新增添的项赋值

obj.Add("world", null);

obj.Item("world") = "Greate";

 

var keys = obj.Keys().toArray(); //obj对象的键值转换成数组

for (var i = 0; i < keys.length; i++) {

    if (obj.Exists(keys[i])) {//判断对象集合中是否存在指定键值的项

        obj.Item(keys[i]) = null;

        obj.Remove(keys[i]); //删除指定键值项

    }

}

最常用的貌似是AJAX中的ActiveXObject("Microsoft.XMLHTTP");

 

最杯具的是ActiveXObject只有IE支持,如果要FF支持有两个方法:
1、使用IETab插件,在Firefox下调用IE浏览器内核
2、使用npActivexPlugin插件

转载于:https://www.cnblogs.com/meiqunfeng/archive/2010/05/19/1739553.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值