修改 DOM 中的元素答案

【问题标题】：Modifying elements in DOM修改 DOM 中的元素
【发布时间】：2015-06-12 00:51:48
【问题描述】：

在我的 html 中，我想获取属性为“accesskey”的所有元素，当我获取这些元素时，我想添加一个属性来修改它们以给它们加下划线（下面的示例）。我查看了mdn 中的 document.evaluate，我可以使用 XPath 来获取所有带有 accesskey 的元素。但是我读到我不能修改 XPath 的元素。我想请教我应该使用哪些方法来实现这一目标。

<label accesskey="L">Last Name</label>

变成：

<label accesskey="L"><u>L</u>ast Name</label>

【问题讨论】：

很难理解为什么这是在客户端而不是在服务器上完成的。如果它知道访问密钥，为什么不能突出显示它？
@RobG 我还不是网络专家，如果这可以在服务器中完成，您能否向我推荐一些我可以研究的主题，以便了解它是如何完成的。
@user880772 是的，CSS 是一个选项。我来看看属性选择器
@user880772 它取决于访问密钥中指定的字母。我查看了 css 选择器，我认为它不能做到这一点。我相信它只能以编程方式完成还是我错了？我仍然开始学习网络，所以任何我可以学习的建议都值得赞赏

标签： javascript html xpath

【解决方案1】：

你可以使用带有 querySelectorAll() 的选择器

var els = document.querySelectorAll('[accesskey]'),
  el, key;
for (var i = 0; i < els.length; i++) {
  el = els[i];
  key = el.getAttribute('accesskey');
  el.innerHTML = el.innerHTML.replace(key, '<u>' + key + '</u>')
}

&lt;label accesskey="L"&gt;Last Name&lt;/label&gt;

【讨论】：

我将此标记为答案，但我当然研究了它的性能，发现 querySelectorAll 存在性能问题。我正在分享这个处理性能 [问题] (ryanmorr.com/…) 的代码解决方案