Сбор баллов знаний JavaScript: получение элементов и узлов

[Рекомендации по теме: видеоруководство по JavaScript, веб-интерфейс]

Получите элемент

• через идентификатор ( getElementById )
• через атрибут имени ( getElementsByName )
• через имя тега ( getElementsByTagName )
• через имя класса ( getElementsByClassName )
• Получите элемент через селектор ( querySelector )
• через селектор Группа элементов ( querySelectorAll )
• метод получения html ( document.documentElement )
• метод получения тела ( document.body )

1. Получить по идентификатору (getElementById)

// 1 Получить узел элемента // по идентификатору (найти элементы по идентификатору, с учетом регистра, если идентификаторов несколько, будет найден только первый)
    document.getElementById('p1');

• Контекст должен быть документом.
• Параметры должны быть переданы. Параметры имеют строковый тип и используются для получения идентификатора элемента.
• Возвращаемое значение получает только один элемент и возвращает ноль, если он не найден.

2. Поиск элементов по имени класса (getElementsByClassName)

// Поиск элементов по имени класса. Разделите несколько имен классов пробелами, чтобы получить HTMLCollection (коллекцию элементов с атрибутом длины, и вы можете получить доступ к элементу внутри по номеру индекса). )
    var cls = document.getElementsByClassName('a b');
    console.log(cls);

• Параметр — это имя класса элемента.
• Возвращаемое значение представляет собой массив, подобный массиву. Если он не найден, возвращается пустой массив

3. Через атрибут name (getElementsByName)

// Поиск по атрибуту name и возврат NodeList (коллекция узлов с атрибутом длины, который может доступ через индексный номер)
   вар nm = document.getElementsByName('c');
    console.log(nm);

4. По имени тега (getElementsByTagName)

// Найти элементы по имени тега и вернуть HTMLCollection
    document.getElementsByTagName('p');

• Этот параметр предназначен для получения атрибута имени тега элемента, который не чувствителен к регистру.
• Возвращаемое значение представляет собой массив класса. Если он не найден, возвращается пустой массив.

5. Получите элемент через селектор (querySelector).

document.querySelector('.animated')

• является селектором, например: "p. Имя класса".
• Возвращает один узел. Если совпадающих элементов несколько, возвращайте первые

6. Получите набор элементов с помощью селектора (querySelectorAll).

document.querySelector('.animated')

• Возвращаемое значение представляет собой массив классов

для получения узла

в Объектная модель документа (DOM)), каждый узел является объектом. Узлы DOM имеют три важных атрибута

: 1. nodeName: имя узла

2. nodeValue: значение узла

3. nodeType: тип узла

1. атрибут nodeName: имя узла, доступное только для чтения. .

• Имя узла узла элемента совпадает с именем метки.
• Имя узла узла атрибута — это имя атрибута
• . Имя узла текстового узла всегда равно #text.
• Имя узла узла документа всегда равно #document

2

. Атрибут nodeValue: значение узла.

• nodeValue узла элемента не определено или равно нулю.
• Текстовый узел. nodeValue — это текстовый
• атрибут узла.

3. Атрибут nodeType: тип

узла, который доступен только для чтения. Следующие часто используемые типы узлов:

• Тип элемента Тип узла
• Элемент 1
• Атрибут 2
• Текст 3 Пробел также возвращает 3
• Комментарий 8
• Документ 9

Создайте узел:

1. Создайте узел: createElement('')

// Создайте элемент. Он только что создан, а не добавлен в html. Его нужно использовать вместе с AppendChild. п');
    элем.id = 'тест';
    elem.style = 'цвет: красный';
    elem.innerHTML = 'Я недавно созданный узел';
    document.body.appendChild(elem);

2. Вставить узел: метод addChild()

• : родительский.appendChild(child)
• добавит дочерний узел в конец родительского узла.
• Если дочерний узел изначально существует, исходным узлом будет. удалено. Добавьте новый узел в конец, но событие останется

var oNewp=document.createElement("p");
      var oText=document.createTextNode("Всемирный привет");
      oNewp.appendChild(oText);

Узел вставки:

• использование метода InsertBefore() — родительский.insertBefore(newNode,refNode);

var oOldp=document.body.getElementsByTagName("p")[0];
      document.body.insertBefore(oNewp,oOldp);

Удалить узел

1. Удалить узел:

• использование метода removeChild: родитель.removeChild(child)
• Если вы удалите дочерний узел, который не является родительским элементом, будет сообщено об ошибке

var op=document. .body.getElementsByTagName("p")[0];
         op.parentNode.removeChild(op);

Узел клонирования

1. Узел клонирования: родительский.cloneNode() false или true

• Узел клонирования (необходимо принять параметр, чтобы указать, копировать ли элемент)

// Узел клонирования (необходимо принять параметр чтобы указать, следует ли копировать элемент) element)
    var form = document.getElementById('test');
    вар клон = form.cloneNode(истина);
    clone.id = 'test2';
    document.body.appendChild(clone);

Заменить узел

1. Заменить метод узла node.replace(new,old)

var oOldp=document.body.getElementsByTagName("p")[0];
       oOldp.parentNode.replaceChild(oNewp,oOldp);

поля фрагмента документа

• : при добавлении большого количества узлов в документ будет очень медленно, если добавлять их по одному. В этом случае вы можете использовать фрагменты документа. добавьте их в документ сразу.
• Синтаксис: document. createDocumentFragment();
• хост-узел

(функция());
    {
        вар начало = Date.now();
        вар стр = '', ли;
        вар ul = document.getElementById('ul');
        фрагмент вар = document.createDocumentFragment();
        for(var я=0; я<10000; я++)
        {
            li = document.createElement('li');
            li.textContent = ''+i+'й дочерний узел';
            фрагмент.appendChild(ли);
        }
        ul.appendChild (фрагмент);
        console.log('Времязатратно:'+(Date.now()-start)+'миллисекунды'); // 63 миллисекунды})();

[Связанные рекомендации: видеоуроки по JavaScript, веб-интерфейс]

Вышеупомянутое Точки знаний JavaScript. Упорядочите детали получения элементов и узлов. Для получения дополнительной информации обратите внимание на другие соответствующие статьи в сети исходного кода!