Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Lead section for xml/html DOM Text Node seems to provide an incorrect example #23353

Closed
KilianKilmister opened this issue Jan 3, 2023 · 7 comments · Fixed by #23473
Closed

Lead section for xml/html DOM Text Node seems to provide an incorrect example #23353

KilianKilmister opened this issue Jan 3, 2023 · 7 comments · Fixed by #23473
Labels
Content:WebAPI Web API docs good first issue A good issue for newcomers to get started with.

Comments

@KilianKilmister
Copy link

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/Text

What specific section or headline is this issue about?

Lead Section

What information was incorrect, unhelpful, or incomplete?

Claim of there only being 3 text nodes in the given example.

What did you expect to see?

At least 5 text nodes

Do you have any supporting links, references, or citations?

Based on opening a file with the content in a browser and running a TreeWalker over it.

Do you have anything more you want to share?

Regarding the following section, the statement about there being only three text nodes is incorrect, right?

To understand what a text node is, consider the following document:

<html lang="en" class="e">
  <head>
    <title>Aliens?</title>
  </head>
  <body>
    Why yes.
  </body>
</html>

In that document, there are three text nodes, with the following contents:

  • "Aliens?" (the contents of the title element)
  • "\n" (after the end tag, a newline followed by a space)
  • "Why yes.\n" (the contents of the body element)

Each of those text nodes is an object that has the properties and methods documented in this article.

I really don't see how that number was determined. Opening a local file with that content in a browser (Safari and Chrome) and running a TreeWalker over it will yield 5 text nodes instead. I'm astonishingly incapable with HTML, so I'm really not sure what to think.

Tree Walker:

function textNodesUnder (el) {
  let node
  const res = []
  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null, false)
  while ((node = walker.nextNode())) res.push(node)
  console.log(res.map(({ nodeValue }) => nodeValue))
}

textNodesUnder(document)

Result:

[
  "\n    ",
  "Aliens?",
  "\n  ",
  "\n  ",
  "\n    Why yes.\n  \n\n"
]

MDN metadata

Page report details
@KilianKilmister KilianKilmister added the needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. label Jan 3, 2023
@github-actions github-actions bot added the Content:WebAPI Web API docs label Jan 3, 2023
@Josh-Cena Josh-Cena added good first issue A good issue for newcomers to get started with. and removed needs triage Triage needed by staff and/or partners. Automatically applied when an issue is opened. labels Jan 3, 2023
@Josh-Cena
Copy link
Member

For contributors, two ways to fix this issue:

  1. Revert the code block to pre-Add "lang" to <html> - part 2 #19890.
<html lang="en" class="e"><head><title>Aliens?</title></head>
 <body>Why yes.
</body></html>

You would need to remember to add html-nolint to the code fence.

  1. Update the explaining text so it is consistent with the new code block.

Either solution is fine.

@technoph1le
Copy link
Contributor

Hi, @Josh-Cena! I would be happy to pick this issue and fix it.

Also, when I run that code, I got the following result:

[
  "\n    ", 
  "Aliens?", 
  "\n  ", 
  "\n  ", 
  "\n    Why yes.\n  ", 
  "\n"
]

which is little different than what @KilianKilmister has.

@Josh-Cena
Copy link
Member

@dostonnabotov I can't get your result. Maybe you've inserted the code as a script tag?

@technoph1le
Copy link
Contributor

I can't get your result. Maybe you've inserted the code as a script tag?

@Josh-Cena, I linked JavaScript with the script tag <script src="index.js"></script>. Perhaps, it's effect on how it outputs.

If this one is the correct output (by @KilianKilmister), I can use it to update the explaining text:

[
  "\n    ",
  "Aliens?",
  "\n  ",
  "\n  ",
  "\n    Why yes.\n  \n\n"
]

@Josh-Cena
Copy link
Member

Indeed, you are not supposed to insert the script tag. If you just open the HTML code as-is, and run the script directly in your console, you should get the right result.

@AbidemiT
Copy link

AbidemiT commented Jan 8, 2023

Hello @dostonnabotov were you able to resolve this? if no i will like to pick this up

@technoph1le technoph1le mentioned this issue Jan 8, 2023
Merged
@technoph1le
Copy link
Contributor

Hello @dostonnabotov were you able to resolve this? if no i will like to pick this up

Hi, @AbidemiT. Sorry for the delay. Yes, resolved it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Content:WebAPI Web API docs good first issue A good issue for newcomers to get started with.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: html DOM Text node content dostonnabotov/mdn-web-docs
4 participants
@KilianKilmister @AbidemiT @Josh-Cena @technoph1le