27

我有一个定义如下的按钮：

<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.

4

3 回答 3

36

您可以通过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());
于 2012-04-27T13:39:18.450 回答
18

如果您试图完全通过其文本内容来定位按钮，我会获取所有按钮的列表并遍历它们以找到这个：

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];
  }  
}

当然，如果这个按钮的内容有一点改变，你的代码也需要更新。

于 2012-04-27T15:42:48.000 回答
1

一个用于根据其文本查找按钮的衬垫。

const findButtonByText = text => 
  [...document.querySelectorAll('button')]
    .find(btn => btn.textContent.includes(text))
于 2020-10-29T11:17:31.513 回答