Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.02.2018, 17:27
Аватар для Валерия_05
Новичок на форуме
Отправить личное сообщение для Валерия_05 Посмотреть профиль Найти все сообщения от Валерия_05
 
Регистрация: 18.02.2018
Сообщений: 9

Добавление нового HTML тега в HTMLCollection
Всех еще раз приветствую!
Ребзя, помогите понять кое-что.

Вот есть такая коллекция
scr-col1.png
То что изображено на изображении выше, это я взяла из консоли хрома.
Чтобы добавить новый HTML тег, к этой коллекции обращаюсь вот так:
var table = document.getElementsByTagName('h1');
table[0].insertBefore(myNewElement, table.childNodes);

Всё прекрасно работает.


Иногда эта коллекция выглядит вот так
scr-col2.png
Вот тут и засада. Я не понимаю как тогда добавить myNewElement

Я сделала вот такую проверку:
var table = document.getElementsByTagName('h1');
	if (table[0] === undefined) {
	//Не знаю как обратиться к этой коллекции
		}
         else{
               table[0].insertBefore(myNewElement, table.childNodes);

    }


Проверка работает, но толку то от нее. Как обратится к коллекции у которой [] и что-то в нее добавить я не понимаю.
Ответить с цитированием
  #2 (permalink)  
Старый 18.02.2018, 23:45
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

В первом случае h1 в документе появился раньше, чем был вызван console.log, во втором позже. Т.е. на момент вызова второго кода никакого h1 ещё не существует. Javascript выполняется последовательно сразу как только получен, и если тег script выше в тексте чем h1, то код из script выполнится уже тогда, когда h1 ещё летит к вам по сети.
Соответственно надо либо дожидаться загрузки страницы (события load или DOMContentLoaded) или ставить тег script в самом низу.
Если же ваш h1 и вовсе добавляется динамически, то, соответственно, и изменения надо вносить в ту часть кода, что за это действие отвечает.

P.S. В консоли видны все значения потому, что getElementsByTagName (в отличение от например querySelectorAll) возвращает динамическую коллекцию, которая автоматически актуализируется, а когда вы смотрите в консоль страница уже полностью прогрузилась.
С этим, кстати, надо быть острожным, т.к. консоль сохраняет лишь примитивные значения (текст\число\булево), копии же объектов не делает оставляя только ссылку, а потому при логировании объекта вы увидите финальные значения на конец исполнения, а не значения на момент вызова console.log.

P.P.S.
table[0].insertBefore(myNewElement, table.childNodes);
это не верно, т.к.:
var insertedElement = parentElement.insertBefore(newElement, referenceElement);
//    insertedElement Вставленный элемент.
//    parentElement Родитель для нового элемента.
//    newElement Элемент для вставки.
//    referenceElement Элемент, перед которым будет вставлен newElement.
Как можно видеть referenceElement - должен быть именно элементом, а не ещё одной коллекцией(childNodes).
В вашем случае всё работает лишь из-за второй ошибки: table.childNodes у вас undefined(т.е. не имеет значения), т.к. table - это коллекция(т.е. подобие массива), у неё нет детей, дети бывают только у элементов. А вызов insertBefore с referenceElement, значение которого можно привести к null, равносилен вызову appendChild, т.е. простому добавление insertedElement в конец parentElement.
__________________
29375, 35

Последний раз редактировалось Aetae, 19.02.2018 в 00:16.
Ответить с цитированием
  #3 (permalink)  
Старый 19.02.2018, 09:44
Аватар для Валерия_05
Новичок на форуме
Отправить личное сообщение для Валерия_05 Посмотреть профиль Найти все сообщения от Валерия_05
 
Регистрация: 18.02.2018
Сообщений: 9

Aetae, ой! Спасибо вам за столь развернутый ответ.
Попробую теперь разобраться со всем этим опираясь на информацию, которую вы дали.

С меня + в карму. Сейчас пока не могу этого сделать, раздала всё))



Вот это - querySelectorAll, я так поняла jQuery?
Я туда даже не смотрю пока. Разбираюсь по максимуму в чистом js и jQuery не использую. Да, знаю что там проще некоторые вещи, но все равно, я пока в основах решила разобраться.

Кстати, по поводу события load или DOMContentLoaded.
Я на просторах интернета нашла вот такой способ получения того момента, когда страница и дерево полностью загружено:
var ready = function (fn) {

                if (typeof fn !== 'function') return;

            	//Если документ уже загружен, выполнить метод
                if (document.readyState === 'complete') {
                    return fn();
                }

            	//Ждем загрузки документа
                document.addEventListener( 'DOMContentLoaded', fn, false );
            };


            ready(function() {
			   //Тут код
			}

Тут как я поняла через хендлер ждем DOMContentLoaded?
Это нормальный код или что-то можно сделать более оптимально/проще/... ?

Опять же, извините за возможно очень примитивные вопросы. Я пока ни бум-бум в js, вот только-только два дня назад начала интересоваться этим замечательным языком программирования.
Ответить с цитированием
  #4 (permalink)  
Старый 19.02.2018, 10:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от Валерия_05
или что-то можно сделать более оптимально/проще/... ?
Как вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded',function(){
	alert(document.querySelector('p').innerHTML)
});
</script>
</head>
<body>
<p>Пример текста</p>
</body>
</html>
Ответить с цитированием
  #5 (permalink)  
Старый 19.02.2018, 10:06
Аватар для Валерия_05
Новичок на форуме
Отправить личное сообщение для Валерия_05 Посмотреть профиль Найти все сообщения от Валерия_05
 
Регистрация: 18.02.2018
Сообщений: 9

ksa, спасибо, но как я уже говорила выше, я пока не использую jQuery и изучаю чистый js.
Ответить с цитированием
  #6 (permalink)  
Старый 19.02.2018, 10:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Валерия_05,
в коде ksa, не используется
Сообщение от Валерия_05
jQuery
Ответить с цитированием
  #7 (permalink)  
Старый 19.02.2018, 10:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Валерия_05
Вот это - querySelectorAll, я так поняла jQuery?
нет
https://developer.mozilla.org/ru/doc...erySelectorAll
Ответить с цитированием
  #8 (permalink)  
Старый 20.02.2018, 00:51
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

Сообщение от Валерия_05 Посмотреть сообщение
Вот это - querySelectorAll, я так поняла jQuery?
Как уже заметили выше - это чистый js. Запрос по css селектору. Так как работает с ie8 - можно спокойно использовать.


Сообщение от Валерия_05 Посмотреть сообщение
Это нормальный код или что-то можно сделать более оптимально/проще/... ?
Код нормальный, проще некуда. Суть его в том, что он(из паранойи) проверяет не загружен ли уже документ на момент вызова и если да - то сразу вызывает переданную функцию, не вешая бесполезного в таком случае слушателя на событие загрузки, т.к. сие событие уже произошло и повторяться не будет.
Если скрипты подключаются в head без асинхронной загрузки (атрибут async) - можно смело забить и просто вешать слушателя.)
__________________
29375, 35
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Добавление input и вывод в html value emptyindorill jQuery 1 05.05.2017 09:10
Как передать объект тега HTML в функцию Javascript? friend_RU Общие вопросы Javascript 2 22.03.2016 14:18
добавление html в js soltx Элементы интерфейса 6 10.03.2015 22:50
Блокирование интерфейса. Добавление нового элемента vychmat Элементы интерфейса 5 20.03.2014 15:04
Два HTML тега <td>, между которых нужно вставить елемент Bebarr Swallow Events/DOM/Window 2 23.05.2011 17:11