Why can't I access child node from body tag?

Question

And I can't access div tag on body's child at [9] , [11]

I use bd.firstChild, bd.childNodes[n] before but null always appears

<html>

<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
  var rt = document.getRootNode();
  document.write(rt.nodeName + " "); //document
  var ht = rt.firstChild;
  document.write(ht.nodeName + " "); // html
  var hd = ht.firstChild;
  document.write(hd.nodeName + " "); // head
  var bd = hd.nextSibling;
  document.write(bd.nodeName + " "); // body
</script>
</head>
<body>
     <br/><br/><br/><br/><br/><br/>
     <h1>1</h1>
     <h2>2</h2>
</body>
</html>

Please update the snippet I made for you and also note that you cannot use document.write after the page loads. Instead use console.log or innerHTML of some container — mplungjan, Mar 04 '19 at 08:22
Your script runs before the document is ready. Put it just before the closing `
` tag. — trincot, Mar 04 '19 at 08:33

mplungjan · Answer 1 · 2019-03-04T08:56:07.153

Before you edited the snippet to document.write before the document was completed, I created the code below - you many NOT use document.write after the document is completed but you CANNOT show the tags/nodes before they are rendered:

It seems there is some strange going's on with just getting the nodes - Chrome adds a newline after the head before the body

This shows this issue

You want to check out https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType

<!doctype html>
<html>

<head>
  <title></title>
</head>

<body>
  <p></p>
  <script>
    // https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter/acceptNode

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


    var nodeIterator = document.createNodeIterator(
      // Node to use as root
      document.querySelector('html'),

      // Only consider nodes that are text nodes (nodeType 3)
      NodeFilter.SHOW_ELEMENT,

      // Object containing the function to use for the acceptNode method
      // of the NodeFilter
      {
        acceptNode: function(node) {
          // Logic to determine whether to accept, reject or skip node
          // In this case, only accept nodes that have content
          // other than whitespace
          if (!/^\s*$/.test(node.data)) {
            return NodeFilter.FILTER_ACCEPT;
          }
        }
      },
      false
    );

    // Show the content of every non-empty text node that is a child of root
    var node;

    while ((node = nodeIterator.nextNode())) {
      console.log(node.tagName);
    }

    /* ----------- Older code ------------- */
    /*  
      
        var rt = document.getRootNode();
        console.log("Root", rt.nodeName + " "); //document
        var ht = rt.firstChild;
        console.log("Root's firstChild", ht.nodeName + " "); // html
        var HTML = ht.nextSibling;
        console.log("html's nextSibling", HTML.nodeName + " "); // HTML
        var HEAD = HTML.firstChild;
        console.log("Html's firstChild", HEAD.nodeName + " "); // HEAD
        var newLine = HEAD.nextSibling;
        var BODY = newLine.nextSibling;

        console.log("newLine's nextSibling", BODY.nodeName + " "); // BODY
    */
  </script>
</body>

</html>

may i ask another? i can't find child node on body node, it always return null or textContent already write on browser — user-name, Mar 04 '19 at 08:48

score 0 · Answer 2 · answered Mar 04 '19 at 08:44

The browsers' web-page parser (and document-builder) is paused whenever a <script> element is encountered (assuming it doesn't have async or defer attributes).
document.write causes the argument text to be added to the document stream immediately when invoked.
- The argument text is appended to the currently parsed document text then fed into the document builder synchronously.
  - This synchronous behaviour, and the fact parsing text and creating document nodes from it is expensive, is why document.write is deprecated and its use discouraged.
You are passing human-readable text into document.write so new #text nodes will be added immediately where the <script> element is, which is inside the <head> element.
But all of that is irrelevant because in your case your <html>'s firstChild is actually a #text node comprised of the whitespace betwen <html> and <head>, the only way to eliminate this is by having <html><head> instead of <html>(#text "\r\n\r\n")<head>.
var bd is not the <body> element. Use your debugger.
Also, avoid using the node-based DOM API because it includes things like whitespace #text nodes and comments. It's usually better to use the Element-based DOM API instead.

thx for recommand better way i'll use that method after solve it — user-name, Mar 04 '19 at 09:02

Why can't I access child node from body tag?

2 Answers2