如何在 javascript 中获取所有 h1、h2、h3 等元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7065562/
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
How do I get all h1,h2,h3 etc elements in javascript?
提问by Eyal
I want to write something like this in javascript:
我想在 javascript 中写这样的东西：
var all_headings = document.getElementsByTagName("h1,h2,h3,h4,h5,h6");
all_headingswould then be a list of all elements that are h1or h2or h3... And in the order that they appear in the document, of course.
all_headings那么将是全部元素的列表h1或h2或h3......而它们出现在文档中，当然顺序。
How do I do it?
我该怎么做？
回答by Alex Turpin
With modern browsers you can do
使用现代浏览器，您可以做到
document.querySelectorAll("h1, h2, h3, h4, h5, h6")
Or you could get cross-browser compatibility by using jQuery:
或者您可以使用 jQuery 获得跨浏览器兼容性：
$("h1, h2, h3, h4, h5, h6")
回答by GibboK
If you are using jQuery you can use
如果您使用的是 jQuery，则可以使用
$(":header")
example from jQuery documentation
jQuery 文档中的示例
<script>$(":header").css({ background:'#CCC', color:'blue' });</script>
回答by user113716
If you're just needing some cross-browser DOM selection, there's no need to load jQuery.
如果您只是需要一些跨浏览器的 DOM 选择，则无需加载 jQuery。
Just load Sizzleinstead. It's the selector engine that jQuery uses.
只需加载Sizzle。它是 jQuery 使用的选择器引擎。
Example:http://jsfiddle.net/77bMG/
示例：http : //jsfiddle.net/77bMG/
var headings = Sizzle('h1,h2,h3');
for( var i = 0; i < headings.length; i++ ) {
document.write('<br>');
document.write(i + ' is ' + headings[i].innerHTML);
}
Or without any library code, you can walk the DOM, and push the headings into an Array.
或者没有任何库代码，您可以遍历 DOM，并将标题推送到一个数组中。
Example:http://jsfiddle.net/77bMG/1/
示例：http : //jsfiddle.net/77bMG/1/
var headings = [];
var tag_names = {
h1:1,
h2:1,
h3:1,
h4:1,
h5:1,
h6:1
};
function walk( root ) {
if( root.nodeType === 1 && root.nodeName !== 'script' ) {
if( tag_names.hasOwnProperty(root.nodeName.toLowerCase()) ) {
headings.push( root );
} else {
for( var i = 0; i < root.childNodes.length; i++ ) {
walk( root.childNodes[i] );
}
}
}
}
walk( document.body );
for( var i = 0; i < headings.length; i++ ) {
document.write('<br>');
document.write(i + ' is ' + headings[i].innerHTML);
}
回答by TJHeuvel
You dont need jQuery for something simple; try his:
你不需要 jQuery 来做一些简单的事情；试试他的：
var tags = [ "h1","h2","h3" ];
var all_headings = [];
for(var i = 0; i < tags.length; i++)
all_headings = all_headings.concat(document.getElementsByTagName(tags[i]));
回答by Jan Kyu Peblik
QuentinUK's is the best answer here, as it is the /only/ one that answers the question by providing a solution using only JavaScript with no libraries.
QuentinUK 是这里的最佳答案，因为它是 /only/ 一个通过提供仅使用没有库的 JavaScript 的解决方案来回答问题的答案。
for (i=1; i<=6; i++) {
var headers = document.getElementsByTagName('h'+i);
for (j=0; j<headers.length; j++) {
headers[j].className = 'h';
}
}
var headers = document.getElementsByClassName('h');
for (i=0; i<headers.length; i++) {
headers[i].innerHTML += ' '+i;
}
回答by Ramil Shavaleev
Function without jQuery and document.querySelectorAll
没有 jQuery 和 document.querySelectorAll 的函数
function get_all_h(document) {
var arr = [];
if (!document) return arr;
var all_el = document.getElementsByTagName('*');
for (var i = 0, n = all_el.length; i < n; i++) {
if (/^h\d{1}$/gi.test(all_el[i].nodeName)) {
arr.push(all_el[i]);
}
}
return arr;
}
回答by QuentinUK
Give them a common class name then use getElementsByClassName
给他们一个通用的类名，然后使用 getElementsByClassName
