Welcome

カキノタblog

自分の興味あるテーマを中心に、図解多めに記事を作成していきたいと思います。

DOM domをJavaScriptオブジェクトやjsonに変換する - domJSON

console.log()でDOMのElementなどの中身を確認することがよくありますが、DOMツリーをコピーしたり、広い画面で一覧表示させたり、不要な部分を非表示にしたいというニーズは結構あると思います。そんな時は、domJSONというライブラリがとても役に立ちます。

https://github.com/azaslavsky/domJSON

Hello World

<body>
	<h1 id="m1">見出し1</h1>
</body>
let targetEl = document.querySelector('h1')
console.log(domJSON.toJSON(targetEl))

elementを指定してdomJSON.toJSON(targetEl)とするだけで変換完了です。すべてのノードが出力されるわけではなく、必要なものだけまとめられてコンパクトに表示されています。オプションで細かく調整できますが、デフォルトの設定も悪くありません。

（画像）dom treeとJavaScriptオブジェクトの比較

.toJSON() のoption

オプション名 型 Defaultの値 説明
absolutePaths Boolean|FilterList ['action', 'data', 'href', 'src'] 絶対パスに変換する
attributes Boolean|FilterList true attributesを出力する
computedStyle Boolean|FilterList false getComputedStyleを出力する
cull Boolean true nullやempty stringのプロパティは出力しない
deep Boolean|Integer true 子階層を辿る深さ
domProperties Boolean|FilterList true Domプロパティを出力する
htmlOnly Boolean true Nodes of type 1 (HTML Elements)のみ出力する
metadata Boolean true metadataを出力する
serialProperties Boolean|FilterList false シリアル化されたプロパティを出力する
stringify Boolean false string型で出力する

FilterList

引数にFilterListを指定できるオプション（attributesやdomProperties）は、FilterListに指定することで出力をフィルタリングすることができます。

使用例

以後こちらのHtmlコードを元に出力していきます。

<h1 id="m1" class="m" data-db="shop" data-tbl="area">見出し1</h1>

最小限出力

膨大なDomプロパティを全部見る必要もないし、デフォルトの設定でも多すぎると感じるかもしれません。必要な部分だけを表示させたいので、まずは最小限の情報だけ出力してみました。


let tarEl = document.querySelector("h1")
let opt = {
	attributes: false, // 属性を非表示
	deep : 0, // 子階層を辿らない
	metadata : false, // metadataを非表示
	domProperties : false // プロパティを非表示
}
let jo = domJSON.toJSON(tarEl,opt)
console.log(jo) // 結果表示

結果：

（画像）最小限出力

  • domProperties:falseとすることで、膨大なDomプロパティの出力をなくすことができます。但し、nodeTypeとtagName、nodeValue（存在する場合）だけは必ず出力される仕様です。
  • metadata:false。metadataは基本的に必要ないのでfalseがデフォルトでいいと思います。

最小限出力（子階層も含める）

let tarEl = document.querySelector("h1")
let opt = {
	attributes: false, // 属性を非表示
	metadata : false, // metadataを非表示
	domProperties : false // プロパティを非表示
}
let jo = domJSON.toJSON(tarEl,opt)
console.log(jo) // 結果表示

結果：

（画像）最小限出力（子階層を含む） 

deepオプションをつけなければデフォルトで子階層まですべてたどって出力されます。deep:2などとすれば2階層までというように限定もできます。

特定のattributeを除外して出力

FilterListを使うとフィルタリングを実現できます。

let tarEl = document.querySelector("h1")
let opt = {
	attributes: {
		exclude : true, // 除外true
		values : ["class"] // 除外する属性
	},
	deep : 0,
	domProperties: false, // プロパティを非表示
	metadata: false // metadataを非表示
}
let jo = domJSON.toJSON(tarEl, opt)
console.log(jo) // 結果表示

結果：

（画像）特定の属性を除外して出力

classが除外されています。

特定のattributeのみ出力

let opt = {
	attributes: {
		values : ["class"] // 出力する属性
	},
	deep : 0,
	domProperties: false, // プロパティを非表示
	metadata: false // metadataを非表示
}

結果：

（画像）特定の属性を出力

excludeオプションをつけずにフィルタを指定すると、その値のみ出力されます。

このようなフィルタリング手法は、他のオプション（FilterListを指定できるもの）でも同様に行うことができます。

参考リンク