I try to change html text value and get the structure with document.getElementsByClassName("parent-nav")
This html page using Vue.js.
When I do document.getElementsByClassName("parent-nav").innerHTML or document.getElementsByClassName("parent-nav").innerText it is return undefined even it have values.
What I missed here ?
This is the result of the structure that I got from document.getElementsByClassName("parent-nav")
HTMLCollection
0: a#parentnavi__BV_toggle_.nav-link.dropdown-toggle.parent-nav
__vue__: Object { _uid: 17, _isVue: true, "$options": {…}, … }
_prevClass: "nav-link dropdown-toggle parent-nav"
accessKey: ""
accessKeyLabel: ""
assignedSlot: null
attributes: NamedNodeMap(7) [ id="parentnavi__BV_toggle_", role="button", aria-haspopup="true", … ]
baseURI: "http://localhost:8080/#/photos"
charset: ""
childElementCount: 1
childNodes: NodeList [ span ]
children: HTMLCollection { 0: span, length: 1 }
classList: DOMTokenList(3) [ "nav-link", "dropdown-toggle", "parent-nav" ]
className: "nav-link dropdown-toggle parent-nav"
clientHeight: 40
clientLeft: 0
clientTop: 0
clientWidth: 176
contentEditable: "inherit"
contextMenu: null
coords: ""
dataset: DOMStringMap(0)
dir: ""
download: ""
draggable: true
firstChild: <span>
firstElementChild: <span>
hash: "#parentnavi"
hidden: false
host: "localhost:8080"
hostname: "localhost"
href: "http://localhost:8080/#parentnavi"
hreflang: ""
id: "parentnavi__BV_toggle_"
innerHTML: "<span>Photos</span>"
innerText: "Photos"
isConnected: true
isContentEditable: false
lang: ""
lastChild: <span>
lastElementChild: <span>
localName: "a"
name: ""
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: <ul class="dropdown-menu" tabindex="-1" aria-labelledby="parentnavi__BV_toggle_">
nextSibling: <ul class="dropdown-menu" tabindex="-1" aria-labelledby="parentnavi__BV_toggle_">
nodeName: "A"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 40
offsetLeft: 4
offsetParent: <li id="parentnavi" class="nav-item b-nav-dropdown …opdown col-sm-2 p-1 m-0">
offsetTop: 4
offsetWidth: 176
onabort: null
onanimationcancel: null
onanimationend: null
onanimationiteration: null
onanimationstart: null
onauxclick: null
onblur: 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
ondragexit: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onformdata: null
onfullscreenchange: null
onfullscreenerror: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadend: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmozfullscreenchange: null
onmozfullscreenerror: 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
onseeked: null
onseeking: null
onselect: null
onselectstart: null
onshow: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
ontransitioncancel: null
ontransitionend: null
ontransitionrun: null
ontransitionstart: null
onvolumechange: null
onwaiting: null
onwebkitanimationend: null
onwebkitanimationiteration: null
onwebkitanimationstart: null
onwebkittransitionend: null
onwheel: null
origin: "http://localhost:8080"
outerHTML: "<a id=\"parentnavi__BV_toggle_\" role=\"button\" aria-haspopup=\"true\" aria-expanded=\"false\" href=\"#parentnavi\" target=\"_self\" class=\"nav-link dropdown-toggle parent-nav\"><span>Photos</span></a>"
ownerDocument: HTMLDocument http://localhost:8080/#/photos
parentElement: <li id="parentnavi" class="nav-item b-nav-dropdown …opdown col-sm-2 p-1 m-0">
parentNode: <li id="parentnavi" class="nav-item b-nav-dropdown …opdown col-sm-2 p-1 m-0">
part: DOMTokenList []
password: ""
pathname: "/"
ping: ""
port: "8080"
prefix: null
previousElementSibling: null
previousSibling: null
protocol: "http:"
referrerPolicy: ""
rel: ""
relList: DOMTokenList []
rev: ""
scrollHeight: 40
scrollLeft: 0
scrollLeftMax: 0
scrollTop: 0
scrollTopMax: 0
scrollWidth: 176
search: ""
shadowRoot: null
shape: ""
slot: ""
spellcheck: false
style: CSS2Properties(0)
tabIndex: 0
tagName: "A"
target: "_self"
text: "Photos"
textContent: "Photos"
title: ""
type: ""
username: ""
<prototype>: HTMLAnchorElementPrototype { toString: toString(), target: Getter & Setter, download: Getter & Setter, … }
length: 1
parentnavi__BV_toggle_: <a id="parentnavi__BV_toggle_" class="nav-link dropdown-toggle parent-nav" role="button" aria-haspopup="true" aria-expanded="false" href="#parentnavi" target="_self">
<prototype>: HTMLCollectionPrototype { item: item(), namedItem: namedItem(), length: Getter, … }
AboutNavBar.vue:47
onmozfullscreenchange is deprecated. localhost:8080
onmozfullscreenerror is deprecated. localhost:8080
