[JavaScript]console.dir()でオブジェクトの中身を見る

JavaScriptjavascript

広告

JavaScriptでの開発をしている中で、変数の値の確認やエラー発生時に原因の特定を行う際によく使っているものがconsole.log()になります。console.logを使うことで、変数の値や実行されているかどうかを確認するために文字列を出力することができます。
console.logを使っていて困ったことがあったので紹介したいと思います。DOMから特定のタグを取得したい時に、getElementById().getElementByName(),getElementByClass などを使うと思います。取ってきたものを変数に格納しました。取ってきたオブジェクトがどのようなプロパティを持っているのかを確認したいと思いました。console.log()を使って出力したところ、HTMLの記述しか出力されていませんでした。そこでいろいろ調べたところ、オブジェクトのプロパティを確認するためにconsole.dir()というものが存在することがわかりました。

console.dir()

指定 JavaScript オブジェクトのプロパティの、インタラクティブリストを表示します。出力はコンソールに開閉状態をあらわす三角マーク付きで階層構造を伴って出力されます。これをクリックして開閉する事で下位メンバの情報を辿る事ができます。
console.dir(section)
div#section
accessKey: ""
align: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: id, id: id, length: 1}
autocapitalize: ""
baseURI: "https://aqua-engineer.com/"
childElementCount: 1
childNodes: NodeList(4) [text, div#list.card-2, comment, text]
children: HTMLCollection [div#list.card-2, list: div#list.card-2]
classList: DOMTokenList [value: ""]
className: ""
clientHeight: 2182
clientLeft: 0
clientTop: 0
clientWidth: 620
contentEditable: "inherit"
dataset: DOMStringMap {}
dir: ""
draggable: false
firstChild: text
firstElementChild: div#list.card-2
hidden: false
id: "section"
innerHTML: "↵<div id="list" class="card-2">↵<div class="posts-"
innerText: " 
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: text
lastElementChild: div#list.card-2
localName: "div"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: comment
nodeName: "DIV"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 2182
offsetLeft: 58
offsetParent: body.home.blog.logged-in.admin-bar.customize-support
offsetTop: 282
offsetWidth: 620
onabort: null
onauxclick: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectstart: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
onvolumechange: null
onwaiting: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwheel: null
outerHTML: "<div id="section">↵<div id="list" class="card-2">↵"
outerText: 
ownerDocument: document
parentElement: main#main
parentNode: main#main
prefix: null
previousElementSibling: null
previousSibling: text
scrollHeight: 2182
scrollLeft: 0
scrollTop: 0
scrollWidth: 620
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: -1
tagName: "DIV"
textContent: 
title: ""
translate: true

console.dir()を使って

console.dir()を使うことによって、このようなプロパティが存在していて、このような情報を持っているということがわかりやすくなったので、とても便利でたくさん使うようになっています

広告

JavaScriptjavascript