Question

而且我无法通过[9]，[11]访问身体孩子的div标签

我以前使用bd.firstChild，bd.childNodes [n]，但始终出现null

<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>

Answer 1

在文档完成之前将代码片段编辑为document.write之前，我创建了以下代码-在文档完成之后，许多人不使用document.write，但是在渲染标签/节点之前您无法显示它们：< / p>

仅获取节点似乎有一些奇怪的事情-Chrome在身体之后的头部之后添加了换行符

这显示了这个问题

您要签出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>

Answer 2

每当遇到<script>元素（假设它没有async或defer属性时，浏览器的网页解析器（和文档生成器）就会暂停。 / li>
document.write导致参数文本在调用时立即添加到文档流中。
- 参数文本将附加到当前解析的文档文本中，然后同步输入到文档构建器中。
  - 这种同步行为以及解析文本和从文本中创建文档节点的事实非常昂贵，这就是为什么document.write被弃用并且不鼓励使用的原因。
您要将人类可读的文本传递到document.write中，因此将立即在#text元素内<script>元素的位置添加新的<head>节点。 / li>
但是所有这些都不相关，因为在您的情况下，您的<html>的{{1}}实际上是一个firstChild节点，由#text和{{1}之间的空白组成}，消除这种情况的唯一方法是使用<html>而不是<head>。
<html><head>不是<html>(#text "\r\n\r\n")<head>元素。使用调试器。
此外，避免使用基于var bd的DOM API，因为它包含诸如空白<body>节点和注释之类的内容。通常最好使用基于node的DOM API。

为什么我不能从body标签访问子节点？

2 个答案: