js 查找页面重复元素

时间 2019-11-10

标签查找页面重复元素栏目 JavaScript 繁體版

原文原文链接

<body>html

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

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

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

<div id="Div3"></div>浏览器

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

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

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

</form>orm

</body>server

找出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支持有两个方法：一、使用IETab插件，在Firefox下调用IE浏览器内核二、使用npActivexPlugin插件