Javascript 通过 aria 标签获取 HTML 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32733897/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get HTML element via aria label
提问by Irtza.QC
I'm making a small chrome extension and for it I need to grab a divfrom the DOM to manipulate. I get the DOM but I'm having trouble grabbing the required div. Here's the code for it.
我正在制作一个小的 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>
I've tried getElemenyByID, and document.attribbut both return null. Any advice on how to get the value of the text that will be input inside this div?
我试过了getElemenyByID，document.attrib但都返回了null。关于如何获取将在 this 中输入的文本值的任何建议div？
回答by T.J. Crowder
querySelectoror querySelectorAllwith an attribute selector should do it:
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"]');
Or if that ID is stable, simply:
或者，如果该 ID 是稳定的，只需：
var element = document.getElementById(":ik");
(Note that the dis lower case; you have it in upper case in your example.)
（请注意，d是小写；在您的示例中，它是大写的。）
Either way, make sure your code doesn't run until the page is loaded, by including this in your manifest:
无论哪种方式，通过在清单中包含以下内容，确保您的代码在页面加载之前不会运行：
"run_at": "document_end"
(A little)more in this answer, which references this Google documentation.
回答by Buzinas
Probably you're trying to get the Element before it's even loaded on the page.
可能您试图在 Element 加载到页面之前获取它。
If so, you can wrap your code into the DOMContentLoadedevent:
如果是这样，您可以将代码包装到DOMContentLoaded事件中：
document.addEventListener('DOMContentLoaded', function() {
console.log(document.getElementById(':ik').textContent);
});
But if you really want to get the element by its arialabel, you can do that:
但是如果你真的想通过aria标签获取元素，你可以这样做：
document.querySelector('div[aria-label="Message Body"]');
But this way is much less performatic, and you'll need to do exactly what I've mentioned above too.
但是这种方式的性能要差得多，而且您还需要完全按照我上面提到的方式进行操作。
回答by Ahmer
this is the permenent solution check it it will work forever
这是永久解决方案检查它会永远工作
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!';
}
})();
