概要
HTML5のテンプレートとDomAPIの仕様を紹介するためにチェッカーをクライアント側で書く。
HTML5テンプレート
<!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から取得する。何も設定しない場合はブラウザのデフォルトの値が入っている。
もし先頭の宣言までチェックしたい場合は以下のようなチェックを入れるといい
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が使えない場合があるのでスプレッド構文を使って配列に直します。
for( const tag of [...document.head.children] ){
if( tag.tagName==='META' && tag.name!=null && tag.name!=='' ) console.log(tag.name,tag.content);
}
以上をまとめるとこのようなJavaScriptを使うことで色々な情報をページに表示できます
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 =====');
});