【Vue.js】$refsで取得した要素で使えるプロパティ【ref】

f:id:duo-taro100:20160218004611p:plain

今回は以下のような実装をしました。

See the Pen vuejs-refs-test by duotaro (@duotaro100) on CodePen.

pタグとulタグ、liタグにそれぞれ「ref」属性を付与して、それぞれの要素を取得します。
その要素に対してどのようなことができるのか、どんな情報を持っているのか気になったので調べました。
以下がアクセス可能なプロパティです。

pタグ(要素が一つの場合)

accessKey: ""
align: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {length: 0}
autocapitalize: ""
baseURI: "https://s.codepen.io/"
childElementCount: 0
childNodes: NodeList [text]
children: HTMLCollection []
classList: DOMTokenList [value: ""]
className: ""
clientHeight: 24
clientLeft: 0
clientTop: 0
clientWidth: 1300
contentEditable: "inherit"
dataset: DOMStringMap {}
dir: ""
draggable: false
firstChild: text
firstElementChild: null
hidden: false
id: ""
innerHTML: "pタグでテスト"
innerText: "pタグでテスト"
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: text
lastElementChild: null
localName: "p"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: p
nextSibling: text
nodeName: "P"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 24
offsetLeft: 29
offsetParent: body
offsetTop: 112
offsetWidth: 1300
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: "<p>pタグでテスト</p>"
outerText: "pタグでテスト"
ownerDocument: document
parentElement: div.test-container
parentNode: div.test-container
prefix: null
previousElementSibling: h1
previousSibling: text
scrollHeight: 24
scrollLeft: 0
scrollTop: 0
scrollWidth: 1300
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: -1
tagName: "P"
textContent: "pタグでテスト"
title: ""
translate: true

ulタグ(子要素を保持している場合)

accessKey: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {length: 0}
autocapitalize: ""
baseURI: "https://s.codepen.io/"
childElementCount: 3
childNodes: NodeList(5) [li, text, li, text, li]
children: HTMLCollection(3) [li, li, li]
classList: DOMTokenList [value: ""]
className: ""
clientHeight: 72
clientLeft: 0
clientTop: 0
clientWidth: 1300
compact: false
contentEditable: "inherit"
dataset: DOMStringMap {}
dir: ""
draggable: false
firstChild: li
firstElementChild: li
hidden: false
id: ""
innerHTML: "<li>要素1</li> <li>要素2</li> <li>要素3</li>"
innerText: "要素1↵要素2↵要素3"
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: li
lastElementChild: li
localName: "ul"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "UL"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 72
offsetLeft: 29
offsetParent: body
offsetTop: 275
offsetWidth: 1300
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: "<ul><li>要素1</li> <li>要素2</li> <li>要素3</li></ul>"
outerText: "要素1↵要素2↵要素3"
ownerDocument: document
parentElement: div.test-container
parentNode: div.test-container
prefix: null
previousElementSibling: h1
previousSibling: text
scrollHeight: 72
scrollLeft: 0
scrollTop: 0
scrollWidth: 1300
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: -1
tagName: "UL"
textContent: "要素1 要素2 要素3"
title: ""
translate: true
type: ""

liタグ(ref名が重複している場合)

accessKey: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {length: 0}
autocapitalize: ""
baseURI: "https://s.codepen.io/"
childElementCount: 0
childNodes: NodeList [text]
children: HTMLCollection []
classList: DOMTokenList [value: ""]
className: ""
clientHeight: 24
clientLeft: 0
clientTop: 0
clientWidth: 1260
contentEditable: "inherit"
dataset: DOMStringMap {}
dir: ""
draggable: false
firstChild: text
firstElementChild: null
hidden: false
id: ""
innerHTML: "要素3"
innerText: "要素3"
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: text
lastElementChild: null
localName: "li"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "LI"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 24
offsetLeft: 69
offsetParent: body
offsetTop: 534
offsetWidth: 1260
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: "<li>要素3</li>"
outerText: "要素3"
ownerDocument: document
parentElement: ul
parentNode: ul
prefix: null
previousElementSibling: li
previousSibling: text
scrollHeight: 24
scrollLeft: 0
scrollTop: 0
scrollWidth: 1260
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: -1
tagName: "LI"
textContent: "要素3"
title: ""
translate: true
type: ""
value: 0