Javascript获取自定义按钮的文本值

时间:2012-04-27 13:37:24

标签: javascript html

我有一个按钮,定义如下:

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

3 个答案:

答案 0 :(得分:22)

您可以通过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());

答案 1 :(得分:13)

如果你试图通过文本内容完全找到按钮,我会抓住所有按钮的列表并循环浏览它们以找到这个按钮:

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

当然,如果此按钮的内容发生变化,您的代码将需要更新。

答案 2 :(得分:0)

一个基于其文本查找按钮的衬里。

const findButtonByText = text => 
  [...document.querySelectorAll('button')]
    .find(btn => btn.textContent.includes(text))