Здравствуйте, уважаемые читатели! Продолжая тему CSS селекторов хочу предложить вашему вниманию описание дочерних и контекстных селекторов
, а также их сравнительный анализ, поскольку по логике применения они очень похожи, хотя обладают некоторым отличием.
В своих публикациях я довольно подробно останавливался на различных видах CSS селекторов: ; а также . Кстати, в последней статье, где разбирались разные виды селектора атрибута, я довольно подробно описал, как мои теоретические выкладки можно тут же проверить, внося изменения в HTML и CSS код онлайн с помощью встроенного инструмента Google Chrome (). Такие средства редактирования имеют новейшие модификации всех популярных браузеров, включая плагин Firebug для Firefox ().
Теоретический материал этого поста вы можете также изучать, делая редактирование любой страницы любого сайта! Для этого просто нажмите F12, если пользуетесь Google Chrome или Mozilla Firefox (). А теперь представлю содержание тега p, на примере которого будем изучать дочерние и контекстные CSS селекторы
:
Этот абзац включает теги форматирования em и strong,
которые выделяют текст жирным и курсивом.
Пользуясь вышеописанным инструментом для редактирования я вставил данный абзац прямо в настоящую статью, вписав соответствующий текст в левой части окна для редактирования, в результате чего текст этого параграфа появился в самом верху страницы:
Эта HTML конструкция , . Этот параграф будет подопытным в сегодняшней публикации, на его примере я покажу, как меняется оформление его текста, в зависимости от того, какие селекторы - дочерние или контекстные - используются в правиле CSS.
Дочерним называется элемент, который расположен непосредственно внутри родительского
. Прежде чем приступить непосредственно к теме, приведу картинку, которая отражает иерархию тегов в HTML документе на примере абзаца, текст которого приведен выше и который будем сегодня разбирать:
Такая конструкция еще называется деревом элементов. На этом рисунке наглядно представлена вложенность контейнеров, что и предполагает иерархические отношения между тегами. Тег абзаца p является дочерним элементом по отношению . В то же время тег strong не является дочерним для div, так как раcполагается в контейнере p.
Дочерний CSS селектор
Дочерний селектор в дереве элементов находится всегда непосредственно внутри родительского элемента, в этом случае синтаксис написания CSS селектора будет следующим:
Стиль будет применен к Селектору 2, но только в том случае, если он является дочерним для Селектора 1. Разберем более подробно, используя приведенный выше скриншот с деревом элементов. Например, следуя синтаксису, можно установить такое правило:
P> em {color: green;}
Это правило будет влиять на последнее слово абзаца “курсивом”, поскольку именно оно заключено между открывающим и закрывающим тегами em. Тег em является дочерним для p, потому что размещается непосредственно внутри него, следовательно текст содержания, а именно слово “курсивом” будет окрашено в зеленый цвет.
Однако другое тег em не служит прямым потомком тега p, так как входит в состав тега strong, вследствии чего часть абзаца “теги форматирования em и strong” не будет окрашена.
Контекстный CSS селектор
Настала очередь разобраться, что такое контекстный селектор CSS
. При верстке той или иной страницы сайта очень часто теги вкладываются один в другой. Для того, чтобы стили для таких элементов работали корректно, используются селекторы, которые действуют в каком-то контексте, отсюда и название.
Если для того, чтобы CSS правило было бы применено, дочерний селектор должен обязательно находиться непосредственно внутри родительского элемента (первый уровень вложенности), то для контекстного селектора это совершенно неважно и может быть применен любой уровень вложенности, все равно свойства элемента будут переданы от родителя. При этом синтаксис такой:
Как видим, контекстный селектор состоит из простых селекторов, разделенных пробелом. Для контекстных селекторов допускается применять два и более вложенных друг в друга тега. Составим теперь CSS правило для испытуемого параграфа, который я приводил выше:
P em {color: green;}
Как видите, зеленым окрашен не только текст части содержания абзаца, который непосредственно заключен в тег форматирования em, то есть слово “курсивом”, но и участок текста другого тега em, который входит еще и в состав тега strong. Это случилось потому, что действует правило с контекстным селектором, для которого не важен уровень вложенности в отличие от дочернего селектора. В этом и есть принципиальная разница дочернего и контекстного селектора.
Рассмотрим еще один пример взаимодействия контекстных и дочерних селекторов с нашим абзацем. Пропишем cледующие CSS правила для дочернего и контекстного селектора:
Div em {color: red;}
p> em {color: green;}
После этого наш абзац приобретает такое оформление:
Как видите, кусок текста, заключенный в теги em и strong, выкрашен в красный цвет, потому что для него справедливо правило контекстного селектора, то есть тег em заключен в контейнеры strong и div, а уровень вложенности, как уже было отмечено, не имеет значения.
Возникает вопрос: почему же слово “курсивом”, тоже являющееся содержанием em, окрашено в зеленый цвет? Ведь и для него правило контекстного селектора является актуальным. Но для этого участка текста абзаца справедливо и правило дочернего селектора, потому что оно не противоречит тому условию, что для дочернего селектора элемент должен непосредственно входить в состав тега p.
Дело в том, в CSS действует закон приоритета для CSS свойств, находящихся ниже. То есть в данном случае правило дочернего селектора находится в документе ниже, чем CSS стили, прописанные для контекстного селектора контейнера div. Поэтому слово “курсивом” стало зеленым. Если поменять их местами, то правило «p> em {color: green;}» перестает действовать и участок текста “курсивом” будет красным.
Основная задача данного селектора следует из его названия и заключается в обращении к дочернему элементу. Выводится с помощью элементарного знака «>», который связывает дочерний элемент с элементом родителя. Также стоит отметить, что в обращении используется простые селекторы. В качестве примера рассмотрим следующую кодировку:
Element >
ul {
padding-
top:
20px;
}
Данная кодировка означает, что к списку, который вложен в element, будет применен внутренний отступ в 20 пикселей от верхнего края. Наличие в этой записи значка «>» показывает, что правило применится только к спискам первого уровня вложенности.
Подробный анализ работы селектора дочернего элемента
Селектор элемента дочернего имеет схожие свойства с понятием селектор потомка. Однако существует характерная черта, которая показывает принципиальное отличие данных операций. Оно заключается в том, что влияние селектора потомка распространяется на абсолютно все элементы, в то время как дочерний селектор подчиняет стили позиций первого уровня классификаций.
Более наглядно оценить работу оператора дочернего селектора поможет следующий пример:
Div >
р {
color:
#ff0000; /* красный */
}
<
div>
Данная строка будет иметь по умолчанию черный текст.
<
span>
Эта строка перекраситься в красный в следствие того,
что р является дочерним
тегом для дива.
<
p>
Опять видим черные буквы.
<
span>
Здесь мы видим тоже черные символы,
так как
для этого спана родителем является тег р.
Данный пример подтверждает работу оператора дочернего селектора согласно степени вложенности.
Ограничение для применения оператора дочернего селектора
Стоит отметить, что данная операция поддерживается всеми браузерами кроме легендарного Internet Explorer 6. Думаю, мало кто использует данный браузер, однако же если таковые уникумы имеются, то для них существует выход из ситуации, который будет описан в отдельной статье.
Зачем применяется
Программеры обращаются к селекторам элементов дочерних в тех случаях, когда нужно присвоить свой уникальный стиль вложенным элементам. Также использование этого селектора может сократить объем CSS, что повысит читабельность документа. Как показывает практика, к этой операции обращаются чаще всего при создании выпадающих менюшек.
Также селектор элемента дочернего используется для присвоения уникальных стилей элементам, родители которых уже известны за ранее. Другими словами:
Main >
header
{
/* оформление относится только к главному хедеру */
}
Данный пример справедлив в тех случаях, когда тег header используют для выделения заголовков статей. В нашем случае мы задаем оформление только основному хедеру, и не задеваем второстепенные. Этот прием также позволяет избегать применения лишнего раза идентификаторов, что в свою очередь облегчает вес CSS-файла и делает его более читабельным.
Подводя итоги
Таким образом, оператор дочернего элемента можно применять не только для оформления выпадающих меню, но и для небольшой оптимизации вашего интернет ресурса к работе поисковых роботов.
Дочерние селекторы CSS - это селекторы, которые используются для применения стилей к элементам только в тех случаях, когда они являются дочерними по отношению к другим (родительским) элементам. Как и селекторы потомков, дочерние селекторы являются составными и складываются из простых селекторов (классы, идентификаторы и т.д.).
И снова, если вы забыли, что такое дочерние элементы, то давайте вспомним, разобрав уже знакомый вам пример.
<тег1>
<тег2>...
<тег3><тег4>...
Элемент называется дочерним по отношению к другому элементу, если он находится внутри него на первом уровне вложенности. В нашем примере <тег2>
и <тег3>
являются дочками <тег1>
, а <тег4>
- это дочка <тег3>
.
Дочерние селекторы состоят из двух или более простых селекторов разделенных знаком ">
", где сначала указывается родитель, потом его дочерний элемент, затем дочка этого дочернего элемента и т.д. То есть, как и в селекторах потомков, задается путь прохождения по дереву документа. Стили будут применены только к тем элементам, селекторы которых находятся последними в списке. Общий синтаксис:
селектор1 > селектор2 {
Пробелы с обоих сторон знака ">
" можно ставить, а можно и нет, по желанию.
Пример использования дочерних селекторов CSS
Дочерние селекторы
Результат в браузере
Параграф1.
Параграф2.
В этом примере вам надо обратить внимание на два момента. Здесь имеется три элемента , но только у двух из них есть рамки, отступы и поля. Почему? И второй момент. Только у первого параграфа синий цвет текста.
Internet Explorer 6.0 не понимает дочерние селекторы, поэтому, если вы создаете свой сайт с учетом этого старого браузера - помните об этом.
Дочерние селекторы в HTML-таблицах
Многие новички (а иногда уже и не новички) в создании сайтов сталкиваются с определенными проблемами при использовании дочерних селекторов в HTML-таблицах. Чтобы вы поняли, о чем идет речь, давайте посмотрим на такую обычную таблицу.
| Ячейка 1.1 | Ячейка 1.2 |
| Ячейка 2.1 | Ячейка 2.2 |
А теперь вопрос. Как вы поступите, если вам понадобится с помощью дочерних селекторов пройти от тега к ячейкам? Если вы решили написать вот так, то это неверно:
table > tr > td { свойство:
значение; свойство:
значение; ... }
А догадываетесь, почему неверно? Нет? Дело в том, что вы забыли еще про один элемент - , который даже если не указан явно, то все равно незримо присутствует в каждой HTML-таблице. Просто у него нет обязательных открывающих и закрывающих тегов, поэтому про него часто забывают. Кстати да, в HTML-учебнике
мы его с вами не проходили, так как в реальности его явное указание редко когда нужно. Ну, думаю вы уже догадались, какая будет правильная запись, но я вам все же покажу.
table > tbody > tr > td { свойство:
значение; свойство:
значение; ... }
Кстати, не только таблицы имеют элементы с необязательными открывающими тегами, есть и еще такие элементы. Просто на практике «проблемы забывчивости» возникают чаще всего именно с таблицами, поэтому я и заострил ваше внимание на этом.
Домашнее задание.
- Установите на странице шрифт Arial с размером 0.9em и какой-нибудь фон.
- Напишите на странице несколько заголовков и параграфов, измените размер и цвет текста заголовков так, как посчитаете нужным.
- Сделайте так, чтобы ссылки непосредственно в параграфах страницы были синего цвета без подчеркивания. Но при этом, если ссылки дополнительно обрамляются любым тегом, например для курсива, то они должны отображаться уже с подчеркиванием и красного цвета. Еще раз заостряю ваше внимание на том, что не надо прописывать стили ссылок с каждым обрамляющим тегом в отдельности, сделайте универсально. Как? Подумайте.
- Создайте небольшое меню в правой части страницы и зафиксируйте его, для этого вам понадобится свойство и еще парочка сопутствующих ему свойств, там разберетесь. При этом, пусть меню не только остается на месте в пределах окна браузера, но и при скроллинге не наползает на содержимое страницы.
Думаю последний пункт урока будет для вас самым сложным, но не пытайтесь сразу полностью погрузиться в освоение позиционирования. Просто сделайте домашнее задание. Кстати, этот пункт не будет работать в Internet Explorer 6.0, так как старичек не понимает фиксированное позиционирование.
Влад Мержевич
Дочерним называется элемент, который непосредственно располагается внутри родительского
элемента. Чтобы лучше понять отношения между элементами документа, разберём
небольшой код (пример 12.1).
Пример 12.1. Вложенность элементов в документе
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam
erat volutpat.
Ut wisis enim ad minim veniam,
quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.
В данном примере применяется несколько контейнеров, которые в коде располагаются
один в другом. Нагляднее это видно на дереве элементов, так называется структура
отношений тегов документа между собой (рис. 12.1).
Рис. 12.1. Дерево элементов для примера
На рис. 12.1 в удобном виде представлена вложенность элементов и их иерархия.
Здесь дочерним элементом по отношению к тегу
выступает тег
Вместе с тем тег
не является дочерним для тега
, поскольку
он расположен в контейнере
Вернёмся теперь к селекторам. Дочерним селектором считается такой, который
в дереве элементов находится прямо внутри родительского элемента. Синтаксис
применения таких селекторов следующий.
Селектор 1 > Селектор 2 { Описание правил стиля }
Стиль применяется к Селектору 2, но только в том случае, если он является
дочерним для Селектора 1.
Если снова обратиться к примеру 12.1, то стиль вида P
> EM { color: red }
будет установлен для первого абзаца документа,
поскольку тег
находится внутри контейнера И не даст никакого результата для второго
абзаца. А все из-за того, что тег
во втором
абзаце расположен в контейнере
, поэтому
нарушается условие вложенности.
По своей логике дочерние селекторы похожи на селекторы контекстные. Разница
между ними следующая. Стиль к дочернему селектору применяется только в том случае,
когда он является прямым потомком, иными словами, непосредственно располагается
внутри родительского элемента. Для контекстного селектора же допустим любой уровень
вложенности. Чтобы стало понятно, о чем идет речь, разберём следующий код (пример 12.2).
Пример 12.2. Контекстные и дочерние селекторы
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Дочерние селекторы
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
aliguam erat volutpat.
Результат данного примера показан на рис. 12.2.
Рис. 12.2. Цвет текста, заданный с помощью дочернего селектора
На тег
в примере действуют одновременно два правила: контекстный селектор (тег
расположен внутри
) и дочерний селектор (тег
является дочерним по отношению к
). При этом правила являются равносильными, поскольку все условия для них выполняются и не противоречат друг другу. В подобных случаях применяется стиль, который расположен в коде ниже, поэтому курсивный текст отображается красным цветом. Стоит поменять правила местами и поставить DIV I
ниже, как цвет текста изменится с красного на зеленый.
Заметим, что в большинстве случаев от добавления дочерних селекторов можно
отказаться, заменив их контекстными селекторами. Однако использование дочерних
селекторов расширяет возможности по управлению стилями элементов, что в итоге
позволяет получить нужный результат, а также простой и наглядный код.
Удобнее всего применять указанные селекторы для элементов, которые обладают
иерархической структурой — сюда относятся, например, таблицы и разные списки.
В примере 12.3 показано изменение вида списка с помощью стилей. За счёт
вложения одного списка в другой получаем разновидность меню. Заголовки при этом
располагаются горизонтально, а набор ссылок — вертикально под заголовками
(рис. 12.3).
Рис. 12.3. Список в виде меню
Для размещения текста по горизонтали к селектору LI
добавляется стилевое свойство float
. Чтобы при этом
разделить между собой стиль горизонтального и вертикального списка и применяются
дочерние селекторы (пример 12.3).
Пример 12.3. Использование дочерних селекторов
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Дочерние селекторы
В данном примере дочерние селекторы требуются, чтобы разделить стиль элементов списка верхнего уровня и вложенные списки, которые выполняют разные задачи, поэтому стиль для них не должен пересекаться.
Вопросы для проверки
1. Какой цвет будет у жирного курсивного текста в коде
Нормы освещённости построены на основе классификации зрительных работ по определенным количественным признакам.
При использовании следующего стиля?
P { color: green; }
B {color: blue; }
I {color: orange; }
B > I { color: olive; }
P > I { color: yellow; }
- Зелёный.
- Синий.
- Оранжевый.
- Оливковый.
- Жёлтый.
2. Какой элемент является родительским для тега ?
</b></p>
<ol><li><HEAD></li>
<li><BODY></li>
<li><HTML></li>
<li><META></li>
<li><!DOCTYPE></li>
</ol><p><b>3. Для какого тега элемент <!DOCTYPE> выступает родителем?
</b></p>
<ol><li><HTML></li>
<li><TITLE></li>
<li><BODY></li>
<li><HEAD></li>
<li>Ни для одного тега.</li>
</ol><h2>Ответы</h2>
<p>1. Оливковый.</p>
<p>3. Ни для одного тега.</p>
<p>Сложные и тяжелые веб-приложения стали обычными в наши дни. Кроссбраузерные и простые в использовании библиотеки типа jQuery с их широким функционалом могут сильно помочь в манипулировании DOM на лету. Поэтому неудивительно, что многие разработчики использую подобные библиотеки чаще, чем работают с нативным DOM API, с которым было немало проблем . И хотя различия в браузерах по-прежнему остаются проблемой, DOM находится сейчас в лучшей форме, чем 5-6 лет назад , когда jQuery набирал популярность.</p> <p>В этой статье я продемонстрирую возможности DOM по манипулированию HTML, сфокусировавшись на отношения родительских, дочерних и соседних элементов. В заключении я дам данные о поддержке этих возможностей в браузерах, но учитывайте, что библиотека типа jQuery по-прежнему остается хорошей опцией в силу наличия багов и непоследовательностей в реализации нативного функционала.</p> <h2>Подсчет дочерних узлов</h2> <p>Для демонстрации я буду использовать следующую <a href="/master-pc/osnovnye-tegi-i-atributy-yazyka-html-osnovnye-tegi-html-osnovnye.html">разметку HTML</a>, в течение статьи мы ее несколько раз изменим:</p><p> <body>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</body>
</p><p>Var myList = document.getElementById("myList");
console.log(myList.children.length); // 6
console.log(myList.childElementCount); // 6
</p><p>Как видите, результаты одинаковые, хотя техники используются разные. В первом случае я использую свойство children . Это свойство только для чтения, оно возвращает коллекцию <a href="/browsing-the-internet/ravnenie-po-centru-v-html-vyravnivanie-elementov-v-html-vyravnivanie-teksta-po.html">элементов HTML</a>, находящихся внутри запрашиваемого элемента; для подсчета их количества я использую свойство length этой коллекции.</p> <p>Во втором примере я использую метод childElementCount , который мне кажется более аккуратным и потенциально более поддерживаемым способом (подробнее обсудим это позже, я не думаю, что у вас возникнут проблемы с пониманием того, что он делает).</p> <p>Я мог бы попытаться использовать childNodes.length (вместо children.length), но посмотрите на результат:</p><p>Var myList = document.getElementById("myList");
console.log(myList.childNodes.length); // 13
</p><p>Он возвращает 13, потому что childNodes это коллекция всех узлов, включая пробелы - учитывайте это, если вам важна разница между дочерними узлами и дочерними узлами-элементами.</p> <h2>Проверка существования дочерних узлов</h2> <p>Для проверки наличия у элемента дочерних узлов я могу использовать метод hasChildNodes() . Метод возвращает логическое значение, сообщающие об их наличии или отсутствии:</p><p>Var myList = document.getElementById("myList");
console.log(myList.hasChildNodes()); // true
</p><p>Я знаю, что в моем списке есть дочерние узлы, но я могу изменить HTML так, чтобы их не было; теперь разметка выглядит так:</p><p> <body>
</body>
</p><p>И вот результат нового запуска hasChildNodes() :</p><p>Console.log(myList.hasChildNodes()); // true
</p><p>Метод по прежнему возвращает true . Хотя список не содержит никаких элементов, в нем есть пробел, являющийся валидным типом узла. Данный метод учитывает все узлы, не только узлы-элементы. Чтобы hasChildNodes() вернул false нам надо еще раз изменить разметку:</p><p> <body>
</body>
</p><p>И теперь в консоль выводится ожидаемый результат:</p><p>Console.log(myList.hasChildNodes()); // false
</p><p>Конечно, если я знаю, что могу столкнуться с пробелом, то сначала я проверю существование дочерних узлов, затем с помощью свойства nodeType определяю, есть ли среди них узлы-элементы.</p> <h2>Добавление и удаление дочерних элементов</h2> <p>Есть техника, которые можно использовать для добавления и удаления элементов из DOM. Наиболее известная из них основана на сочетании методов createElement() и appendChild() .</p><p>Var myEl = document.createElement("div");
document.body.appendChild(myEl);
</p><p>В данном случае я создаю <div> с помощью метода createElement() и затем добавляю его к body . Очень просто и вы наверняка использовали эту технику раньше.</p> <p>Но вместо вставки специально <a href="/master-pc/peretaskivanie-elementov-drag-and-drop-sozdaem-prostoi-html5-drag-drop-interfeis.html">создаваемого элемента</a>, я также могу использовать appendChild() и просто переместить существующий элемент. Предположим, у нас следующая разметка:</p><p> <div id="c">
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
<p>Example text</p>
</div>
</p><p>Я могу изменить место расположения списка с помощью следующего кода:</p><p>Var myList = document.getElementById("myList"),
container = document.getElementById("c");
container.appendChild(myList);
</p><p>Итоговый DOM будет выглядеть следующим образом:</p><p> <div id="c">
<p>Example text</p>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</div>
</p><p>Обратите внимание, что весь список был удален со своего места (над параграфом) и затем вставлен после него перед закрывающим body . И хотя обычно метод appendChild() используется для добавления элементов созданных с помощью createElement() , он также может использоваться для перемещения существующих элементов.</p> <p>Я также могу полностью удалить дочерний элемент из DOM с помощью removeChild() . Вот как удаляется наш список из предыдущего примера:</p><p>Var myList = document.getElementById("myList"),
container = document.getElementById("c");
container.removeChild(myList);
</p><p>Теперь элемент удален. Метод removeChild() возвращает удаленный элемент и я могу его сохранить на случай, если он потребуется мне позже.</p><p>Var myOldChild = document.body.removeChild(myList);
document.body.appendChild(myOldChild);
</p><p>Таке существует метод ChildNode.remove() , относительно недавно добавленный в спецификацию:</p><p>Var myList = document.getElementById("myList");
myList.remove();
</p><p>Этот метод не возвращает удаленный объект и не работает в IE (только в Edge). И оба метода удаляют текстовые узлы точно так же, как и узлы-элементы.</p> <h2>Замена дочерних элементов</h2> <p>Я могу заменить существующий дочерний элемент новым, независимо от того, существует ли этот <a href="/browsers/novyi-mehanizm-razmeshcheniya-elementov-v-forme-vyravnivanie-elementov.html">новый элемент</a> или я создал его с нуля. Вот разметка:</p><p> <p id="par">Example Text</p>
</p><p>Var myPar = document.getElementById("par"),
myDiv = document.createElement("div");
myDiv.className = "example";
myDiv.appendChild(document.createTextNode("New element text"));
document.body.replaceChild(myDiv, myPar);
</p><p> <div class="example">New element text</div>
</p><p>Как видите, метод replaceChild() принимает два аргумента: новый элемент и заменяемый им старый элемент.</p> <p>Я также могу использовать это метод для перемещения существующего элемента. Взгляните на следующий HTML:</p><p> <p id="par1">Example text 1</p>
<p id="par2">Example text 2</p>
<p id="par3">Example text 3</p>
</p><p>Я могу заменить третий параграф первым параграфом с помощью следующего кода:</p><p>Var myPar1 = document.getElementById("par1"),
myPar3 = document.getElementById("par3");
document.body.replaceChild(myPar1, myPar3);
</p><p>Теперь сгенерированный DOM выглядит так:</p><p> <p id="par2">Example text 2</p>
<p id="par1">Example text 1</p>
</p><h2>Выборка конкретных дочерних элементов</h2> <p>Существует несколько <a href="/master-pc/prostaya-programma-dlya-kodirovaniya-papok-na-fleshke-kak-postavit-parol-na.html">разных способов</a> выбора конкретного элемента. Как показано ранее, я могу начать с использования коллекции children или свойства childNodes . Но взглянем на другие варианты:</p> <p>Свойства firstElementChild и lastElementChild делают именно то, чего от них можно ожидать по их названию: выбирают первый и последний дочерние элементы. Вернемся к нашей разметке:</p><p> <body>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</body>
</p><p>Я могу выбрать первый и последний элементы с помощью этих свойств:</p><p>Var myList = document.getElementById("myList");
console.log(myList.firstElementChild.innerHTML); // "Example one"
console.log(myList.lastElementChild.innerHTML); // "Example six"
</p><p>Я также могу использовать свойства previousElementSibling и nextElementSibling , если я хочу выбрать дочерние элементы, отличные от первого или последнего. Это делается сочетанием свойств firstElementChild и lastElementChild:</p><p>Var myList = document.getElementById("myList");
console.log(myList.firstElementChild.nextElementSibling.innerHTML); // "Example two"
console.log(myList.lastElementChild.previousElementSibling.innerHTML); // "Example five"
</p><p>Также есть сходные свойства firstChild , lastChild , previousSibling , и nextSibling , но они учитывают все типы узлов, а не только элементы. Как правило, свойства, учитывающие только узлы-элементы полезнее тех, которые выбирают все узлы.</p> <h2>Вставка контента в DOM</h2> <p>Я уже рассматривал способы вставки элементов в DOM. Давайте перейдем к похожей теме и взглянем на новые возможности по вставке контента.</p> <p>Во-первых, есть простой метод insertBefore() , он во многом похож на replaceChild() , принимает два аргумента и при этом работает как с новыми элементами, так и с существующими. Вот разметка:</p><p> <div id="c">
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
<p id="par">Example Paragraph</p>
</div>
</p><p>Обратите внимание на параграф, я собираюсь сначала убрать его, а затем вставить перед списком, все одним махом:</p><p>Var myList = document.getElementById("myList"),
container = document.getElementBy("c"),
myPar = document.getElementById("par");
container.insertBefore(myPar, myList);
</p><p>В полученном <a href="/master-pc/html-kod-krasnaya-stroka-kogda-vsem-abzacam-kak-mne-dlya-kazhdogo-abzaca.html">HTML параграф</a> будет перед списком и это еще один способ перенести элемент.</p><p> <div id="c">
<p id="par">Example Paragraph</p>
<ul id="myList">
<li>Example one</li>
<li>Example two</li>
<li>Example three</li>
<li>Example four</li>
<li>Example five</li>
<li>Example Six</li>
</ul>
</div>
</p><p>Как и replaceChild() , insertBefore() принимает два аргумента: добавляемый элемент и элемент, перед которым мы хотим его вставить.</p> <p>Этот метод прост. Попробуем теперь более мощный способ вставки: метод insertAdjacentHTML() .</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</div>
<span style="display:none" class="updated">2016-05-11</span>
<div class="clear"></div>
</div>
</article>
<div class="post-navigation">
<div class="post-previous"> <a href="/browsing-the-internet/izmenenie-interfeisa-youtube-tvorcheskaya-studiya-oformlenie-kanala.html" rel="prev"><span>Предыдущий</span> Оформление канала ютуб, изменить описание, добавить ключевые слова канала и подтвердить канал Как установить настройки загрузки видео по умолчанию</a>
<!-- /next_post --></div>
<div class="post-next"> <a href="/spam/gde-v-aifone-diktofon-i-kak-zapisat-golosovoe-soobshchenie-kak-avtomaticheski.html" rel="next"><span>Следующий</span> Как автоматически записывать все телефонные разговоры Приложение «Запись звонков» для "Андроида"</a>
<!-- /next_post --></div>
</div>
<section id="related_posts">
<div class="block-head">
<h3>Похожие публикации</h3>
<div class="stripe-line"></div>
</div>
<div class="post-listing">
<div class="related-item">
<div class="post-thumbnail">
<a href="/search/edinicei-izmereniya-udelnoi-elektroprovodnosti-yavlyaetsya.html">
<img width="310" height="165" src="/uploads/1226b503a714f16604e695b62a761cec.jpg" class="attachment-tie-medium wp-post-image" alt="Определение удельной электропроводности воды с помощью кондуктометра PWT Hanna instruments" / loading=lazy> <span class="fa overlay-icon"></span>
</a>
</div>
<h3><a href="/search/edinicei-izmereniya-udelnoi-elektroprovodnosti-yavlyaetsya.html" rel="bookmark">Определение удельной электропроводности воды с помощью кондуктометра PWT Hanna instruments</a></h3>
<p class="post-meta"><span class="tie-date"><i class="fa fa-clock-o"></i> 2024-05-05 02:37:35</span></p>
</div>
<div class="related-item">
<div class="post-thumbnail">
<a href="/internet/uvelichenie-dalnosti-zvonka-era-433-92-mhz-besprovodnoi-dvernoi-zvonok.html">
<img width="310" height="165" src="/uploads/f20d8a085aa3d83f3d06e22df95b9b68.jpg" class="attachment-tie-medium wp-post-image" alt="Беспроводной дверной звонок - характеристика и преимущества" / loading=lazy> <span class="fa overlay-icon"></span>
</a>
</div>
<h3><a href="/internet/uvelichenie-dalnosti-zvonka-era-433-92-mhz-besprovodnoi-dvernoi-zvonok.html" rel="bookmark">Беспроводной дверной звонок - характеристика и преимущества</a></h3>
<p class="post-meta"><span class="tie-date"><i class="fa fa-clock-o"></i> 2024-05-03 02:40:16</span></p>
</div>
<div class="related-item">
<div class="post-thumbnail">
<a href="/skype/mak-ne-vklyuchaetsya-dalshe-zagruzki-macbook-ne-zagruzhaetsya-posle.html">
<img width="310" height="165" src="/uploads/58bc90b33991151c61475901d42b408c.jpg" class="attachment-tie-medium wp-post-image" alt="MacBook не загружается после обновления" / loading=lazy> <span class="fa overlay-icon"></span>
</a>
</div>
<h3><a href="/skype/mak-ne-vklyuchaetsya-dalshe-zagruzki-macbook-ne-zagruzhaetsya-posle.html" rel="bookmark">MacBook не загружается после обновления</a></h3>
<p class="post-meta"><span class="tie-date"><i class="fa fa-clock-o"></i> 2024-05-02 02:33:25</span></p>
</div>
</div>
</section>
<script type="text/javascript">
document.getElementById('hc_full_comments').innerHTML = '';
</script>
</div>
<aside id="sidebar">
<div class="theiaStickySidebar">
</div>
</aside>
<div class="clear"></div>
</div>
<div class="e3lan e3lan-bottom"> </div>
<footer id="theme-footer">
<div id="footer-widget-area" class="wide-left-3c">
</div>
<div class="clear"></div>
</footer>
<div class="clear"></div>
<div class="footer-bottom">
<div class="container">
<div class="alignright">
</div>
<div class="social-icons">
<a class="ttip-none" title="Google+" href="" target="_blank"><i class="fa fa-google-plus"></i></a><a class="ttip-none" title="Twitter" href="https://www.twitter.com/share?url=https://sushiandbox.ru/social-network/css-obrashchenie-k-dochernim-elementam-tehniki-raboty-s-dom-roditelskie-dochernie-i.html" target="_blank"><i class="fa fa-twitter"></i></a>
<a
class="ttip-none" title="vk.com" href="https://vk.com/share.php?url=https://sushiandbox.ru/social-network/css-obrashchenie-k-dochernim-elementam-tehniki-raboty-s-dom-roditelskie-dochernie-i.html" target="_blank"><i class="fa fa-vk"></i></a>
</div>
<div class="alignleft">
© Copyright 2024, Осваиваем ПК - Интернет. Скайп. Социальные сети. Уроки по Windows </div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</div>
<div id="topcontrol" class="fa fa-angle-up" title="Прокрутить Вверх"></div>
<div id="fb-root"></div>
<div id="reading-position-indicator"></div>
<script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/CodeCanyon-Arqamv2.0.4-RetinaResponsiveWordPressSocialCounterPlugin-5085289/assets/js/scripts.js'></script>
<script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/ark-hidecommentlinks/js/ark-hidecommentlinks.js'></script>
<script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/ark-hidecommentlinks/js/pcl_tooltip.js'></script>
<script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/ark-hidecommentlinks/js/pcl_tooltip_init.js'></script>
<script type='text/javascript' src='https://sushiandbox.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js'></script>
<script type='text/javascript' src='/assets/scripts1.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tie = {
"mobile_menu_active": "true",
"mobile_menu_top": "",
"lightbox_all": "true",
"lightbox_gallery": "true",
"woocommerce_lightbox": "",
"lightbox_skin": "dark",
"lightbox_thumb": "vertical",
"lightbox_arrows": "",
"sticky_sidebar": "1",
"is_singular": "1",
"SmothScroll": "true",
"reading_indicator": "true",
"lang_no_results": "\u041d\u0435\u0442 \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u044b",
"lang_results_found": "\u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u043e\u0432 \u043d\u0430\u0439\u0434\u0435\u043d\u043e"
};
/* ]]> */
</script>
<script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/tie-scripts.js'></script>
<script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/ilightbox.packed.js'></script>
<script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/search.js'></script>
<script type='text/javascript' src='https://sushiandbox.ru/wp-content/themes/sahifa/js/jquery.cycle.all.js'></script>
</body>
</html>
sushiandbox.ru Осваиваем ПК - Интернет. Скайп. Социальные сети. Уроки по Windows.