Question

也许我的搜索不对，但是我有一个简单的问题，我找不到答案。我有一组带有特定文本的按钮。由于页面是动态的，具体取决于用户的选择，因此可能会剪切五个按钮。

<button>Cut</button>
<button>Copy</button>
<button>Speak</button>
<button>Fullscreen</button>

上面您可以看到一个组，但是可能有相同的按钮被复制了10次。我想通过获取它们的值来更改这些按钮的文本。例如：

获取所有带有文本"Cut"的按钮并将其值更改为"foo"

然后，我想对其他按钮执行与其他文本类似的操作。该怎么做？

Answer 1

使用document.querySelectorAll选择所有按钮，并使用forEach循环遍历它们。使用textContent检查他们的文本，如果剪切，则将其设置为 foo

document.querySelectorAll('button').forEach((e)=>e.textContent=='Cut'?e.textContent="foo":false)

<button>Cut</button>
<button>Copy</button>
<button>Cut</button>
<button>Speak</button>
<button>Cut</button>
<button>Fullscreen</button>
<button>Cut</button>

Answer 2

我建议使用document.getElementsByTagName()获取所有按钮，并根据内容进行过滤。然后，您可以遍历过滤后的数组并执行所需的任何修改：

// get all buttons as an array
const buttons = Array.from(document.getElementsByTagName("button"));

// filter the array using a strict string equality check
const cutButtons = buttons.filter(button => button.textContent === "Cut");

// perform your modifications
cutButtons.forEach(button => {
   button.textContent = "foo";
});

Answer 3

您可以使用querySelectorAll()来获取所有按钮。然后遍历它们以检查 textContent 来修改按钮：

var btn = [].slice.call(document.querySelectorAll('button'));

btn.forEach(function(b){
  if(b.textContent == 'Cut')
    b.textContent = 'foo';
});

<button>Cut</button>
<button>Copy</button>
<button>Speak</button>
<button>Fullscreen</button>
<button>Cut</button>

Answer 4

使用getElementsByTagName（）按标签名称获取按钮，然后使用in for循环检查内容，并使用Node.textContent将其更改为“剪切”

var cut=document.getElementsByTagName("button");
    for(var i=0;i<cut.length;i++){
        if(cut[i].textContent=="cut"){
            cut[i].textContent="foo"
    }
}

Javascript按值更改按钮文本

4 个答案: