博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 查找页面重复元素
阅读量:5172 次
发布时间:2019-06-13

本文共 2572 字,大约阅读时间需要 8 分钟。

<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,获取的是第一个该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方法。

 

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/hongwei8455/p/4241715.html

你可能感兴趣的文章
美图秀秀美化图片之【增强】模块界面与功能设计
查看>>
数组的去重
查看>>
进程和线程的理解(转)
查看>>
程序员必知8大排序3大查找(三)
查看>>
Java 反射机制浅析
查看>>
课后作业
查看>>
秒杀多线程第四篇 一个经典的多线程同步问题
查看>>
微博客实现完毕
查看>>
oracle 中 cursor 与refcursor及sys_refcursor的区别 (转载)
查看>>
python编程练习:漏洞百出的四则运算器
查看>>
js对特殊字符转义、时间格式化、获取URL参数
查看>>
我 && yii2 (一)
查看>>
2019.01.01洛谷 P4725/P4726 多项式对数/指数函数(牛顿迭代)
查看>>
2019.02.12 bzoj3944: Sum(杜教筛)
查看>>
mkdir命令
查看>>
About ListView
查看>>
java的重载 和重写
查看>>
mediaplay抓图
查看>>
层的绝对定位
查看>>
gitlab 数据同步
查看>>