[英]Testing all element nodes in the DOM for attribute existence
我正在尝试查找页面内的任何标签是否包含js事件属性,例如onload,onunload,onfocus等,……为此,我要检查一系列事件(我想我有它们所有):
var attr = [
"onLoad",
"onunload",
"onclick",
"ondblclick",
"onmousedown",
"onmouseup",
"onmouseover",
"onmousemove",
"onmouseout",
"onfocus",
"onblur",
"onkeypress",
"onkeydown",
"onkeyup",
"onsubmit",
"onreset",
"onselect",
"onchange"];
然后获取所有elementsByTagName并想检查其属性:
var getAttrs = function() {
var i = 0,
j,
all = document.getElementsByTagName('*'),
max = all.length,
eventsLen = attr.length;
for (; i < max; i++) {
console.log('iterating through objects');
for (j = 0; j < eventsLen; j++) {
if (all[i].hasAttribute(attr[j])) {
console.log('found an instance of an intrinsec event', attr[j]);
}
}
}
};
这是行不通的,并且我没有获得要查找的任何属性。
另外,我想在所有使用javascript:的标记中找到所有属性(例如<a href="javascript:void(0)">中的)。我知道如何将其添加到函数的逻辑中吗?
谢谢!
如果要获取具有任一属性的所有元素,则可以使用以下代码:
var attr = ["onLoad", "onunload", "onclick", "ondblclick", "onmousedown",
"onmouseup", "onmouseover", "onmousemove", "onmouseout", "onfocus",
"onblur", "onkeypress", "onkeydown", "onkeyup", "onsubmit", "onreset",
"onselect", "onchange", "href^='javascript:'"];
var selector = "[" + attr.join("],[") + "]";
//selector looks like "[onLoad][onunload]...[href^='javascript:']"
var eitherAttribute = document.querySelectorAll(selector);
for(var i=0, len=eitherAttribute.length; i<len; i++){
console.log(eitherAttribute[i]); //Logs the element
}
如果要选择与多个属性匹配的所有元素,请使用:
//Example: onclick, AND href starting with javascript:
document.querySelectorAll("[onclick][href^='javascript:']");
有关更多信息,请参见MDN: document.querySelectorAll
。
如果需要更灵活的选择器,请查看: MDN:选择器
更改:
if (all[i].hasAttribute(attr[j])) {
至:
if (all[i][attr[j]]) {
因为它也可以是属性,而不是属性。
这就是我要做的:
var checkForEventAttrs = (function () {
var eventAttrs = [ /* a list of attribute name strings */ ];
function walkTheDOM( node, func ) {
func( node );
node = node.firstElementChild;
while ( node ) {
walkTheDOM( node, func );
node = node.nextElementSibling;
}
}
return function () {
walkTheDOM( document.body, function ( node ) {
eventAttrs.forEach( function ( eventAttr ) {
if ( node.hasAttribute( eventAttr ) ) {
console.log( 'The attribute ' + eventAttr + ' found.' );
}
});
});
};
})();
然后只需调用该函数即可将这些属性记录到控制台中:
checkForEventAttrs();
现场演示: http : //jsfiddle.net/F5AEy/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.