41

我想用javascript写这样的东西：

var all_headings = document.getElementsByTagName("h1,h2,h3,h4,h5,h6");

all_headings然后将是所有元素的列表h1or h2or h3... 当然，按照它们出现在文档中的顺序。

我该怎么做？

4

7 回答 7

74

使用现代浏览器，您可以做到

document.querySelectorAll("h1, h2, h3, h4, h5, h6")

或者您可以使用 jQuery 获得跨浏览器兼容性：

$("h1, h2, h3, h4, h5, h6")
于 2011-08-15T13:38:04.103 回答
19

如果您使用的是 jQuery，您可以使用

$(":header")

来自 jQuery 文档的示例

<script>$(":header").css({ background:'#CCC', color:'blue' });</script>

文档

于 2013-02-24T16:54:33.527 回答
7

如果您只需要一些跨浏览器的 DOM 选择，则无需加载 jQuery。

只需加载Sizzle 即可。它是 jQuery 使用的选择器引擎。

示例：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);
}

或者没有任何库代码，您可以遍历 DOM，并将标题推送到一个数组中。

示例：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);
}
于 2011-08-15T14:07:27.130 回答
3

你不需要 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]));
于 2011-08-15T13:42:48.217 回答
2

没有 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;
}
于 2017-02-14T07:30:17.293 回答
2

QuentinUK's 是这里最好的答案，因为它是 /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;
}
于 2016-02-13T06:26:29.690 回答
0

给他们一个通用的类名，然后使用getElementsByClassName

于 2011-08-15T13:40:25.333 回答