The problem of nodeName/nodeValue selection order

  

<span>paragraph1</span> <span>paragraph2</span> <span><strong>paragraph3</strong></span>

<button type="button" name="button" onclick="getname()"></button> < script type = "text/javascript" > function getname() { var a = document.getElementsByTagName("p")[0]; alert(a.innerHTML); alert(a.innerText); alert(a.firstChild.nodeName); //-sharptext alert(a.firstChild.nodeValue);//null alert(a.lastChild.nodeValue);//null }

there is no answer after searching for a long time. I"d like to ask
Q1:
.firstChild is it a special and unique syntax or is it only used to select the first child element? What if I want to select paragraph2 in

?
Q2:
check MDN, and give me only one answer:

" alert (a.firstChild.nodeName) will display"- sharptext", because a newline character and multiple spaces act as a text node before the

tag and tag."

does a space count as a node? Does a line break count as a node? Does an element tag count as a node? Text is also a node?
I"m a little confused. Are they mixed? Are they all child nodes of object elements? So what"s their order?

Feb.14,2022

you try to print a.childNodes to know the order of nodes.
if you only want to select the first element element node, you can use a.firstElementChild .


document, element, text, comment comments are all nodes
for example

segment<i>fault</i>site

p there are three nodes below, and the newline character and the text at the beginning and end belong to the same node
clipboard.png

i'fault'
clipboard.png

spangetElementsByTagName('span')[1]


DOM 12typeElementText

Textelement.childNode12DOMElement()element.childElementNodeelement.firstElementNode (span)

clipboard.png

Menu