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插件

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。