我有一个定义如下的按钮:
<button type="button" id="ext-gen26" class=" x-btn-text">button text here</button>
我试图根据文本值来获取它。然而,它的属性都不包含文本值。从外观来看,它是以一种非常自定义的方式生成的。
除了浏览 HTML 文本之外,有谁知道以编程方式查找该值的方法吗?除了属性之外?
忘记了另一件事,这个按钮的 id 会定期更改,并且使用 jQuery 获取它会导致由于某种原因破坏页面。如果您需要任何关于我为什么需要这个的背景信息,请告诉我。
这是我试图使用的 JavaScript:
var all = document.getElementsByTagName('*');
for (var i=0, max=all.length; i < max; i++)
{
var elem = all[i];
if(elem.getAttribute("id") == 'ext-gen26'){
if(elem.attributes != null){
for (var x = 0; x < elem.attributes.length; x++) {
var attrib = elem.attributes[x];
alert(attrib.name + " = " + attrib.value);
}
}
}
};
它只返回代码中定义的三个属性。
innerHTML
、text
和 textContent
- 全部返回为 null
。
您可以通过
textContent
/innerText
属性(取决于浏览器)来做到这一点。这是一个无论浏览器使用哪个属性都适用的示例:
var elem = document.getElementById('ext-gen26');
var txt = elem.textContent || elem.innerText;
alert(txt);
http://jsfiddle.net/ThiefMaster/EcMRT/
您也可以使用 jQuery 来完成:
alert($('#ext-gen26').text());
如果您尝试完全通过文本内容来定位按钮,我会获取所有按钮的列表并循环遍历它们以找到这个按钮:
function findButtonbyTextContent(text) {
var buttons = document.querySelectorAll('button');
for (var i=0, l=buttons.length; i<l; i++) {
if (buttons[i].firstChild.nodeValue == text)
return buttons[i];
}
}
当然,如果这个按钮的内容发生一点点变化,你的代码就需要更新。
一个用于根据文本查找按钮的衬垫。
const findButtonByText = text =>
[...document.querySelectorAll('button')]
.find(btn => btn.textContent.includes(text))
如果您的按钮没有任何标识符,例如
id
或 class
,您还可以使用 Event
对象获取文本值。例如:
html
<button onClick={handleClick}>Click</button>
javascript
const handleClick = (event) => {
const btntext = Object.values(event.target.innerText).join('');
...
}