[{"data":1,"prerenderedAt":1497},["ShallowReactive",2],{"$fQABoLeySa1_tz0NxziMfkXXqAzgNVqvTMvKmUejZ_Ks":3,"$fMMUdSFktwQFqMVGPrTtt3EC5yheBp7PzwIqznamFcMo":69,"$fc0LoAJgqXDLbKKd2JS_NpM4SuzBK8EycUXINSg09CKU":72,"$fM3ea55k6lKMPOTM84llDB26VSQDVVbxiQuSBFQw9P_c":77,"$f1Prj1xEczHja_-L7FyIGgRHd5_cSWHo7r6AE5aheAik":422,"$fI5fDmvm-5tr9wcH0eHaKZa1j3y_FQIQaHHPqbZxAHJE":644,"mdc-vokrit-key":664,"mdc-6uy914-key":676,"mdc--7numfo-key":684,"mdc-gvnlat-key":693,"mdc--qp74st-key":743,"mdc-zdx5tm-key":752,"mdc-wqm4y4-key":825,"mdc--bfv6rf-key":970,"mdc-u7iwy7-key":1027,"mdc-xmptv-key":1035,"mdc--k3l47y-key":1324,"mdc--vl0pvy-key":1332,"mdc--qf9oeq-key":1489},{"content":4,"quizQuestionContent":40,"type":59,"pageMeta":60},[5,9,13,16,20,24,27,30,34,37],{"id":6,"value":7,"isTypeH1":8},"1957","Какие объекты считаются узлами DOM",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4562","Теория: что такое узел DOM","what-is-a-dom-node",{"id":14,"value":15,"isTypeParagraph":8},"10483","DOM представляет HTML-документ как дерево объектов, где базовой единицей является узел (node). Узел — это объект DOM, который участвует в дереве документа и имеет общий набор свойств/методов базового интерфейса `Node`.\n\nИнтерфейс `Node` является базовой абстракцией: “просто Node” как отдельный самостоятельный тип обычно не создается, но многие конкретные типы DOM-объектов реализуют его и поэтому считаются узлами. В веб-разработке чаще всего встречаются узлы документа (`Document`), элементы (`Element`), текст (`Text`), комментарии (`Comment`), а также фрагменты (`DocumentFragment`).",{"id":17,"description":18,"titleAlert":19,"isTypeAlertInfo":8},"698","DOM — это объектное представление документа в памяти (дерево узлов), а не исходная строка HTML.",null,{"id":21,"value":22,"anchor":23,"isTypeH2":8},"4563","Ключевые типы узлов и nodeType","node-types-and-nodetype",{"id":25,"value":26,"isTypeParagraph":8},"10484","Для различения типов узлов используется числовой идентификатор `nodeType`. Для удобства чтения кода применяются константы вроде `Node.ELEMENT_NODE`, `Node.TEXT_NODE` и т. п.\n\nТаблица наиболее важных типов `nodeType` (чаще всего применяются на практике):\n| Тип узла | Константа | nodeType | Что представляет |\n|---|---:|---:|---|\n| Document | `Node.DOCUMENT_NODE` | 9 | документ целиком (`document`) |\n| Element | `Node.ELEMENT_NODE` | 1 | HTML-элемент (`\u003Cdiv>`, `\u003Cspan>`) |\n| Text | `Node.TEXT_NODE` | 3 | текст внутри элементов |\n| Comment | `Node.COMMENT_NODE` | 8 | комментарий `\u003C!-- ... -->` |\n| DocumentType | `Node.DOCUMENT_TYPE_NODE` | 10 | `\u003C!doctype html>` |\n| DocumentFragment | `Node.DOCUMENT_FRAGMENT_NODE` | 11 | временный контейнер поддерева |\n| Attr (исторически важно знать) | `Node.ATTRIBUTE_NODE` | 2 | узел атрибута (в современной практике обычно обходится без него) |",{"id":28,"description":29,"titleAlert":19,"isTypeAlertWarning":8},"765","Существуют типы узлов, которые в современных браузерных DOM-деревьях почти не встречаются или считаются устаревшими в практическом смысле (например, некоторые “служебные” XML-типы), поэтому для начинающего обычно достаточно типов из таблицы выше.",{"id":31,"value":32,"anchor":33,"isTypeH2":8},"4564","Практика: как “увидеть” узлы","how-to-see-dom-nodes",{"id":35,"value":36,"isTypeParagraph":8},"10485","Проверка типа узла выполняется через `nodeType`, а понимание состава дочерних узлов — через `childNodes` (все узлы) и `children` (только элементы). Это помогает увидеть, что между HTML-тегами часто присутствуют текстовые узлы, даже если визуально кажется, что “там ничего нет”.\n\nПример: элемент и текстовый узел внутри него\n```\nconst p = document.createElement(\"p\");\np.textContent = \"Once upon a time…\";\n\nconsole.log(p.nodeType === Node.ELEMENT_NODE);         // true\nconsole.log(p.firstChild.nodeType === Node.TEXT_NODE); // true\n```\n\nПример: документ, doctype и фрагмент\n```\nconsole.log(document.nodeType === Node.DOCUMENT_NODE); // true\nconsole.log(document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE); // true\n\nconst frag = document.createDocumentFragment();\nconsole.log(frag.nodeType === Node.DOCUMENT_FRAGMENT_NODE); // true\n```\n\nПример: комментарий как отдельный узел\n```\nconst comment = document.createComment(\"hi\");\n\nconsole.log(comment.nodeType === Node.COMMENT_NODE); // true\nconsole.log(comment.nodeName); // обычно \"#comment\"\n```\n\nПример: разница `childNodes` и `children` (частая причина ошибок у начинающих)\nОднострочные фрагменты кода следует оборачивать в кавычки кода: `childNodes` и `children`.\n```\n// HTML: \u003Cdiv id=\"root\">A\u003Cspan>B\u003C/span>\u003C!--C-->\u003C/div>\nconst root = document.getElementById(\"root\");\n\nconsole.log(root.childNodes.length); // элементы + текст + комментарии\nconsole.log(root.children.length);   // только элементы\n```\n\nЕсли в разметке есть текст между тегами (включая переносы строк и пробелы форматирования), в `childNodes` появятся узлы `Text`. Из-за этого цикл по `childNodes` может неожиданно “натыкаться” на текст, хотя ожидались только элементы.\n\nСхема дерева (упрощенно), показывающая смешанные типы дочерних узлов:\n```\nDocument\n└── html (Element)\n    └── body (Element)\n        └── div#root (Element)\n            ├── #text \"A\" (Text)\n            ├── span (Element)\n            │   └── #text \"B\" (Text)\n            └── #comment \"C\" (Comment)\n```",{"id":38,"value":39,"isTypeParagraph":8},"10486","В итоге: верным является вариант 3, потому что DOM включает разные типы узлов (Document, Element, Text, Comment, DocumentFragment и др.), а не только HTML-элементы.",{"id":41,"options":42,"hint":56,"solution":57,"description":58},"1186",[43,47,50,53],{"id":44,"label":45,"isCorrect":46},"4888","Узлами являются любые значения JavaScript (числа, массивы, функции), потому что DOM полностью состоит из них",false,{"id":48,"label":49,"isCorrect":46},"4889","Узлами являются только CSS-селекторы и правила стилей, так как они управляют отображением страницы  ",{"id":51,"label":52,"isCorrect":8},"4890","Документ (`Document`), элементы (`Element`), текст (`Text`), комментарии (`Comment`), а также фрагменты (`DocumentFragment`) и другие служебные типы считаются узлами DOM  ",{"id":54,"label":55,"isCorrect":46},"4891","Узлами являются только HTML-теги (элементы), а текст и комментарии узлами не считаются  ","Подсказка: достаточно запомнить, что узел DOM — это объект дерева документа, реализующий базовый интерфейс `Node`, а проверка делается через `nodeType` и константы `Node.*_NODE` (например, `1` — элемент, `3` — текст, `8` — комментарий, `9` — документ, `11` — фрагмент).","**Правильный ответ: 3** - документ (`Document`), элементы (`Element`), текст (`Text`), комментарии (`Comment`), а также фрагменты (`DocumentFragment`) и другие служебные типы считаются узлами DOM.\n\nПочему вариант 3 верный:\n- `Document` — узел, представляющий документ целиком.\n- `Element` — узел, представляющий HTML-теги (например, `\u003Cdiv>`).\n- `Text` — узел, содержащий текст внутри элементов (включая пробелы и переносы строк).\n- `Comment` — узел, соответствующий комментариям `\u003C!-- ... -->`.\n- `DocumentFragment` — узел-контейнер для временной сборки поддерева перед вставкой в документ.\n\nПочему остальные варианты неверные:\n- Вариант 1 неверный: числа, массивы и функции — это значения JavaScript, но они не являются узлами DOM и не становятся частью DOM-дерева автоматически.\n- Вариант 2 неверный: CSS-селекторы и CSS-правила относятся к стилям и механизму выбора элементов, но “узлы DOM” описывают структуру документа (дерево), а не оформление.\n- Вариант 4 неверный: DOM состоит не только из HTML-элементов; текст и комментарии тоже представлены узлами, иначе было бы невозможно единообразно обходить дерево и различать содержимое.","Что является узлами в DOM?","quizQuestion",{"title":58,"description":61,"ogTitle":7,"ogDescription":61,"ogImageUrl":62,"canonical":19,"ogLocale":63,"ogSiteName":64,"ogImageType":65,"ogImageWidth":66,"ogImageHeight":67,"ogType":68,"ogUrl":19},"Разбор DOM-узлов: Document, Element, Text, Comment, DocumentFragment, nodeType и примеры кода для понимания структуры DOM.","/og-image.png","ru_RU","goodwebjob.ru","image_jpeg","1200","630","article",{"siteName":70,"siteUrl":71},"GOOD WEB JOB!","https://goodwebjob.ru",[73],{"label":74,"slug":75,"to":76},"Подготовка к тех.интервью","technical-interview","/technical-interview/where-to-begin",{"navigationList":78,"navigationSublist":86},[79,82],{"path":76,"isActive":46,"name":80,"icon":81,"isNavbarMobileDisabled":8},"С чего начать?","material-symbols:visibility-outline-rounded",{"path":83,"isActive":8,"name":84,"icon":85,"isNavbarMobileDisabled":46},"/technical-interview/tasks","Сборник задач","material-symbols:task-outline",[87,96,123,135,141,282,306,315,321,384,404,410],{"title":88,"list":89,"isOpened":46},"Bash",[90,93],{"name":91,"path":92,"isActive":46},"Дан фрагмент bash-скрипта: cd ~; mkdir foo... Что в нем происходит?","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":94,"path":95,"isActive":46},"Дан фрагмент bash-скрипта: target=$(ps -Af | grep $1 | head -n 1)...","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"title":97,"list":98,"isOpened":46},"CSS",[99,102,105,108,111,114,117,120],{"name":100,"path":101,"isActive":46},"Дан HTML-код. Какой будет цвет у текста «Some dummy text»?","/technical-interview/tasks/the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":103,"path":104,"isActive":46},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста «Таким образом, постоянное»?","/technical-interview/tasks/there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":106,"path":107,"isActive":46},"Есть шаблон вложенного HTML кода. Какой будет цвет у текста «One more dummy text»?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":109,"path":110,"isActive":46},"Есть шаблон вложенного HTML кода. Будет ли display:block у body влиять на span?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":112,"path":113,"isActive":46},"Есть HTML код. Будет ли font-weight на span влиять?","/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":115,"path":116,"isActive":46},"Flexbox и Grid, чем отличаются друг от друга?","/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":118,"path":119,"isActive":46},"Заменяют ли Flexbox и Grid друг друга?","/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":121,"path":122,"isActive":46},"Есть CSS и JS анимация. Какая между ними разница, что быстрее, что более удобно?","/technical-interview/tasks/there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"title":124,"list":125,"isOpened":46},"Git",[126,129,132],{"name":127,"path":128,"isActive":46},"Разрабатывал, взял закоммитил, запушил. Оказалось, что запушил не в ту ветку, точнее, коммит не в ту ветку. Какие действия?","/technical-interview/tasks/developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":130,"path":131,"isActive":46},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":133,"path":134,"isActive":46},"Какие существуют стратегии ветвления для работы команды? Что это такое?","/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":136,"list":137,"isOpened":46},"HTML",[138],{"name":139,"path":140,"isActive":46},"Что такое HTML?","/technical-interview/tasks/what-is-html",{"title":142,"list":143,"isOpened":46},"JavaScript",[144,147,150,153,156,159,162,165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252,255,258,261,264,267,270,273,276,279],{"name":145,"path":146,"isActive":46},"Какие логические значения в console.log будут получены?","/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":148,"path":149,"isActive":46},"Почему опасно писать прямо в прототипы базовых типов?","/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":151,"path":152,"isActive":46},"Что вернёт следующий код? Object.create(null).hasOwnProperty('toString')","/technical-interview/tasks/what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":154,"path":155,"isActive":46},"Какое значение выведет консоль с object.property?","/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":157,"path":158,"isActive":46},"Что выведется в console.log([arr[0](), arr[0]()])?","/technical-interview/tasks/what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":160,"path":161,"isActive":46},"Что выведет console.log в результате выполнения цикла while?","/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":163,"path":164,"isActive":46},"Есть функция и объект. Напишите все известные вам способы, чтобы вывести в консоли значение x из объекта, используя функцию","/technical-interview/tasks/there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":166,"path":167,"isActive":46},"Что вернёт метод book.getUpperName()?","/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":169,"path":170,"isActive":46},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":172,"path":173,"isActive":46},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":175,"path":176,"isActive":46},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":178,"path":179,"isActive":46},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":181,"path":182,"isActive":46},"Что вернёт этот код: typeof (function(){})()","/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":184,"path":185,"isActive":46},"Что получится в результате передачи объекта как аргумента в функцию и выполнения кода?","/technical-interview/tasks/what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":187,"path":188,"isActive":46},"Какие способы объявления функции есть в JavaScript?","/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":190,"path":191,"isActive":46},"Что такое this в JavaScript?","/technical-interview/tasks/what-is-this-in-javascript",{"name":193,"path":194,"isActive":46},"Что такое Event Loop, как работает?","/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":196,"path":197,"isActive":46},"Что будет, если вызвать typeof на необъявленной переменной?","/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":199,"path":200,"isActive":46},"Что показывает оператор typeof в JavaScript?","/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":202,"path":203,"isActive":46},"Какие типы данных существует в JavaScript?","/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":205,"path":206,"isActive":46},"Какую структуру использовать для хранения упорядоченного списка строк в JavaScript?","/technical-interview/tasks/what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":208,"path":209,"isActive":46},"Что вернет typeof для массива?","/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":211,"path":212,"isActive":46},"Почему оператор typeof, применённый к массиву, возвращает объект?","/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":214,"path":215,"isActive":46},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":217,"path":218,"isActive":46},"Что возвращает typeof для new Set в JavaScript?","/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":220,"path":221,"isActive":46},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":223,"path":224,"isActive":46},"В чем разница между микро- и макро-тасками в JavaScript?","/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":226,"path":227,"isActive":46},"arr.push(0) повлияет на массив так же, как если бы мы выполнили...","/technical-interview/tasks/arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":229,"path":230,"isActive":46},"Вернуть массив от 1 до n, где числа, кратные 3, заменены на 'fizz', кратные 5 - на 'buzz', а кратные и 3, и 5 одновременно - на 'fizzbuzz'","/technical-interview/tasks/returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":232,"path":233,"isActive":46},"Дана строка: 'one.two.three.four.five'. Необходимо из строки сделать вложенный объект","/technical-interview/tasks/the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":235,"path":236,"isActive":46},"Дано дерево (вложенный объект), надо найти сумму всех вершин","/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":238,"path":239,"isActive":46},"Для каждого вложенного объекта нужно добавить свойство level, которое равняется числу - номер вложенности","/technical-interview/tasks/for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":241,"path":242,"isActive":46},"Для каждой ветви дерева записать номер вложенности данной ветви","/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":244,"path":245,"isActive":46},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":247,"path":248,"isActive":46},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","/technical-interview/tasks/there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":250,"path":251,"isActive":46},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","/technical-interview/tasks/there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":253,"path":254,"isActive":46}," Найти в массиве неповторяющиеся числа","/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":256,"path":257,"isActive":46},"Напишите функцию, который сделает из массива объект","/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":259,"path":260,"isActive":46},"Необходимо проверить, являются ли две строки анаграммами друг друга","/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":262,"path":263,"isActive":46},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","/technical-interview/tasks/odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":265,"path":266,"isActive":46},"Определить, является ли слово палиндромом","/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":268,"path":269,"isActive":46},"«Расплющивание» массива","/technical-interview/tasks/flattening-the-array",{"name":271,"path":272,"isActive":46},"Реализовать функцию, принимающую аргументы \"*\", \"1\", \"b\", \"1c\" и возвращающую строку \"1*b*1c\"","/technical-interview/tasks/implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":274,"path":275,"isActive":46},"Сжатие строк","/technical-interview/tasks/string-compression",{"name":277,"path":278,"isActive":46},"Уникализация значений в массиве","/technical-interview/tasks/unifying-values-in-an-array",{"name":280,"path":281,"isActive":46},"Числа от 1 до 100 находятся в массиве, они хаотично перемешанные, но в нём не хватает одного числа из этой последовательности. Необходимо найти его","/technical-interview/tasks/the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"title":283,"list":284,"isOpened":46},"React",[285,288,291,294,297,300,303],{"name":286,"path":287,"isActive":46},"Для чего нужен React, какие он решает проблемы?","/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":289,"path":290,"isActive":46},"Какой механизм лежит в основе оптимизации обновлений DOM в React?","/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":292,"path":293,"isActive":46},"Если убрать в React VDOM/Fiber, и вручную изменять DOM, разве это не оптимально?","/technical-interview/tasks/if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":295,"path":296,"isActive":46},"Есть блок кода. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":298,"path":299,"isActive":46},"Есть код, в котором список и кнопка. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":301,"path":302,"isActive":46},"Зачем нужен Redux (Mobx/Effector)? Зачем нужен менеджер состояния? Какие проблемы решает?","/technical-interview/tasks/why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":304,"path":305,"isActive":46},"Что мешает организовать централизованное состояние без менеджера состояния? Если организовать состояние механизмами реакта: контекстом, стейтом, в чем проблема? Что менеджеры состояния привносят?","/technical-interview/tasks/what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"title":307,"list":308,"isOpened":46},"Алгоритмы",[309,312],{"name":310,"path":311,"isActive":46},"Что такое алгоритмическая сложность?","/technical-interview/tasks/what-is-algorithmic-complexity",{"name":313,"path":314,"isActive":46},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":316,"list":317,"isOpened":46},"Дебаггинг",[318],{"name":319,"path":320,"isActive":46},"Как диагностировать и исправить нежелательное изменение цвета фона по клику на кнопку, если исходный код сайта запутан и недоступен для прямого чтения?","/technical-interview/tasks/how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"title":322,"list":323,"isOpened":46},"Компьютерные сети",[324,327,330,333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378,381],{"name":325,"path":326,"isActive":46},"Как браузер после ввода домена понимает, откуда брать сайт?","/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":328,"path":329,"isActive":46},"Что такое DNS, как DNS находит нужный IP-адрес?","/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":331,"path":332,"isActive":46},"Как домен попадает в DNS в таблицу соответствия: домен – ip","/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":334,"path":335,"isActive":46},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":337,"path":338,"isActive":46},"Ключевые отличия TCP и UDP","/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":340,"path":341,"isActive":46},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":343,"path":344,"isActive":46},"Что такое HTTP и из чего состоит?","/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":346,"path":347,"isActive":46},"Что такое заголовки в HTTP и зачем они нужны?","/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":349,"path":350,"isActive":46},"Что такое параметры в HTTP?","/technical-interview/tasks/what-are-http-parameters",{"name":352,"path":353,"isActive":46},"Где находится HTML-код в структуре HTTP-ответа?","/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":355,"path":356,"isActive":46},"Чем отличаются 1.0, 1.1, 2.0, 3.0 версии HTTP?","/technical-interview/tasks/what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":358,"path":359,"isActive":46},"Пользователь авторизован на сайте. Как сервер узнает об этом с последующими другими заходами, что «я – авторизованный пользователь»?","/technical-interview/tasks/the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":361,"path":362,"isActive":46},"Что такое cookie?","/technical-interview/tasks/what-is-a-cookie",{"name":364,"path":365,"isActive":46},"Кто является инициатором записи cookie в браузере?","/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":367,"path":368,"isActive":46},"Есть ли возможность с клиента (с браузера) управлять cookie?","/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":370,"path":371,"isActive":46},"Верно ли утверждение, что злоумышленник, контролирующий роутер и прослушивающий трафик, может получить логины и пароли от сайтов, на которые заходит клиент?","/technical-interview/tasks/is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":373,"path":374,"isActive":46},"Всё, что идет по HTTPS – оно защищено?","/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":376,"path":377,"isActive":46},"Все данные зашифрованы, используется https. Хакер взламывает dns и делает подмену одного ip на другой, на фишинговый сайт. В этом случае, злоумышленник может получить данные (логин \\ пароль)?","/technical-interview/tasks/all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":379,"path":380,"isActive":46},"Есть веб-приложение. Помимо HTTP, какие протоколы того же уровня (Application Layer) можно дополнительно использовать в веб-приложении в браузере?","/technical-interview/tasks/there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":382,"path":383,"isActive":46},"Каким способом может выполняться авторизация пользователя на сайте?","/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":385,"list":386,"isOpened":46},"Отрисовка в браузере",[387,390,393,396,399,401],{"name":388,"path":389,"isActive":46},"Что происходит, когда HTTP прислал HTML? Что браузер дальше делает c HTML с учетом того, что она валидная?","/technical-interview/tasks/what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":391,"path":392,"isActive":46},"Как браузер парсит JavaScript и изображения при рендеринге?","/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":394,"path":395,"isActive":46},"Что в браузере блокирует рендеринг страницы?","/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":397,"path":398,"isActive":46},"Что такое DOM в браузере? Что такое CSSOM?","/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":58,"path":400,"isActive":46},"/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":402,"path":403,"isActive":46},"Из чего состоит CSSOM?","/technical-interview/tasks/what-does-cssom-consist-of",{"title":405,"list":406,"isOpened":46},"Ревью кода",[407],{"name":408,"path":409,"isActive":46},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":411,"list":412,"isOpened":46},"Теория вероятности",[413,416,419],{"name":414,"path":415,"isActive":46},"В комнате три человека. Какова вероятность того, что хотя бы двое из них одного пола? То есть два и более.","/technical-interview/tasks/there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":417,"path":418,"isActive":46},"Есть монета. Ее подбрасывают пять раз подряд. Каждый раз записывается, что выпало - орел или решка. Сколько разных последовательностей орлов и решек может при этом получиться?","/technical-interview/tasks/there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":420,"path":421,"isActive":46},"Как гарантированно найти лёгкую фальшивую монету среди 8 за минимальное число взвешиваний на чашечных весах?","/technical-interview/tasks/how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"slugs":423},[424,427,429,431,433,436,439,441,443,445,447,449,452,454,456,458,460,462,464,466,468,470,472,474,476,478,480,482,484,486,488,490,492,494,496,498,500,502,504,506,508,510,512,514,516,518,520,522,524,526,528,530,533,535,537,539,541,543,545,547,549,551,553,555,557,559,561,563,565,567,569,571,573,575,577,579,581,583,585,587,589,591,593,595,597,599,601,603,605,607,609,611,613,615,617,619,621,623,625,627,629,631,633,634,636,638,640,642],{"name":425,"value":426},"Теоретические задания","theoretical-tasks",{"name":181,"value":428},"what-this-code-will-return-typeof-function",{"name":80,"value":430},"where-to-begin",{"name":148,"value":432},"why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":434,"value":435},"Backend","backend",{"name":437,"value":438},"Frontend","frontend",{"name":145,"value":440},"prototype-what-logical-values-will-be-received-in-console-log",{"name":262,"value":442},"odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":253,"value":444},"find-non-repeating-numbers-in-an-array",{"name":226,"value":446},"arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":232,"value":448},"the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":450,"value":451},"Реализовать функцию, похоже как в Jquery","implement-a-function-similar-to-jquery",{"name":238,"value":453},"for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":154,"value":455},"what-value-will-the-console-output-with-object-property",{"name":157,"value":457},"what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":229,"value":459},"returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":259,"value":461},"checks-whether-two-strings-are-anagrams-of-each-other",{"name":265,"value":463},"determines-whether-a-word-is-a-palindrome",{"name":244,"value":465},"there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":271,"value":467},"implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":235,"value":469},"given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":241,"value":471},"for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":247,"value":473},"there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":280,"value":475},"the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"name":250,"value":477},"there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":256,"value":479},"write-a-function-that-will-make-an-object-out-of-an-array",{"name":160,"value":481},"what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":163,"value":483},"there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":175,"value":485},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":178,"value":487},"what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":277,"value":489},"unifying-values-in-an-array",{"name":268,"value":491},"flattening-the-array",{"name":166,"value":493},"what-will-the-book-get-upper-name-method-return",{"name":274,"value":495},"string-compression",{"name":172,"value":497},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":184,"value":499},"what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":325,"value":501},"how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":331,"value":503},"how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":334,"value":505},"how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":337,"value":507},"key-differences-between-tcp-and-udp",{"name":340,"value":509},"tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":343,"value":511},"what-is-http-and-what-does-it-consist-of",{"name":346,"value":513},"what-are-http-headers-and-why-do-we-need-them",{"name":349,"value":515},"what-are-http-parameters",{"name":352,"value":517},"where-is-the-html-code-located-in-the-http-response-structure",{"name":139,"value":519},"what-is-html",{"name":355,"value":521},"what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":358,"value":523},"the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":361,"value":525},"what-is-a-cookie",{"name":364,"value":527},"who-initiates-the-cookie-recording-in-the-browser",{"name":367,"value":529},"is-it-possible-to-manage-cookies-from-the-client-browser",{"name":531,"value":532},"Лайвкодинг","livecoding",{"name":151,"value":534},"what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":373,"value":536},"is-everything-that-goes-through-https-secure",{"name":376,"value":538},"all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":379,"value":540},"there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":391,"value":542},"how-the-browser-parses-javascript-and-images-when-rendering",{"name":388,"value":544},"what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":394,"value":546},"what-is-blocking-the-page-rendering-in-the-browser",{"name":397,"value":548},"what-is-dom-in-a-browser-what-is-cssom",{"name":58,"value":550},"what-are-nodes-in-the-dom",{"name":402,"value":552},"what-does-cssom-consist-of",{"name":100,"value":554},"the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":103,"value":556},"there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":106,"value":558},"there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":109,"value":560},"there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":112,"value":562},"there-is-an-html-code-will-font-weight-affect-span",{"name":115,"value":564},"what-are-the-differences-between-flexbox-and-grid",{"name":118,"value":566},"do-flexbox-and-grid-replace-each-other",{"name":121,"value":568},"there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":84,"value":570},"tasks",{"name":187,"value":572},"what-are-the-ways-to-declare-a-function-in-javascript",{"name":190,"value":574},"what-is-this-in-javascript",{"name":193,"value":576},"what-is-an-event-loop-and-how-does-it-work",{"name":196,"value":578},"what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":199,"value":580},"what-does-the-typeof-operator-show-in-javascript",{"name":202,"value":582},"what-types-of-data-exist-in-javascript",{"name":205,"value":584},"what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":208,"value":586},"what-will-typeof-return-for-an-array",{"name":211,"value":588},"why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":214,"value":590},"if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":217,"value":592},"what-does-typeof-return-for-new-set-in-javascript",{"name":286,"value":594},"what-is-react-used-for-and-what-problems-does-it-solve",{"name":292,"value":596},"if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":295,"value":598},"there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":298,"value":600},"there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":301,"value":602},"why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":319,"value":604},"how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"name":127,"value":606},"developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":130,"value":608},"git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":133,"value":610},"what-are-the-branching-strategies-for-the-team-what-is-it",{"name":408,"value":612},"how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"name":91,"value":614},"here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":94,"value":616},"here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"name":310,"value":618},"what-is-algorithmic-complexity",{"name":313,"value":620},"what-is-the-algorithmic-complexity-of-quick-sort",{"name":220,"value":622},"why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":382,"value":624},"how-can-a-user-be-authorized-on-a-website",{"name":223,"value":626},"what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":414,"value":628},"there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":417,"value":630},"there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":420,"value":632},"how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"name":74,"value":75},{"name":370,"value":635},"is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":328,"value":637},"what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":169,"value":639},"variables-are-declared-as-follows-specify-the-correct-statement",{"name":289,"value":641},"what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":304,"value":643},"what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"cooperation":645,"copyright":648,"reportError":649,"socialNetwork":651},{"link":646,"title":647},"https://t.me/baurinanton","Сотрудничество","© “GOOD WEB JOB!”",{"label":650,"link":646},"Сообщить об ошибке",{"label":652,"socialNetworkList":653},"Мы в соцсетях:",[654,657,660],{"icon":19,"link":655,"title":656},"https://max.ru/u/f9LHodD0cOKMaukdnnahTeL5pwvjrPfUaZ4S8_1rsNy9I9qsmc9Ar3kP_y8","Max",{"icon":658,"link":646,"title":659},"ic:baseline-telegram","Telegram",{"icon":661,"link":662,"title":663},"ri:vk-fill","https://vk.com/baurinanton","VK",{"data":665,"body":666},{},{"type":667,"children":668},"root",[669],{"type":670,"tag":671,"props":672,"children":673},"element","p",{},[674],{"type":675,"value":58},"text",{"data":677,"body":678},{},{"type":667,"children":679},[680],{"type":670,"tag":671,"props":681,"children":682},{},[683],{"type":675,"value":45},{"data":685,"body":686},{},{"type":667,"children":687},[688],{"type":670,"tag":671,"props":689,"children":690},{},[691],{"type":675,"value":692},"Узлами являются только CSS-селекторы и правила стилей, так как они управляют отображением страницы",{"data":694,"body":695},{},{"type":667,"children":696},[697],{"type":670,"tag":671,"props":698,"children":699},{},[700,702,709,711,717,719,725,727,733,735,741],{"type":675,"value":701},"Документ (",{"type":670,"tag":703,"props":704,"children":706},"code",{"className":705},[],[707],{"type":675,"value":708},"Document",{"type":675,"value":710},"), элементы (",{"type":670,"tag":703,"props":712,"children":714},{"className":713},[],[715],{"type":675,"value":716},"Element",{"type":675,"value":718},"), текст (",{"type":670,"tag":703,"props":720,"children":722},{"className":721},[],[723],{"type":675,"value":724},"Text",{"type":675,"value":726},"), комментарии (",{"type":670,"tag":703,"props":728,"children":730},{"className":729},[],[731],{"type":675,"value":732},"Comment",{"type":675,"value":734},"), а также фрагменты (",{"type":670,"tag":703,"props":736,"children":738},{"className":737},[],[739],{"type":675,"value":740},"DocumentFragment",{"type":675,"value":742},") и другие служебные типы считаются узлами DOM",{"data":744,"body":745},{},{"type":667,"children":746},[747],{"type":670,"tag":671,"props":748,"children":749},{},[750],{"type":675,"value":751},"Узлами являются только HTML-теги (элементы), а текст и комментарии узлами не считаются",{"data":753,"body":754},{},{"type":667,"children":755},[756],{"type":670,"tag":671,"props":757,"children":758},{},[759,761,767,769,775,777,783,785,791,793,799,801,807,809,815,817,823],{"type":675,"value":760},"Подсказка: достаточно запомнить, что узел DOM — это объект дерева документа, реализующий базовый интерфейс ",{"type":670,"tag":703,"props":762,"children":764},{"className":763},[],[765],{"type":675,"value":766},"Node",{"type":675,"value":768},", а проверка делается через ",{"type":670,"tag":703,"props":770,"children":772},{"className":771},[],[773],{"type":675,"value":774},"nodeType",{"type":675,"value":776}," и константы ",{"type":670,"tag":703,"props":778,"children":780},{"className":779},[],[781],{"type":675,"value":782},"Node.*_NODE",{"type":675,"value":784}," (например, ",{"type":670,"tag":703,"props":786,"children":788},{"className":787},[],[789],{"type":675,"value":790},"1",{"type":675,"value":792}," — элемент, ",{"type":670,"tag":703,"props":794,"children":796},{"className":795},[],[797],{"type":675,"value":798},"3",{"type":675,"value":800}," — текст, ",{"type":670,"tag":703,"props":802,"children":804},{"className":803},[],[805],{"type":675,"value":806},"8",{"type":675,"value":808}," — комментарий, ",{"type":670,"tag":703,"props":810,"children":812},{"className":811},[],[813],{"type":675,"value":814},"9",{"type":675,"value":816}," — документ, ",{"type":670,"tag":703,"props":818,"children":820},{"className":819},[],[821],{"type":675,"value":822},"11",{"type":675,"value":824}," — фрагмент).",{"data":826,"body":827},{},{"type":667,"children":828},[829,871,876,947,952],{"type":670,"tag":671,"props":830,"children":831},{},[832,838,840,845,846,851,852,857,858,863,864,869],{"type":670,"tag":833,"props":834,"children":835},"strong",{},[836],{"type":675,"value":837},"Правильный ответ: 3",{"type":675,"value":839}," - документ (",{"type":670,"tag":703,"props":841,"children":843},{"className":842},[],[844],{"type":675,"value":708},{"type":675,"value":710},{"type":670,"tag":703,"props":847,"children":849},{"className":848},[],[850],{"type":675,"value":716},{"type":675,"value":718},{"type":670,"tag":703,"props":853,"children":855},{"className":854},[],[856],{"type":675,"value":724},{"type":675,"value":726},{"type":670,"tag":703,"props":859,"children":861},{"className":860},[],[862],{"type":675,"value":732},{"type":675,"value":734},{"type":670,"tag":703,"props":865,"children":867},{"className":866},[],[868],{"type":675,"value":740},{"type":675,"value":870},") и другие служебные типы считаются узлами DOM.",{"type":670,"tag":671,"props":872,"children":873},{},[874],{"type":675,"value":875},"Почему вариант 3 верный:",{"type":670,"tag":877,"props":878,"children":879},"ul",{},[880,891,909,919,937],{"type":670,"tag":881,"props":882,"children":883},"li",{},[884,889],{"type":670,"tag":703,"props":885,"children":887},{"className":886},[],[888],{"type":675,"value":708},{"type":675,"value":890}," — узел, представляющий документ целиком.",{"type":670,"tag":881,"props":892,"children":893},{},[894,899,901,907],{"type":670,"tag":703,"props":895,"children":897},{"className":896},[],[898],{"type":675,"value":716},{"type":675,"value":900}," — узел, представляющий HTML-теги (например, ",{"type":670,"tag":703,"props":902,"children":904},{"className":903},[],[905],{"type":675,"value":906},"\u003Cdiv>",{"type":675,"value":908},").",{"type":670,"tag":881,"props":910,"children":911},{},[912,917],{"type":670,"tag":703,"props":913,"children":915},{"className":914},[],[916],{"type":675,"value":724},{"type":675,"value":918}," — узел, содержащий текст внутри элементов (включая пробелы и переносы строк).",{"type":670,"tag":881,"props":920,"children":921},{},[922,927,929,935],{"type":670,"tag":703,"props":923,"children":925},{"className":924},[],[926],{"type":675,"value":732},{"type":675,"value":928}," — узел, соответствующий комментариям ",{"type":670,"tag":703,"props":930,"children":932},{"className":931},[],[933],{"type":675,"value":934},"\u003C!-- ... -->",{"type":675,"value":936},".",{"type":670,"tag":881,"props":938,"children":939},{},[940,945],{"type":670,"tag":703,"props":941,"children":943},{"className":942},[],[944],{"type":675,"value":740},{"type":675,"value":946}," — узел-контейнер для временной сборки поддерева перед вставкой в документ.",{"type":670,"tag":671,"props":948,"children":949},{},[950],{"type":675,"value":951},"Почему остальные варианты неверные:",{"type":670,"tag":877,"props":953,"children":954},{},[955,960,965],{"type":670,"tag":881,"props":956,"children":957},{},[958],{"type":675,"value":959},"Вариант 1 неверный: числа, массивы и функции — это значения JavaScript, но они не являются узлами DOM и не становятся частью DOM-дерева автоматически.",{"type":670,"tag":881,"props":961,"children":962},{},[963],{"type":675,"value":964},"Вариант 2 неверный: CSS-селекторы и CSS-правила относятся к стилям и механизму выбора элементов, но “узлы DOM” описывают структуру документа (дерево), а не оформление.",{"type":670,"tag":881,"props":966,"children":967},{},[968],{"type":675,"value":969},"Вариант 4 неверный: DOM состоит не только из HTML-элементов; текст и комментарии тоже представлены узлами, иначе было бы невозможно единообразно обходить дерево и различать содержимое.",{"data":971,"body":972},{},{"type":667,"children":973},[974,985],{"type":670,"tag":671,"props":975,"children":976},{},[977,979,984],{"type":675,"value":978},"DOM представляет HTML-документ как дерево объектов, где базовой единицей является узел (node). Узел — это объект DOM, который участвует в дереве документа и имеет общий набор свойств/методов базового интерфейса ",{"type":670,"tag":703,"props":980,"children":982},{"className":981},[],[983],{"type":675,"value":766},{"type":675,"value":936},{"type":670,"tag":671,"props":986,"children":987},{},[988,990,995,997,1002,1003,1008,1009,1014,1015,1020,1021,1026],{"type":675,"value":989},"Интерфейс ",{"type":670,"tag":703,"props":991,"children":993},{"className":992},[],[994],{"type":675,"value":766},{"type":675,"value":996}," является базовой абстракцией: “просто Node” как отдельный самостоятельный тип обычно не создается, но многие конкретные типы DOM-объектов реализуют его и поэтому считаются узлами. В веб-разработке чаще всего встречаются узлы документа (",{"type":670,"tag":703,"props":998,"children":1000},{"className":999},[],[1001],{"type":675,"value":708},{"type":675,"value":710},{"type":670,"tag":703,"props":1004,"children":1006},{"className":1005},[],[1007],{"type":675,"value":716},{"type":675,"value":718},{"type":670,"tag":703,"props":1010,"children":1012},{"className":1011},[],[1013],{"type":675,"value":724},{"type":675,"value":726},{"type":670,"tag":703,"props":1016,"children":1018},{"className":1017},[],[1019],{"type":675,"value":732},{"type":675,"value":734},{"type":670,"tag":703,"props":1022,"children":1024},{"className":1023},[],[1025],{"type":675,"value":740},{"type":675,"value":908},{"data":1028,"body":1029},{},{"type":667,"children":1030},[1031],{"type":670,"tag":671,"props":1032,"children":1033},{},[1034],{"type":675,"value":18},{"data":1036,"body":1037},{},{"type":667,"children":1038},[1039,1067,1079],{"type":670,"tag":671,"props":1040,"children":1041},{},[1042,1044,1049,1051,1057,1059,1065],{"type":675,"value":1043},"Для различения типов узлов используется числовой идентификатор ",{"type":670,"tag":703,"props":1045,"children":1047},{"className":1046},[],[1048],{"type":675,"value":774},{"type":675,"value":1050},". Для удобства чтения кода применяются константы вроде ",{"type":670,"tag":703,"props":1052,"children":1054},{"className":1053},[],[1055],{"type":675,"value":1056},"Node.ELEMENT_NODE",{"type":675,"value":1058},", ",{"type":670,"tag":703,"props":1060,"children":1062},{"className":1061},[],[1063],{"type":675,"value":1064},"Node.TEXT_NODE",{"type":675,"value":1066}," и т. п.",{"type":670,"tag":671,"props":1068,"children":1069},{},[1070,1072,1077],{"type":675,"value":1071},"Таблица наиболее важных типов ",{"type":670,"tag":703,"props":1073,"children":1075},{"className":1074},[],[1076],{"type":675,"value":774},{"type":675,"value":1078}," (чаще всего применяются на практике):",{"type":670,"tag":1080,"props":1081,"children":1082},"table",{},[1083,1112],{"type":670,"tag":1084,"props":1085,"children":1086},"thead",{},[1087],{"type":670,"tag":1088,"props":1089,"children":1090},"tr",{},[1091,1097,1103,1107],{"type":670,"tag":1092,"props":1093,"children":1094},"th",{},[1095],{"type":675,"value":1096},"Тип узла",{"type":670,"tag":1092,"props":1098,"children":1100},{"align":1099},"right",[1101],{"type":675,"value":1102},"Константа",{"type":670,"tag":1092,"props":1104,"children":1105},{"align":1099},[1106],{"type":675,"value":774},{"type":670,"tag":1092,"props":1108,"children":1109},{},[1110],{"type":675,"value":1111},"Что представляет",{"type":670,"tag":1113,"props":1114,"children":1115},"tbody",{},[1116,1150,1187,1211,1241,1272,1297],{"type":670,"tag":1088,"props":1117,"children":1118},{},[1119,1124,1133,1137],{"type":670,"tag":1120,"props":1121,"children":1122},"td",{},[1123],{"type":675,"value":708},{"type":670,"tag":1120,"props":1125,"children":1126},{"align":1099},[1127],{"type":670,"tag":703,"props":1128,"children":1130},{"className":1129},[],[1131],{"type":675,"value":1132},"Node.DOCUMENT_NODE",{"type":670,"tag":1120,"props":1134,"children":1135},{"align":1099},[1136],{"type":675,"value":814},{"type":670,"tag":1120,"props":1138,"children":1139},{},[1140,1142,1148],{"type":675,"value":1141},"документ целиком (",{"type":670,"tag":703,"props":1143,"children":1145},{"className":1144},[],[1146],{"type":675,"value":1147},"document",{"type":675,"value":1149},")",{"type":670,"tag":1088,"props":1151,"children":1152},{},[1153,1157,1165,1169],{"type":670,"tag":1120,"props":1154,"children":1155},{},[1156],{"type":675,"value":716},{"type":670,"tag":1120,"props":1158,"children":1159},{"align":1099},[1160],{"type":670,"tag":703,"props":1161,"children":1163},{"className":1162},[],[1164],{"type":675,"value":1056},{"type":670,"tag":1120,"props":1166,"children":1167},{"align":1099},[1168],{"type":675,"value":790},{"type":670,"tag":1120,"props":1170,"children":1171},{},[1172,1174,1179,1180,1186],{"type":675,"value":1173},"HTML-элемент (",{"type":670,"tag":703,"props":1175,"children":1177},{"className":1176},[],[1178],{"type":675,"value":906},{"type":675,"value":1058},{"type":670,"tag":703,"props":1181,"children":1183},{"className":1182},[],[1184],{"type":675,"value":1185},"\u003Cspan>",{"type":675,"value":1149},{"type":670,"tag":1088,"props":1188,"children":1189},{},[1190,1194,1202,1206],{"type":670,"tag":1120,"props":1191,"children":1192},{},[1193],{"type":675,"value":724},{"type":670,"tag":1120,"props":1195,"children":1196},{"align":1099},[1197],{"type":670,"tag":703,"props":1198,"children":1200},{"className":1199},[],[1201],{"type":675,"value":1064},{"type":670,"tag":1120,"props":1203,"children":1204},{"align":1099},[1205],{"type":675,"value":798},{"type":670,"tag":1120,"props":1207,"children":1208},{},[1209],{"type":675,"value":1210},"текст внутри элементов",{"type":670,"tag":1088,"props":1212,"children":1213},{},[1214,1218,1227,1231],{"type":670,"tag":1120,"props":1215,"children":1216},{},[1217],{"type":675,"value":732},{"type":670,"tag":1120,"props":1219,"children":1220},{"align":1099},[1221],{"type":670,"tag":703,"props":1222,"children":1224},{"className":1223},[],[1225],{"type":675,"value":1226},"Node.COMMENT_NODE",{"type":670,"tag":1120,"props":1228,"children":1229},{"align":1099},[1230],{"type":675,"value":806},{"type":670,"tag":1120,"props":1232,"children":1233},{},[1234,1236],{"type":675,"value":1235},"комментарий ",{"type":670,"tag":703,"props":1237,"children":1239},{"className":1238},[],[1240],{"type":675,"value":934},{"type":670,"tag":1088,"props":1242,"children":1243},{},[1244,1249,1258,1263],{"type":670,"tag":1120,"props":1245,"children":1246},{},[1247],{"type":675,"value":1248},"DocumentType",{"type":670,"tag":1120,"props":1250,"children":1251},{"align":1099},[1252],{"type":670,"tag":703,"props":1253,"children":1255},{"className":1254},[],[1256],{"type":675,"value":1257},"Node.DOCUMENT_TYPE_NODE",{"type":670,"tag":1120,"props":1259,"children":1260},{"align":1099},[1261],{"type":675,"value":1262},"10",{"type":670,"tag":1120,"props":1264,"children":1265},{},[1266],{"type":670,"tag":703,"props":1267,"children":1269},{"className":1268},[],[1270],{"type":675,"value":1271},"\u003C!doctype html>",{"type":670,"tag":1088,"props":1273,"children":1274},{},[1275,1279,1288,1292],{"type":670,"tag":1120,"props":1276,"children":1277},{},[1278],{"type":675,"value":740},{"type":670,"tag":1120,"props":1280,"children":1281},{"align":1099},[1282],{"type":670,"tag":703,"props":1283,"children":1285},{"className":1284},[],[1286],{"type":675,"value":1287},"Node.DOCUMENT_FRAGMENT_NODE",{"type":670,"tag":1120,"props":1289,"children":1290},{"align":1099},[1291],{"type":675,"value":822},{"type":670,"tag":1120,"props":1293,"children":1294},{},[1295],{"type":675,"value":1296},"временный контейнер поддерева",{"type":670,"tag":1088,"props":1298,"children":1299},{},[1300,1305,1314,1319],{"type":670,"tag":1120,"props":1301,"children":1302},{},[1303],{"type":675,"value":1304},"Attr (исторически важно знать)",{"type":670,"tag":1120,"props":1306,"children":1307},{"align":1099},[1308],{"type":670,"tag":703,"props":1309,"children":1311},{"className":1310},[],[1312],{"type":675,"value":1313},"Node.ATTRIBUTE_NODE",{"type":670,"tag":1120,"props":1315,"children":1316},{"align":1099},[1317],{"type":675,"value":1318},"2",{"type":670,"tag":1120,"props":1320,"children":1321},{},[1322],{"type":675,"value":1323},"узел атрибута (в современной практике обычно обходится без него)",{"data":1325,"body":1326},{},{"type":667,"children":1327},[1328],{"type":670,"tag":671,"props":1329,"children":1330},{},[1331],{"type":675,"value":29},{"data":1333,"body":1334},{},{"type":667,"children":1335},[1336,1364,1369,1381,1386,1395,1400,1409,1440,1449,1475,1480],{"type":670,"tag":671,"props":1337,"children":1338},{},[1339,1341,1346,1348,1354,1356,1362],{"type":675,"value":1340},"Проверка типа узла выполняется через ",{"type":670,"tag":703,"props":1342,"children":1344},{"className":1343},[],[1345],{"type":675,"value":774},{"type":675,"value":1347},", а понимание состава дочерних узлов — через ",{"type":670,"tag":703,"props":1349,"children":1351},{"className":1350},[],[1352],{"type":675,"value":1353},"childNodes",{"type":675,"value":1355}," (все узлы) и ",{"type":670,"tag":703,"props":1357,"children":1359},{"className":1358},[],[1360],{"type":675,"value":1361},"children",{"type":675,"value":1363}," (только элементы). Это помогает увидеть, что между HTML-тегами часто присутствуют текстовые узлы, даже если визуально кажется, что “там ничего нет”.",{"type":670,"tag":671,"props":1365,"children":1366},{},[1367],{"type":675,"value":1368},"Пример: элемент и текстовый узел внутри него",{"type":670,"tag":1370,"props":1371,"children":1375},"pre",{"className":1372,"code":1374,"language":675},[1373],"language-text","const p = document.createElement(\"p\");\np.textContent = \"Once upon a time…\";\n\nconsole.log(p.nodeType === Node.ELEMENT_NODE);         // true\nconsole.log(p.firstChild.nodeType === Node.TEXT_NODE); // true\n",[1376],{"type":670,"tag":703,"props":1377,"children":1379},{"__ignoreMap":1378},"",[1380],{"type":675,"value":1374},{"type":670,"tag":671,"props":1382,"children":1383},{},[1384],{"type":675,"value":1385},"Пример: документ, doctype и фрагмент",{"type":670,"tag":1370,"props":1387,"children":1390},{"className":1388,"code":1389,"language":675},[1373],"console.log(document.nodeType === Node.DOCUMENT_NODE); // true\nconsole.log(document.doctype.nodeType === Node.DOCUMENT_TYPE_NODE); // true\n\nconst frag = document.createDocumentFragment();\nconsole.log(frag.nodeType === Node.DOCUMENT_FRAGMENT_NODE); // true\n",[1391],{"type":670,"tag":703,"props":1392,"children":1393},{"__ignoreMap":1378},[1394],{"type":675,"value":1389},{"type":670,"tag":671,"props":1396,"children":1397},{},[1398],{"type":675,"value":1399},"Пример: комментарий как отдельный узел",{"type":670,"tag":1370,"props":1401,"children":1404},{"className":1402,"code":1403,"language":675},[1373],"const comment = document.createComment(\"hi\");\n\nconsole.log(comment.nodeType === Node.COMMENT_NODE); // true\nconsole.log(comment.nodeName); // обычно \"#comment\"\n",[1405],{"type":670,"tag":703,"props":1406,"children":1407},{"__ignoreMap":1378},[1408],{"type":675,"value":1403},{"type":670,"tag":671,"props":1410,"children":1411},{},[1412,1414,1419,1421,1426,1428,1433,1434,1439],{"type":675,"value":1413},"Пример: разница ",{"type":670,"tag":703,"props":1415,"children":1417},{"className":1416},[],[1418],{"type":675,"value":1353},{"type":675,"value":1420}," и ",{"type":670,"tag":703,"props":1422,"children":1424},{"className":1423},[],[1425],{"type":675,"value":1361},{"type":675,"value":1427}," (частая причина ошибок у начинающих)\nОднострочные фрагменты кода следует оборачивать в кавычки кода: ",{"type":670,"tag":703,"props":1429,"children":1431},{"className":1430},[],[1432],{"type":675,"value":1353},{"type":675,"value":1420},{"type":670,"tag":703,"props":1435,"children":1437},{"className":1436},[],[1438],{"type":675,"value":1361},{"type":675,"value":936},{"type":670,"tag":1370,"props":1441,"children":1444},{"className":1442,"code":1443,"language":675},[1373],"// HTML: \u003Cdiv id=\"root\">A\u003Cspan>B\u003C/span>\u003C!--C-->\u003C/div>\nconst root = document.getElementById(\"root\");\n\nconsole.log(root.childNodes.length); // элементы + текст + комментарии\nconsole.log(root.children.length);   // только элементы\n",[1445],{"type":670,"tag":703,"props":1446,"children":1447},{"__ignoreMap":1378},[1448],{"type":675,"value":1443},{"type":670,"tag":671,"props":1450,"children":1451},{},[1452,1454,1459,1461,1466,1468,1473],{"type":675,"value":1453},"Если в разметке есть текст между тегами (включая переносы строк и пробелы форматирования), в ",{"type":670,"tag":703,"props":1455,"children":1457},{"className":1456},[],[1458],{"type":675,"value":1353},{"type":675,"value":1460}," появятся узлы ",{"type":670,"tag":703,"props":1462,"children":1464},{"className":1463},[],[1465],{"type":675,"value":724},{"type":675,"value":1467},". Из-за этого цикл по ",{"type":670,"tag":703,"props":1469,"children":1471},{"className":1470},[],[1472],{"type":675,"value":1353},{"type":675,"value":1474}," может неожиданно “натыкаться” на текст, хотя ожидались только элементы.",{"type":670,"tag":671,"props":1476,"children":1477},{},[1478],{"type":675,"value":1479},"Схема дерева (упрощенно), показывающая смешанные типы дочерних узлов:",{"type":670,"tag":1370,"props":1481,"children":1484},{"className":1482,"code":1483,"language":675},[1373],"Document\n└── html (Element)\n    └── body (Element)\n        └── div#root (Element)\n            ├── #text \"A\" (Text)\n            ├── span (Element)\n            │   └── #text \"B\" (Text)\n            └── #comment \"C\" (Comment)\n",[1485],{"type":670,"tag":703,"props":1486,"children":1487},{"__ignoreMap":1378},[1488],{"type":675,"value":1483},{"data":1490,"body":1491},{},{"type":667,"children":1492},[1493],{"type":670,"tag":671,"props":1494,"children":1495},{},[1496],{"type":675,"value":39},1775735658994]