JavaScript - ドキュメントオブジェクトモデル(tagName, nodeType, id, className)

初めてのJavaScript 第2版
(オライリージャパン)
Shelley Powers (著)
武舎 広幸、武舎 るみ (訳)

開発環境

• OS X Mavericks - Apple(OS)
• Emacs (CUI)、BBEdit - Bare Bones Software, Inc. (GUI) (Text Editor)
• Safari、Firefox + Firebug (Webプラウザ、プラグイン)
• JavaScript (プログラミング言語)
• jQuery (JavaScript Library)

『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリージャパン、2009年、ISBN978-4-87311-425-5) の11章(ドキュメントオブジェクトモデル)、練習問第11-2、11-3、11-4、11-5、11-6.を解いてみる。

その他参考書籍

• JavaScript 第6版
• JavaScriptリファレンス 第6版
• JavaScriptクックブック
• jQueryクックブック

練習問第11-2、11-3、11-4、11-5、11-6.

1.

全てのHTTML要素がサポートしている属性は、

• id
• title
• lang
• dir
• className

の5つ。

コード(BBEdit)

var result = '',
    children = $('body').children(),
    divs = $('div'),
    elem2 = $('#elem2'),
    i,
    max;
result += 'body要素の子要素の要素の種類(tagName)\nn';
for (i = 0, max = children.length; i < max; i += 1) {
    result += children[i].tagName + '\n';
}
result += 'body要素の子要素の要素の種類(nodeType)\nn';
for (i = 0, max = children.length; i < max; i += 1){
    result += children[i].nodeType + '\n';
}
result += 'ページ上のすべてのdiv要素のid(識別子)\n';
for (i = 0, max = divs.length; i < max; i += 1) {
    if (divs[i].id){
        result += divs[i].id + '\n';
    }
}
result += $('#elem1').text() + '\n' + $('.thediv:eq(0)').text() + '\n';
elem2.html('<p>11-6. 段落</p>');
$('#pre0').text(result);

11.5

11-6. 見出し