LoginSignup
0

More than 5 years have passed since last update.

HTML5のテンプレートとDomAPIを使ったチェッカー

Last updated at Posted at 2018-12-09

概要

HTML5のテンプレートとDomAPIの仕様を紹介するためにチェッカーをクライアント側で書く。

HTML5テンプレート

index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Front End Checker page</title>
    <meta name="description" content="Front End Check url=''">

    <link rel="stylesheet" href="css/checker.css">

    <script src="js/checker.js"></script>
  </head>

  <body>
    <header>
    </header>

    <main>
    </main>

    <footer>
    </footer>
  </body>
</html>

最初に必ず、<!doctype html>で文章型をHTML5で宣言する
<html>は必ずページ全体を覆うようにする。lang属性はなるべくつける。
<head>は省略しない
文字コーディング<meta charset="XXX">は必ずする。なるべくutf-8にする。
ビューポート<meta name="viewport" ...>モバイル対応を考える場合は必ず入れる
タイトル<title>Title</title>は必ず入れる
概要<meta name="description" content="内容">はなるべく入れる。

<body>は省略しない
中身は適当

checker.js

文章型宣言(DTD)の取得

document.decltypeを通じて行う。値は{ name:XXX, internalSubset:XXX, pubicId:id, systemId: id}の様な形をしている。宣言がない場合はnullになるのでdocument.decltype.nameを見れば十分である。

タイトルの取得

document.titleから取得します。

lang属性の取得

document.documentElement(トップノード=<html>)から取得するlangに入っている。何も設定しないと空文字。

文字コーディング(Charset)の取得

document.characterSetから取得する。何も設定しない場合はブラウザのデフォルトの値が入っている。
もし先頭の宣言までチェックしたい場合は以下のようなチェックを入れるといい

checkFirstCharset.js
let encoding;
if( document.head.children[0].tagName==='META' && document.head.children[0].attributes['charset']!==null ){
   encoding=document.characterSet;
}

meta要素の取得

head以下のメタタグはdocument.headのchildrenから取得できます。
このChildrenはJavaScriptの配列ではないのでfor ofが使えない場合があるのでスプレッド構文を使って配列に直します。

getMeta.js
for( const tag of [...document.head.children] ){
   if( tag.tagName==='META' && tag.name!=null && tag.name!=='' ) console.log(tag.name,tag.content);
}

以上をまとめるとこのようなJavaScriptを使うことで色々な情報をページに表示できます

checker.js
document.addEventListener('DOMContentLoaded', ()=>{
    console.log('===== HTML5 Checker START =====');
    const config={};

    config.doctype = document.doctype!=null ? document.doctype.name : null;
    config.lang= document.documentElement.lang!=='' ? document.documentElement.lang : null;
    if( document.head.children[0].tagName==='META' && document.head.children[0].attributes['charset']!==null ){
        config.encoding=document.characterSet;
    }


    config.meta={};
    for( const tag of [...document.head.children] ){
        if( tag.tagName==='META' && tag.name!=null && tag.name!=='' ) config.meta[tag.name]=tag.content;
    }

    console.log(config);
    const header=document.querySelector('header');
    header.innerHTML+='文章型宣言 : '+config.doctype+'<br>';
    header.innerHTML+='言語 : '+config.lang+'<br>';
    header.innerHTML+='タイトル : '+document.title+'<br>';
    header.innerHTML+='概要 : '+config.meta.description+'<br>';
    console.log(header);

    console.log('===== HTML5 Checker FINISH =====');
});

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0