Блог

Главная - Вопросы по программированию - Строка JavaScript createElement вызывает ошибку

Строка JavaScript createElement вызывает ошибку

#javascript #html #dom #createelement

#javascript #HTML #dom #createelement

Вопрос:

Я пишу простую программу на JavaScript для проверки каждого элемента на веб-сайте HTML и добавления дочернего узла к каждому нетекстовому узлу, который помечает тип тега:

скриншот браузера

Вот мой код:

 window.onload = function() {
    var body_elems = document.body.getElementsByTagName("*");
    for (var i = 0; i < body_elems.length; i  ) {
        if (body_elems[i].nodeType != 3) {
            var tag_name = body_elems[i].tagName;
            var child = document.createElement("P");
            var child_text = document.createTextNode(tag_name);
            child.appendChild(child_text);
            body_elems[i].appendChild(child);
            body_elems[i].firstChild.className = "hoverNode";
        }
    }
}

По какой-то причине строка var child = document.createElement("P") приводит к тому, что страница никогда не загружается; если я закомментирую эту строку, страница загрузится.

С другой стороны, вот немного другая версия, которая действительно работает:

 window.onload = function() {
    var body_elems = document.body.getElementsByTagName("*");
    for (var i = 0; i < body_elems.length; i  ) {
        if (body_elems[i].nodeType != 3) {
            var tag_name = body_elems[i].tagName;
            var child = document.createTextNode(tag_name);
            body_elems[i].appendChild(child);
            child.className="hoverNode";
        }
    }
}

Но я не могу понять, как присвоить имя класса новому узлу, чтобы применить CSS, поэтому, если бы кто-нибудь мог сказать мне, как это сделать, моя проблема была бы решена.

Я новичок в JS, поэтому буду признателен за любую помощь.

Комментарии:

1. Я думаю, document.createElement(«p»); будет работать (в нижнем регистре).

2. Зарегистрирована ли ошибка? Обратите внимание, что есть некоторые теги (например <img> , или <br> ), у которых не может быть дочерних узлов.

3. Если в документе есть хотя бы один узел, который не является TextNode, то первый скрипт будет выполняться вечно, поскольку document.getElementsByTagName() возвращает текущую коллекцию, следовательно body_elems , также будет содержать вновь созданные p элементы.

4. Используйте document.querySelectorAll("*") вместо этого. Это вернет неживой список узлов.

5. Диапазон также не может находиться внутри определенных элементов… Вам нужно будет добавить ее после элемента.