Question

我正在制作一个小的Chrome扩展程序，为此我需要从DOM中抓取div进行操作。我得到了DOM，但是我在抓取所需的div时遇到了麻烦。这是它的代码。

<div id=":ik" class="Am Al editable LW-avf" hidefocus="true" aria-label="Message Body" g_editable="true" role="textbox" contenteditable="true" tabindex="1" style="direction: ltr; min-height: 137px;"><br></div>

我已尝试getElemenyByID和document.attrib，但都返回null。关于如何获取将在div内输入的文本值的任何建议？

Answer 1

带有属性选择器的

querySelector或querySelectorAll应该这样做：

// The first element that matches (or null if none do):
var element = document.querySelector('[aria-label="Message Body"]');
// A list of matching elements (empty if none do):
var list = document.querySelectorAll('[aria-label="Message Body"]');

如果该ID稳定，只需：

var element = document.getElementById(":ik");

（请注意，d是小写的;在您的示例中，您使用大写字母。）

无论哪种方式，请确保您的代码在页面加载之前不会运行，方法是将其包含在清单中：

"run_at": "document_end"

this answer中的

（一点点）更多，引用this Google documentation。

Answer 2

可能你正在尝试在元素加载到页面之前获取元素。

如果是这样，您可以将代码包装到DOMContentLoaded事件中：

document.addEventListener('DOMContentLoaded', function() {
  console.log(document.getElementById(':ik').textContent);
});

但如果您真的想通过aria标签获取元素，那么您可以这样做：

document.querySelector('div[aria-label="Message Body"]');

但是这种方式的性能要差得多，你也需要完全按照我上面提到的那样做。

Answer 3

这是透明的解决方案，检查它将永远有效

var getElementsByAttribute = function (attr, value) {
var match = [];

var elements = document.getElementsByTagName("*");

for (var ii = 0, ln = elements.length; ii < ln; ii++) {

if (elements[ii].hasAttribute(attr)) {

  /* If a value was passed, make sure it matches the element's */
  if (value) {

    if (elements[ii].getAttribute(attr) === value) {
      match.push(elements[ii]);
    }
    } else {

    match.push(elements[ii]);
  }
}
 }
  return match;
};

(function () {
  var baz = getElementsByAttribute('data-foo', 'bar');
  for (var xx = 0, ln = baz.length; xx < ln; xx++) {
    baz[xx].innerHTML = 'These *are* the droids we are looking for!';
 }
})();

通过aria标签获取HTML元素

3 个答案: