私はこのようなものをJavaScriptで書きたいです:
var all_headings = document.getElementsByTagName("h1,h2,h3,h4,h5,h6");
その場合、all_headings
は、h1
またはh2
またはh3
...であるすべての要素のリストになります。もちろん、それらはドキュメントに表示される順序です。
どうすればいいのですか?
最新のブラウザでできること
document.querySelectorAll("h1, h2, h3, h4, h5, h6")
または、jQueryを使用してブラウザー間の互換性を取得することもできます。
$("h1, h2, h3, h4, h5, h6")
JQueryを使用している場合は、使用できます
$(":header")
jQueryドキュメントの例
<script>$(":header").css({ background:'#CCC', color:'blue' });</script>
ブラウザ間のDOM選択が必要なだけの場合は、jQueryをロードする必要はありません。
代わりに Sizzle をロードするだけです。 jQueryが使用するセレクターエンジンです。
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);
}
単純なものには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]));
ライブラリのみでJavaScriptのみを使用するソリューションを提供することによって質問に答えるのは/ only /なので、QuentinUKがここでの最良の答えです。
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;
}
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;
}
それらに共通のクラス名を付け、次にgetElementsByClassName
を使用します