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

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

<body>

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

</form>

</body>

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

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

方法一：巧用document.getElementById

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

代码

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放进字典对象中，循环的时候如果在字典对象中已经存在了就说明重复了

运用字典方式

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方法。

利用对象中的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] = '';

}

另外补充知识：

JavaScript中ActiveXObject对象是启用并返回 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");//字典对象

它的集合中每一项包含两个属性一个是键值，一个是值，即（key，value），其中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

一道JS面试题目引发的思考相关推荐

一道面试题目引发的思考
起因多列布局是前端一个经典的反复被提及的面试题目,最典型的即两列,左列定宽菜单栏,右列变宽为内容区域. 通常得到的答案无外乎左列浮动定宽,然后右列或浮动,或设置外边距,或绝对定位等等.偶尔会有面试者 ...
前置++与后置++之一道简单的题目引发的思考
引言昨晚一时兴起,我脑子就问自己下面的代码会输出什么,也不知道我脑子为什么有这个代码模型,只是模糊的有些印象: #include <stdio.h> #include <stdli ...
三只青蛙的故事：一道脑筋急转弯题目引发的思考
一道脑筋急转弯题目是这样的:有三只青蛙在河中的一片叶子上顺水漂流.其中一只想跳到河里.在叶子上还剩几只青蛙? 大多数人会回答还有两只.(我刚看到此题时认为一只也没有,因为一只青蛙跳了之后剩下的两只也会 ...
由Node.js事件驱动模型引发的思考
引言近段时间听说了Node.js,很多文章表述这个事件驱动模型多么多么优秀,应用在服务器开发中有很大的优势,本身对此十分感性去,决定深入了解一下,由此也引发了一些对程序设计的思考,记录下来. 什么是 ...
一道Java面试题目——随想+心得
原题目:Java的一道面试题----静态变量初始化过程题目如下: public class Test{ private static Test tester = new Test(); //step ...
php中unset面试题,php unset和引用——由一道php面试题引发的思考
$test="aaaaa"; $abc=&$test; unset($test); echo $abc; 为什么结果会输出aaaaa呢,$test不是销毁了吗?$abc引用 ...
对一道SQL语句题目的再思考
原题如下: 有班级表CLASS和学生表STUDENT,两个表通过class_id进行关联,其表结构如下: 1.写出创建学生表STUDENT的SQL语句,注意添加相关的约束,要求表明.字段名都是英文. ...
一道大厂Python面试题，4种解法，从青铜到王者引发的“思考”！
"菜鸟学Python",第"518"篇原创金九银十应该是校招的黄金时间,大家都知道去大厂面试,算法是一个必须要过的关,无论是笔试还是面试的环节都需要.而算法这 ...
一道很有意思的面试题目，快加入到这场头脑风暴游戏里吧~
小伙伴们,小叶秋最近看到一个面试题目,感觉挺有意思的,大意如下: ok,大家看到这个题,可以先理解下,这里启动了两个线程,a 和 b,但是虽然说 a 在 b 之前 start,不一定就可以保证线程 a ...

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

一道JS面试题目引发的思考相关推荐

最新文章

热门文章