通过aria标签获取HTML元素

Question

我正在制作一个小的chrome扩展,为此我需要div从DOM中抓取一个来操作.我得到了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"

(一点点)在这个答案中更多,它引用了这个Google文档.

Answer 2

可能您试图在 Element 加载到页面之前获取它。

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

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

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

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

但是这种方式的性能要差得多，而且您还需要完全按照我上面提到的方式进行操作。