Почему я не могу получить доступ к дочернему узлу из тега body?

ProgramBox

Почему я не могу получить доступ к дочернему узлу из тега body?

Post author:admin
Запись опубликована:26 мая, 2023
Post category:Вопросы по программированию

#javascript #html #nodes

#javascript #HTML #узлы

Вопрос:

И я не могу получить доступ к тегу div дочернего элемента body в [9] , [11]

Я использую 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>

1. Какова HTML-структура страницы?

2. Пожалуйста, обновите фрагмент, который я сделал для вас, а также обратите внимание, что вы не можете использовать document.write после загрузки страницы. Вместо этого используйте консоль. log или innerHTML некоторого контейнера

3. я редактирую свой код, ребята, вы все еще можете мне помочь?

4. Ваш скрипт запускается до того, как документ будет готов. Поместите его непосредственно перед закрывающим </body> тегом.

5. @trincot, приношу извинения. Произошла правка, которую я не видел.

Ответ №1:

Анализатор веб-страниц браузеров (и конструктор документов) приостанавливается всякий раз, когда встречается <script> элемент (при условии, что у него нет атрибутов async or defer ).
document.write приводит к немедленному добавлению текста аргумента в поток документа при вызове.
- Текст аргумента добавляется к тексту анализируемого документа, а затем синхронно передается в конструктор документов.
  - Такое синхронное поведение и тот факт, что синтаксический анализ текста и создание узлов документа из него обходятся дорого, вот почему document.write не рекомендуется и его использование не рекомендуется.
Вы передаете читаемый человеком текст в, document.write поэтому новые #text узлы будут немедленно добавлены туда, где находится <script> элемент, который находится внутри <head> элемента.
Но все это не имеет значения, потому что в вашем случае ваш <html> узел firstChild на самом деле является #text узлом, состоящим из пробела между <html> и <head> , единственный способ устранить это — иметь <html><head> вместо <html>(#text "rnrn")<head> .
var bd не является <body> элементом. Используйте свой отладчик.
Кроме того, избегайте использования DOM API на node основе, поскольку он включает в себя такие вещи, как пробельные #text узлы и комментарии. Обычно вместо этого лучше использовать DOM API на Element основе.

Ответ №2:

Перед тем, как вы отредактировали фрагмент в document.write до завершения документа, я создал приведенный ниже код — вы многие НЕ используете document.write после завершения документа, но вы НЕ МОЖЕТЕ показывать теги / узлы до их отображения:

Кажется, что происходит что-то странное с простым получением узлов — 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>