如何在javascript中获取所有h1,h2,h3等元素？

Question

我想在javascript中写这样的东西:

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

all_headings然后,它将是所有元素的列表,或者...... h1或者按照它们在文档中出现的顺序,当然.h2h3

我该怎么做？

Answer 1

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

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

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

$("h1, h2, h3, h4, h5, h6")

Answer 2

如果你使用的是jQuery,你可以使用

$(":header")

来自jQuery文档的示例

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

文档

Answer 3

如果您只是需要一些跨浏览器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);
}