通过 TagName 获取属性 - JS
getAttribute by TagName - JS
我的具体情况是我正在尝试 remove/make 停用 DOM 中的 link 元素(我无法控制它的生成)。我打算这样做的方法是用一个无意义的值替换 'href' 属性——我选择这样做而不是简单地使用 disable = true
的原因是这样函数可以在其他场合重复使用以更改其他属性。
我遇到的问题是 .getAttribute
returns 错误 "TypeError: elemArr.hasAttribute is not a function"。
function removeLink(elem, att, value, replacement) {
var elemArr = document.getElementsByTagName(elem);
for (var i = 0; i < elemArr.length; i++) {
var workingAtt = elemArr.hasAttribute(att);
if (workingAtt.value === filePath) {
elemArr[i].setAttribute(att, replacement);
}
}
}
removeLink("link", "href", "filePath", "#");
非常感谢任何有关抛出此错误原因的帮助。
.hasAttribute()
returns 布尔值 true
或 false
。因此,workingAtt
将等于 true
或 false
。布尔值不是 HTMLElements,因此它们没有 value
属性。这就是出现错误的原因。
您似乎在尝试执行类似 select elements where there is a href attribute
的操作。
如果是这样,您可以过滤它们:
var myElements = [];
[].filter.call(elemArr, function(el) {
if(el.hasAttribute(att)) {
myElements.push(el);
}
});
// then, do something with myElements
其中发生的事情是 elemArr 是一个数组,而数组没有 hasAttribute 方法。将您的代码重写为
function removeLink(elem, att, value, replacement) {
var elemArr = document.getElementsByTagName(elem);
for (var i = 0; i < elemArr.length; i++) {
//this line here wasn't referring to a specific node but the array
var workingAtt = elemArr[i].hasAttribute(att);
if (workingAtt && elemArr[i].getAttribute(att) === value) {
elemArr[i].setAttribute(att, replacement);
}
}
}
removeLink("link", "href", "filePath", "#");
它会起作用的。
更简洁的方法是这样的:
function removeLink(elem, att, value, replacement){
var selector = elem + '['+ att +'="'+ value +'"]';
[].forEach.call(document.querySelectorAll(selector), function(node){
node.setAttribute(att, replacement);
});
}
它做的事情基本相同,但更短、更明确。
您的代码中有几个错误:
elemArr.hasAttribute
而不是 elemArr[i].hasAttribute
.
var workingAtt = elemArr.hasAttribute(att);
— 这里,workingAtt
将是一个布尔值,workingAtt.value
是不存在的。您应该使用 elemArr[i].getAttribute(att)
,稍后使用 workingAtt
,而不是 workingAtt.value
(它将再次不存在!)。
if (workingAtt.value === filePath)
您正在与 filePath
进行比较,而您绝对应该与传入函数的 value
进行比较。
我的具体情况是我正在尝试 remove/make 停用 DOM 中的 link 元素(我无法控制它的生成)。我打算这样做的方法是用一个无意义的值替换 'href' 属性——我选择这样做而不是简单地使用 disable = true
的原因是这样函数可以在其他场合重复使用以更改其他属性。
我遇到的问题是 .getAttribute
returns 错误 "TypeError: elemArr.hasAttribute is not a function"。
function removeLink(elem, att, value, replacement) {
var elemArr = document.getElementsByTagName(elem);
for (var i = 0; i < elemArr.length; i++) {
var workingAtt = elemArr.hasAttribute(att);
if (workingAtt.value === filePath) {
elemArr[i].setAttribute(att, replacement);
}
}
}
removeLink("link", "href", "filePath", "#");
非常感谢任何有关抛出此错误原因的帮助。
.hasAttribute()
returns 布尔值 true
或 false
。因此,workingAtt
将等于 true
或 false
。布尔值不是 HTMLElements,因此它们没有 value
属性。这就是出现错误的原因。
您似乎在尝试执行类似 select elements where there is a href attribute
的操作。
如果是这样,您可以过滤它们:
var myElements = [];
[].filter.call(elemArr, function(el) {
if(el.hasAttribute(att)) {
myElements.push(el);
}
});
// then, do something with myElements
其中发生的事情是 elemArr 是一个数组,而数组没有 hasAttribute 方法。将您的代码重写为
function removeLink(elem, att, value, replacement) {
var elemArr = document.getElementsByTagName(elem);
for (var i = 0; i < elemArr.length; i++) {
//this line here wasn't referring to a specific node but the array
var workingAtt = elemArr[i].hasAttribute(att);
if (workingAtt && elemArr[i].getAttribute(att) === value) {
elemArr[i].setAttribute(att, replacement);
}
}
}
removeLink("link", "href", "filePath", "#");
它会起作用的。
更简洁的方法是这样的:
function removeLink(elem, att, value, replacement){
var selector = elem + '['+ att +'="'+ value +'"]';
[].forEach.call(document.querySelectorAll(selector), function(node){
node.setAttribute(att, replacement);
});
}
它做的事情基本相同,但更短、更明确。
您的代码中有几个错误:
elemArr.hasAttribute
而不是elemArr[i].hasAttribute
.var workingAtt = elemArr.hasAttribute(att);
— 这里,workingAtt
将是一个布尔值,workingAtt.value
是不存在的。您应该使用elemArr[i].getAttribute(att)
,稍后使用workingAtt
,而不是workingAtt.value
(它将再次不存在!)。if (workingAtt.value === filePath)
您正在与filePath
进行比较,而您绝对应该与传入函数的value
进行比较。