1"use strict";(self.webpackChunkdmitri_pavlutin_blog=self.webpackChunkdmitri_pavlutin_blog||[]).push([[7780],{3083:function(e,t,o){o.r(t),o.d(t,{default:function(){return f}});var n=o(7294),r=o(1151),a=o(9794);const s={annotations:a.ds,Code:a.EK},c={staticMediaQuery:"not screen, (max-width: 768px)",theme:{name:"one-dark-pro",type:"dark",semanticHighlighting:!0,semanticTokenColors:{enumMember:{foreground:"#56b6c2"},"variable.constant":{foreground:"#d19a66"},"variable.defaultLibrary":{foreground:"#e5c07b"},"variable:dart":{foreground:"#d19a66"},"property:dart":{foreground:"#d19a66"},"annotation:dart":{foreground:"#d19a66"},"parameter.label:dart":{foreground:"#abb2bf"},macro:{foreground:"#d19a66"}},tokenColors:[{settings:{foreground:"#abb2bf",background:"#282c34"}},{scope:"meta.embedded",settings:{foreground:"#abb2bf"}},{name:"unison punctuation",scope:"punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison",settings:{foreground:"#e06c75"}},{name:"haskell variable generic-type",scope:"variable.other.generic-type.haskell",settings:{foreground:"#c678dd"}},{name:"haskell storage type",scope:"storage.type.haskell",settings:{foreground:"#d19a66"}},{name:"support.variable.magic.python",scope:"support.variable.magic.python",settings:{foreground:"#e06c75"}},{name:"punctuation.separator.parameters.python",scope:"punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python",settings:{foreground:"#abb2bf"}},{name:"variable.parameter.function.language.special.self.python",scope:"variable.parameter.function.language.special.self.python",settings:{foreground:"#e5c07b"}},{name:"variable.parameter.function.language.special.cls.python",scope:"variable.parameter.function.language.special.cls.python",settings:{foreground:"#e5c07b"}},{name:"storage.modifier.lifetime.rust",scope:"storage.modifier.lifetime.rust",settings:{foreground:"#abb2bf"}},{name:"support.function.std.rust",scope:"support.function.std.rust",settings:{foreground:"#61afef"}},{name:"entity.name.lifetime.rust",scope:"entity.name.lifetime.rust",settings:{foreground:"#e5c07b"}},{name:"variable.language.rust",scope:"variable.language.rust",settings:{foreground:"#e06c75"}},{name:"support.constant.edge",scope:"support.constant.edge",settings:{foreground:"#c678dd"}},{name:"regexp constant character-class",scope:"constant.other.character-class.regexp",settings:{foreground:"#e06c75"}},{name:"keyword.operator",scope:["keyword.operator.word"],settings:{foreground:"#c678dd"}},{name:"regexp operator.quantifier",scope:"keyword.operator.quantifier.regexp",settings:{foreground:"#d19a66"}},{name:"Text",scope:"variable.parameter.function",settings:{foreground:"#abb2bf"}},{name:"Comment Markup Link",scope:"comment markup.link",settings:{foreground:"#5c6370"}},{name:"markup diff",scope:"markup.changed.diff",settings:{foreground:"#e5c07b"}},{name:"diff",scope:"meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff",settings:{foreground:"#61afef"}},{name:"inserted.diff",scope:"markup.inserted.diff",settings:{foreground:"#98c379"}},{name:"deleted.diff",scope:"markup.deleted.diff",settings:{foreground:"#e06c75"}},{name:"c++ function",scope:"meta.function.c,meta.function.cpp",settings:{foreground:"#e06c75"}},{name:"c++ block",scope:"punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c",settings:{foreground:"#abb2bf"}}
1,{name:"js/ts punctuation separator key-value",scope:"punctuation.separator.key-value",settings:{foreground:"#abb2bf"}},{name:"js/ts import keyword",scope:"keyword.operator.expression.import",settings:{foreground:"#61afef"}},{name:"math js/ts",scope:"support.constant.math",settings:{foreground:"#e5c07b"}},{name:"math property js/ts",scope:"support.constant.property.math",settings:{foreground:"#d19a66"}},{name:"js/ts variable.other.constant",scope:"variable.other.constant",settings:{foreground:"#e5c07b"}},{name:"java type",scope:["storage.type.annotation.java","storage.type.object.array.java"],settings:{foreground:"#e5c07b"}},{name:"java source",scope:"source.java",settings:{foreground:"#e06c75"}},{name:"java modifier.import",scope:"punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java",settings:{foreground:"#abb2bf"}},{name:"java modifier.import",scope:"meta.method.java",settings:{foreground:"#61afef"}},{name:"java modifier.import",scope:"storage.modifier.import.java,storage.type.java,storage.type.generic.java",settings:{foreground:"#e5c07b"}},{name:"java instanceof",scope:"keyword.operator.instanceof.java",settings:{foreground:"#c678dd"}},{name:"java variable.name",scope:"meta.definition.variable.name.java",settings:{foreground:"#e06c75"}},{name:"operator logical",scope:"keyword.operator.logical",settings:{foreground:"#56b6c2"}},{name:"operator bitwise",scope:"keyword.operator.bitwise",settings:{foreground:"#56b6c2"}},{name:"operator channel",scope:"keyword.operator.channel",settings:{foreground:"#56b6c2"}},{name:"support.constant.property-value.scss",scope:"support.constant.property-value.scss,support.constant.property-value.css",settings:{foreground:"#d19a66"}},{name:"CSS/SCSS/LESS Operators",scope:"keyword.operator.css,keyword.operator.scss,keyword.operator.less",settings:{foreground:"#56b6c2"}},{name:"css color standard name",scope:"support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss",settings:{foreground:"#d19a66"}},{name:"css comma",scope:"punctuation.separator.list.comma.css",settings:{foreground:"#abb2bf"}},{name:"css attribute-name.id",scope:"support.constant.color.w3c-standard-color-name.css",settings:{foreground:"#d19a66"}},{name:"css property-name",scope:"support.type.vendored.property-name.css",settings:{foreground:"#56b6c2"}},{name:"js/ts module",scope:"support.module.node,support.type.object.module,support.module.node",settings:{foreground:"#e5c07b"}},{name:"entity.name.type.module",scope:"entity.name.type.module",settings:{foreground:"#e5c07b"}},{name:"js variable readwrite",scope:"variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node",settings:{foreground:"#e06c75"}},{name:"js/ts json",scope:"support.constant.json",settings:{foreground:"#d19a66"}},{name:"js/ts Keyword",scope:["keyword.operator.expression.instanceof","keyword.operator.new","keyword.operator.ternary","keyword.operator.optional","keyword.operator.expression.keyof"],settings:{foreground:"#c678dd"}},{name:"js/ts console",scope:"support.type.object.console",settings:{foreground:"#e06c75"}},{name:"js/ts support.variable.property.process",scope:"support.variable.property.process",settings:{foreground:"#d19a66"}},{name:"js console function",scope:"entity.name.function,support.function.console",settings:{foreground:"#61afef"}},{name:"keyword.operator.misc.rust",scope:"keyword.operator.misc.rust",settings:{foreground:"#abb2bf"}},{name:"keyword.operator.sigil.rust",scope:"keyword.operator.sigil.rust",settings:{foreground:"#c678dd"}},{name:"operator",scope:"keyword.operator.delete",settings:{foreground:"#c678dd"}},{name:"js dom",scope:"support.type.object.dom",settings:{foreground:"#56b6c2"}},{name:"js dom variable",scope:"support.variable.dom,support.variable.property.dom",settings:{foreground:"#e06c75"}},{name:"keyword.operator",scope:"keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational",settings:{foreground:"#56b6c2"}},{name:"C operator assignment",scope:"keyword.operator.assignment.c,
1keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp",settings:{foreground:"#c678dd"}},{name:"Punctuation",scope:"punctuation.separator.delimiter",settings:{foreground:"#abb2bf"}},{name:"Other punctuation .c",scope:"punctuation.separator.c,punctuation.separator.cpp",settings:{foreground:"#c678dd"}},{name:"C type posix-reserved",scope:"support.type.posix-reserved.c,support.type.posix-reserved.cpp",settings:{foreground:"#56b6c2"}},{name:"keyword.operator.sizeof.c",scope:"keyword.operator.sizeof.c,keyword.operator.sizeof.cpp",settings:{foreground:"#c678dd"}},{name:"python parameter",scope:"variable.parameter.function.language.python",settings:{foreground:"#d19a66"}},{name:"python type",scope:"support.type.python",settings:{foreground:"#56b6c2"}},{name:"python logical",scope:"keyword.operator.logical.python",settings:{foreground:"#c678dd"}},{name:"pyCs",scope:"variable.parameter.function.python",settings:{foreground:"#d19a66"}},{name:"python block",scope:"punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python",settings:{foreground:"#abb2bf"}},{name:"python function-call.generic",scope:"meta.function-call.generic.python",settings:{foreground:"#61afef"}},{name:"python placeholder reset to normal string",scope:"constant.character.format.placeholder.other.python",settings:{foreground:"#d19a66"}},{name:"Operators",scope:"keyword.operator",settings:{foreground:"#abb2bf"}},{name:"Compound Assignment Operators",scope:"keyword.operator.assignment.compound",settings:{foreground:"#c678dd"}},{name:"Compound Assignment Operators js/ts",scope:"keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts",settings:{foreground:"#56b6c2"}},{name:"Keywords",scope:"keyword",settings:{foreground:"#c678dd"}},{name:"Namespaces",scope:"entity.name.namespace",settings:{foreground:"#e5c07b"}},{name:"Variables",scope:"variable",settings:{foreground:"#e06c75"}},{name:"Variables",scope:"variable.c",settings:{foreground:"#abb2bf"}},{name:"Language variables",scope:"variable.language",settings:{foreground:"#e5c07b"}},{name:"Java Variables",scope:"token.variable.parameter.java",settings:{foreground:"#abb2bf"}},{name:"Java Imports",scope:"import.storage.java",settings:{foreground:"#e5c07b"}},{name:"Packages",scope:"token.package.keyword",settings:{foreground:"#c678dd"}},{name:"Packages",scope:"token.package",settings:{foreground:"#abb2bf"}},{name:"Functions",scope:["entity.name.function","meta.require","support.function.any-method","variable.function"],settings:{foreground:"#61afef"}},{name:"Classes",scope:"entity.name.type.namespace",settings:{foreground:"#e5c07b"}},{name:"Classes",scope:"support.class, entity.name.type.class",settings:{foreground:"#e5c07b"}},{name:"Class name",scope:"entity.name.class.identifier.namespace.type",settings:{foreground:"#e5c07b"}},{name:"Class name",scope:["entity.name.class","variable.other.class.js","variable.other.class.ts"],settings:{foreground:"#e5c07b"}},{name:"Class name php",scope:"variable.other.class.php",settings:{foreground:"#e06c75"}},{name:"Type Name",scope:"entity.name.type",settings:{foreground:"#e5c07b"}},{name:"Keyword Control",scope:"keyword.control",settings:{foreground:"#c678dd"}},{name:"Control Elements",scope:"control.elements, keyword.operator.less",settings:{foreground:"#d19a66"}},{name:"Methods",scope:"keyword.other.special-method",settings:{foreground:"#61afef"}},{name:"Storage",scope:"storage",settings:{foreground:"#c678dd"}},{name:"Storage JS TS",scope:"token.storage",settings:{foreground:"#c678dd"}},{name:"Source Js Keyword Operator Delete,source Js Keyword Operator In,source Js Keyword Operator Of,source Js Keyword Operator Instanceof,source Js Keyword Operator New,source Js Keyword Operator Typeof,source Js Keyword Operator Void",scope:"keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void",settings:{foreground:"#c678dd"}},{name:"Java Storage",scope:"token.storage.type.java",settings:{foreground:"#e5c07b"}},{name:"Support",scope:"support.function",settings:{foreground:"#56b6c2"}},{name:"Support type",scope:"support.type.property-name",settings:{foreground:"#abb2bf"}},{name:"Support type",scope:"support.constant.property-value",settings:{foreground:"#abb2bf"}},{name:"Support type",scope:"support.constant.font-name",settings:{foreground:"#d19a66"}},{name:"Meta tag",scope:"meta.tag",settings:{foreground:"#abb2bf"}},{name:"Strings",scope:"string",settings:{foreground:"#98c379"}},{name:"Constant other symbol",scope:"constant.other.symbol",settings:{foreground:"#56b6c2"}},{name:"Integers",scope:"constant.numeric",settings:{foreground:"#d19a66"}},{name:"Constants",scope:"constant",settings:{foreground:"#d19a66"}},{name:"Constants",scope:"punctuation.definition.constant",settings:{foreground:"#d19a66"}},{name:"Tags",scope:"entity.name.tag",settings:{foreground:"#e06c75"}},{name:"Attributes",scope:"entity.other.attribute-name",settings:{foreground:"#d19a66"}},{name:"Attribute IDs",scope:"entity.other.attribute-name.id",settings:{fontStyle:"normal",foreground:"#61afef"}},{name:"Attribute class",scope:"entity.other.attribute-name.class.css",settings:{fontStyle:"normal",foreground:"#d19a66"}},{name:"Selector",scope:"meta.selector",settings:{foreground:"#c678dd"}},{name:"Headings",scope:"markup.heading",settings:{foreground:"#e06c75"}},{name:"Headings",scope:"markup.heading punctuation.definition.heading, entity.name.section",settings:{foreground:"#61afef"}},{name:"Units",scope:"keyword.other.unit",settings:{foreground:"#e06c75"}},{name:"Bold",scope:"markup.bold,todo.bold",settings:{foreground:"#d19a66"}},{name:"Bold",scope:"punctuation.definition.bold",settings:{foreground:"#e5c07b"}},{name:"markup Italic",scope:"markup.italic, punctuation.definition.italic,todo.emphasis",settings:{foreground:"#c678dd"}},{name:"emphasis md",scope:"emphasis md",settings:{foreground:"#c678dd"}},{name:"[VSCODE-CUSTOM] Markdown headings",scope:"entity.name.section.markdown",settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] Markdown heading Punctuation Definition",scope:"punctuation.definition.heading.markdown",settings:{foreground:"#e06c75"}},{name:"punctuation.definition.list.begin.markdown",scope:"punctuation.definition.list.begin.markdown",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Markdown heading setext",scope:"markup.heading.setext",settings:{foreground:"#abb2bf"}},{name:"[VSCODE-CUSTOM] Markdown Punctuation Definition Bold",scope:"punctuation.definition.bold.markdown",settings:{foreground:"#d19a66"}},{name:"[VSCODE-CUSTOM] Markdown Inline Raw",scope:"markup.inline.raw.markdown",settings:{foreground:"#98c379"}},{name:"[VSCODE-CUSTOM] Markdown Inline Raw",scope:"markup.inline.raw.string.markdown",settings:{foreground:"#98c379"}},{name:"[VSCODE-CUSTOM] Markdown Inline Raw punctuation",scope:"punctuation.definition.raw.markdown",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Markdown List Punctuation Definition",scope:"punctuation.definition.list.markdown",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Markdown Punctuation Definition String",scope:["punctuation.definition.string.begin.markdown","punctuation.definition.string.end.markdown","punctuation.definition.metadata.markdown"],settings:{foreground:"#e06c75"}},{name:"beginning.punctuation.definition.list.markdown",scope:["beginning.punctuation.definition.list.markdown"],settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] Markdown Punctuation Definition Link",scope:"punctuation.definition.metadata.markdown",settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] Markdown Underline Link/Image",scope:"markup.underline.link.markdown,markup.underline.link.image.markdown",settings:{foreground:"#c678dd"}},{name:"[VSCODE-CUSTOM] Markdown Link Title/Description",scope:"string.other.link.title.markdown,string.other.link.description.markdown",settings:{foreground:"#61afef"}},{name:"[VSCODE-CUSTOM] Asciidoc Inline Raw",scope:"markup.raw.monospace.asciidoc",settings:{foreground:"#98c379"}},{name:"[VSCODE-CUSTOM] Asciidoc Inline Raw Punctuation Definition",scope:"punctuation.definition.asciidoc",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Asciidoc List Punctuation Definition",scope:"markup.list.asciidoc",settings:{foreground:"#e5c07b"}},{name:"[VSCODE-CUSTOM] Asciidoc underline link",scope:"markup.link.asciidoc,markup.other.url.asciidoc",settings:{foreground:"#c678dd"}},{name:"[VSCODE-CUSTOM] Asciidoc link name",scope:"string.unquoted.asciidoc,markup.other.url.asciidoc",settings:{foreground:"#61afef"}},{name:"Regular Expressions",scope:"string.regexp",settings:{foreground:"#56b6c2"}},{name:"Escape Characters",scope:"constant.character.escape",settings:{foreground:"#56b6c2"}},{name:"Embedded",scope:"punctuation.section.embedded, variable.
1interpolation",settings:{foreground:"#e06c75"}},{name:"Embedded",scope:"punctuation.section.embedded.begin,punctuation.section.embedded.end",settings:{foreground:"#c678dd"}},{name:"illegal",scope:"invalid.illegal",settings:{foreground:"#ffffff"}},{name:"illegal",scope:"invalid.illegal.bad-ampersand.html",settings:{foreground:"#abb2bf"}},{name:"Broken",scope:"invalid.broken",settings:{foreground:"#ffffff"}},{name:"Deprecated",scope:"invalid.deprecated",settings:{foreground:"#ffffff"}},{name:"Unimplemented",scope:"invalid.unimplemented",settings:{foreground:"#ffffff"}},{name:"Source Json Meta Structure Dictionary Json > String Quoted Json",scope:"source.json meta.structure.dictionary.json > string.quoted.json",settings:{foreground:"#e06c75"}},{name:"Source Json Meta Structure Dictionary Json > String Quoted Json > Punctuation String",scope:"source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string",settings:{foreground:"#e06c75"}},{name:"Source Json Meta Structure Dictionary Json > Value Json > String Quoted Json,source Json Meta Structure Array Json > Value Json > String Quoted Json,source Json Meta Structure Dictionary Json > Value Json > String Quoted Json > Punctuation,source Json Meta Structure Array Json > Value Json > String Quoted Json > Punctuation",scope:"source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation",settings:{foreground:"#98c379"}},{name:"Source Json Meta Structure Dictionary Json > Constant Language Json,source Json Meta Structure Array Json > Constant Language Json",scope:"source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json",settings:{foreground:"#56b6c2"}},{name:"[VSCODE-CUSTOM] JSON Property Name",scope:"support.type.property-name.json",settings:{foreground:"#e06c75"}},{name:"[VSCODE-CUSTOM] JSON Punctuation for Property Name",scope:"support.type.property-name.json punctuation",settings:{foreground:"#e06c75"}},{name:"laravel blade tag",scope:"text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade",settings:{foreground:"#c678dd"}},{name:"laravel blade @",scope:"text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade",settings:{foreground:"#c678dd"}},{name:"use statement for other classes",scope:"support.other.namespace.use.php,support.other.namespace.use-as.php,entity.other.alias.php,meta.interface.php",settings:{foreground:"#e5c07b"}},{name:"error suppression",scope:"keyword.operator.error-control.php",settings:{foreground:"#c678dd"}},{name:"php instanceof",scope:"keyword.operator.type.php",settings:{foreground:"#c678dd"}},{name:"style double quoted array index normal begin",scope:"punctuation.section.array.begin.php",settings:{foreground:"#abb2bf"}},{name:"style double quoted array index normal end",scope:"punctuation.section.array.end.php",settings:{foreground:"#abb2bf"}},{name:"php illegal.non-null-typehinted",scope:"invalid.illegal.non-null-typehinted.php",settings:{foreground:"#f44747"}},{name:"php types",scope:"storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php",settings:{foreground:"#e5c07b"}},{name:"php call-function",scope:"meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php",settings:{foreground:"#61afef"}},{name:"php function-resets",scope:"punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php",settings:{foreground:"#abb2bf"}},{name:"support php constants",scope:"support.constant.core.rust",settings:{foreground:"#d19a66"}},{name:"support php constants",scope:"support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php",settings:{foreground:"#d19a66"}},{name:"php goto",scope:"entity.name.goto-label.php,support.other.php",settings:{foreground:"#61afef"}},{name:"php logical/bitwise operator",scope:"keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php",settings:{foreground:"#56b6c2"}},{name:"php regexp operator",scope:"keyword.operator.regexp.php",settings:{foreground:"#c678dd"}},{name:"php comparison",scope:"keyword.operator.comparison.php",settings:{foreground:"#56b6c2"}},{name:"php heredoc/nowdoc",scope:"keyword.operator.heredoc.php,keyword.operator.nowdoc.php",settings:{foreground:"#c678dd"}},{name:"python function decorator @",scope:"meta.function.decorator.python",settings:{foreground:"#61afef"}},{name:"python function support",scope:"support.token.decorator.python,meta.function.decorator.identifier.python",settings:{foreground:"#56b6c2"}},{name:"parameter function js/ts",scope:"function.parameter",settings:{foreground:"#abb2bf"}},{name:"brace function",scope:"function.brace",settings:{foreground:"#abb2bf"}},{name:"parameter function ruby cs",scope:"function.parameter.ruby, function.parameter.cs",settings:{foreground:"#abb2bf"}},{name:"constant.language.symbol.ruby",scope:"constant.language.symbol.ruby",settings:{foreground:"#56b6c2"}},{name:"rgb-value",scope:"rgb-value",settings:{foreground:"#56b6c2"}},{name:"rgb value",scope:"inline-color-decoration rgb-value",settings:{foreground:"#d19a66"}},{name:"rgb value less",scope:"less rgb-value",settings:{foreground:"#d19a66"}},{name:"sass selector",scope:"selector.sass",settings:{foreground:"#e06c75"}},{name:"ts primitive/builtin types",scope:"support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx",settings:{foreground:"#e5c07b"}},{name:"block scope",scope:"block.scope.end,block.scope.begin",settings:{foreground:"#abb2bf"}},{name:"cs storage type",scope:"storage.type.cs",settings:{foreground:"#e5c07b"}},{name:"cs local variable",scope:"entity.name.variable.local.cs",settings:{foreground:"#e06c75"}},{scope:"token.info-token",settings:{foreground:"#61afef"}},{scope:"token.warn-token",settings:{foreground:"#d19a66"}},{scope:"token.error-token",settings:{foreground:"#f44747"}},{scope:"token.debug-token",settings:{foreground:"#c678dd"}},{name:"String interpolation",scope:["punctuation.definition.template-expression.begin","punctuation.definition.template-expression.end","punctuation.section.embedded"],settings:{foreground:"#c678dd"}},{name:"Reset JavaScript string interpolation expression",scope:["meta.template.expression"],settings:{foreground:"#abb2bf"}},{name:"Import module JS",scope:["keyword.operator.module"],settings:{foreground:"#c678dd"}},{name:"js Flowtype",scope:["support.type.type.flowtype"],settings:{foreground:"#61afef"}},{name:"js Flow",scope:["support.type.primitive"],settings:{foreground:"#e5c07b"}},{name:"js class prop",scope:["meta.property.object"],settings:{foreground:"#e06c75"}},{name:"js func parameter",scope:["variable.parameter.function.js"],settings:{foreground:"#e06c75"}},{name:"js template literals begin",scope:["keyword.other.template.begin"],settings:{foreground:"#98c379"}},{name:"js template literals end",scope:["keyword.other.template.end"],settings:{foreground:"#98c379"}},{name:"js template literals variable braces begin",scope:["keyword.other.substitution.begin"],settings:{foreground:"#98c379"}},{name:"js template literals variable braces end",scope:["keyword.other.substitution.end"],settings:{foreground:"#98c379"}},{name:"js operator.assignment",scope:["keyword.operator.assignment"],settings:{foreground:"#56b6c2"}},{name:"go operator",scope:["keyword.operator.assignment.go"],settings:{foreground:"#e5c07b"}},{name:"go operator",scope:["keyword.operator.arithmetic.go","keyword.operator.address.go"],settings:{foreground:"#c678dd"}},{name:"Go package name",scope:["entity.name.package.go"],settings:{foreground:"#e5c07b"}},{name:"elm prelude",scope:["support.type.prelude.elm"],settings:{foreground:"#56b6c2"}},{name:"elm constant",scope:["support.constant.elm"],settings:{foreground:"#d19a66"}},{name:"template literal",scope:["punctuation.quasi.element"],settings:{foreground:"#c678dd"}},{name:"html/pug (jade) escaped characters and entities",scope:["constant.character.entity"],settings:{foreground:"#e06c75"}},{name:"styling css pseudo-elements/classes to be able to differentiate from classes which are the same colour",scope:["entity.other.attribute-name.pseudo-element","entity.other.attribute-name.pseudo-class"],settings:{foreground:"#56b6c2"}},{name:"Clojure globals",scope:["entity.global.clojure"],settings:{foreground:"#e5c07b"}},{name:"Clojure symbols",scope:["meta.symbol.clojure"],settings:{foreground:"#e06c75"}},{name:"Clojure constants",scope:["constant.keyword.clojure"],settings:{foreground:"#56b6c2"}},{name:"CoffeeScript Function Argument",scope:["meta.arguments.coffee","variable.parameter.function.coffee"],settings:{foreground:"#e06c75"}},{name:"Ini Default Text",scope:["source.ini"],settings:{foreground:"#98c379"}},{name:"Makefile prerequisities",scope:["meta.scope.prerequisites.makefile"],settings:{foreground:"#e06c75"}},{name:"Makefile text colour",scope:["source.makefile"],settings:{foreground:"#e5c07b"}},{name:"Groovy import names",scope:["storage.modifier.import.groovy"],settings:{foreground:"#e5c07b"}},{name:"Groovy Methods",scope:["meta.method.groovy"],settings:{foreground:"#61afef"}},{name:"Groovy Variables",scope:["meta.definition.variable.name.groovy"],settings:{foreground:"#e06c75"}},{name:"Groovy Inheritance",scope:["meta.definition.class.inherited.classes.groovy"],settings:{foreground:"#98c379"}},{name:"HLSL Semantic",scope:["support.variable.semantic.hlsl"],settings:{foreground:"#e5c07b"}},{name:"HLSL Types",scope:["support.type.texture.hlsl","support.type.sampler.hlsl","support.type.object.hlsl","support.type.object.rw.hlsl","support.type.fx.hlsl","support.type.object.hlsl"],settings:{foreground:"#c678dd"}},{name:"SQL Variables",scope:["text.variable","text.bracketed"],settings:{foreground:"#e06c75"}},{name:"types",scope:["support.type.swift","support.type.vb.asp"],settings:{foreground:"#e5c07b"}},{name:"heading 1, keyword",scope:["entity.name.function.xi"],settings:{foreground:"#e5c07b"}},{name:"heading 2, callable",scope:["entity.name.class.xi"],settings:{foreground:"#56b6c2"}},{name:"heading 3, property",scope:["constant.character.character-class.regexp.xi"],settings:{foreground:"#e06c75"}},{name:"heading 4, type, class, interface",scope:["constant.regexp.xi"],settings:{foreground:"#c678dd"}},{name:"heading 5, enums, preprocessor, constant, decorator",scope:["keyword.control.xi"],settings:{foreground:"#56b6c2"}},{name:"heading 6, number",scope:["invalid.xi"],settings:{foreground:"#abb2bf"}},{name:"string",scope:["beginning.punctuation.definition.quote.markdown.xi"],settings:{foreground:"#98c379"}},{name:"comments",scope:["beginning.punctuation.definition.list.markdown.xi"],settings:{foreground:"#7f848e"}},{name:"link",scope:["constant.character.xi"],settings:{foreground:"#61afef"}},{name:"accent",scope:["accent.xi"],settings:{foreground:"#61afef"}},{name:"wikiword",scope:["wikiword.xi"],settings:{foreground:"#d19a66"}},{name:"language operators like '+', '-' etc",scope:["constant.other.color.rgb-value.xi"],settings:{foreground:"#ffffff"}},{name:"elements to dim",scope:["punctuation.definition.tag.xi"],settings:{foreground:"#5c6370"}},{name:"C++/C#",scope:["entity.name.label.cs","entity.name.scope-resolution.function.call","entity.name.scope-resolution.function.definition"],settings:{foreground:"#e5c07b"}},{name:"Markdown underscore-style headers",scope:["entity.name.label.cs","markup.heading.setext.1.markdown","markup.heading.setext.2.markdown"],settings:{foreground:"#e06c75"}},{name:"meta.brace.square",scope:[" meta.brace.square"],settings:{foreground:"#abb2bf"}},{name:"Comments",scope:"comment, punctuation.definition.comment",settings:{fontStyle:"italic",foreground:"#7f848e"}},{name:"[VSCODE-CUSTOM] Markdown Quote",scope:"markup.quote.markdown",settings:{foreground:"#5c6370"}},{name:"punctuation.definition.block.sequence.item.yaml",scope:"punctuation.definition.block.sequence.item.yaml",settings:{foreground:"#abb2bf"}},{scope:["constant.language.symbol.elixir","constant.language.symbol.double-quoted.elixir"],settings:{foreground:"#56b6c2"}},{scope:["entity.name.variable.parameter.cs"],settings:{foreground:"#e5c07b"}},{scope:["entity.name.variable.field.cs"],settings:{foreground:"#e06c75"}},{name:"Deleted",scope:"markup.deleted",settings:{foreground:"#e06c75"}}
1,{name:"Inserted",scope:"markup.inserted",settings:{foreground:"#98c379"}},{name:"Underline",scope:"markup.underline",settings:{fontStyle:"underline"}},{name:"punctuation.section.embedded.begin.php",scope:["punctuation.section.embedded.begin.php","punctuation.section.embedded.end.php"],settings:{foreground:"#BE5046"}},{name:"support.other.namespace.php",scope:["support.other.namespace.php"],settings:{foreground:"#abb2bf"}},{name:"variable.other.object",scope:["variable.other.object"],settings:{foreground:"#e5c07b"}},{name:"variable.other.constant.property",scope:["variable.other.constant.property"],settings:{foreground:"#e06c75"}},{name:"entity.other.inherited-class",scope:["entity.other.inherited-class"],settings:{foreground:"#e5c07b"}},{name:"c variable readwrite",scope:"variable.other.readwrite.c",settings:{foreground:"#e06c75"}},{name:"php scope",scope:"entity.name.variable.parameter.php,punctuation.separator.colon.php,constant.other.php",settings:{foreground:"#abb2bf"}},{name:"Assembly",scope:["constant.numeric.decimal.asm.x86_64"],settings:{foreground:"#c678dd"}},{scope:["support.other.parenthesis.regexp"],settings:{foreground:"#d19a66"}},{scope:["constant.character.escape"],settings:{foreground:"#e5c07b"}},{scope:["string.regexp"],settings:{foreground:"#e06c75"}},{name:"js/ts italic",scope:"entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.super",settings:{fontStyle:"italic"}},{name:"comment",scope:"comment.line.double-slash,comment.block.documentation",settings:{fontStyle:"italic"}},{name:"Python Keyword Control",scope:"keyword.control.import.python,keyword.control.flow.python,keyword.operator.logical.python",settings:{fontStyle:"italic"}},{name:"markup.italic.markdown",scope:"markup.italic.markdown",settings:{fontStyle:"italic"}}],colors:{"activityBar.background":"#282c34","activityBar.foreground":"#d7dae0","activityBarBadge.background":"#4d78cc","activityBarBadge.foreground":"#f8fafd","badge.background":"#282c34","button.background":"#404754","button.secondaryBackground":"#30333d","button.secondaryForeground":"#c0bdbd","checkbox.border":"#404754","debugToolBar.background":"#21252b",descriptionForeground:"#abb2bf","diffEditor.insertedTextBackground":"#00809b33","dropdown.background":"#21252b","dropdown.border":"#21252b","editor.background":"#282c34","editor.findMatchBackground":"#42557b","editor.findMatchBorder":"#457dff","editor.findMatchHighlightBackgroun
1d":"#6199ff2f","editor.foreground":"#abb2bf","editorHoverWidget.highlightForeground":"#61afef","editorInlayHint.foreground":"#abb2bf","editorInlayHint.background":"#2c313c","editor.lineHighlightBackground":"#2c313c","editorLineNumber.activeForeground":"#abb2bf","editorGutter.addedBackground":"#109868","editorGutter.deletedBackground":"#9A353D","editorGutter.modifiedBackground":"#948B60","editorOverviewRuler.addedBackground":"#109868","editorOverviewRuler.deletedBackground":"#9A353D","editorOverviewRuler.modifiedBackground":"#948B60","editor.selectionBackground":"#67769660","editor.selectionHighlightBackground":"#ffffff10","editor.selectionHighlightBorder":"#dddddd","editor.wordHighlightBackground":"#d2e0ff2f","editor.wordHighlightBorder":"#7f848e","editor.wordHighlightStrongBackground":"#abb2bf26","editor.wordHighlightStrongBorder":"#7f848e","editorActiveLineNumber.foreground":"#737984","editorBracketMatch.background":"#515a6b","editorBracketMatch.border":"#515a6b","editorCursor.background":"#ffffffc9","editorCursor.foreground":"#528bff","editorError.foreground":"#c24038","editorGroup.background":"#181a1f","editorGroup.border":"#181a1f","editorGroupHeader.tabsBackground":"#21252b","editorHoverWidget.background":"#21252b","editorHoverWidget.border":"#181a1f","editorIndentGuide.activeBackground":"#c8c8c859","editorIndentGuide.background":"#3b4048","editorLineNumber.foreground":"#495162","editorMarkerNavigation.background":"#21252b","editorRuler.foreground":"#abb2bf26","editorSuggestWidget.background":"#21252b","editorSuggestWidget.border":"#181a1f","editorSuggestWidget.selectedBackground":"#2c313a","editorWarning.foreground":"#d19a66","editorWhitespace.foreground":"#3b4048","editorWidget.background":"#21252b",focusBorder:"#3e4452","gitDecoration.ignoredResourceForeground":"#636b78","input.background":"#1d1f23","list.activeSelectionBackground":"#2c313a","list.activeSelectionForeground":"#d7dae0","list.focusBackground":"#323842","list.focusForeground":"#f0f0f0","list.highlightForeground":"#c5c5c5","list.hoverBackground":"#2c313a","list.hoverForeground":"#fff","list.inactiveSelectionBackground":"#323842","list.inactiveSelectionForeground":"#d7dae0","list.warningForeground":"#d19a66","menu.foreground":"#abb2bf","menu.separatorBackground":"#343a45","minimapGutter.addedBackground":"#109868","minimapGutter.deletedBackground":"#9A353D","minimapGutter.modifiedBackground":"#948B60","panel.border":"#3e4452","panelSectionHeader.background":"#21252b","peekViewEditor.background":"#1b1d23","peekViewEditor.matchHighlightBackgroun
1d":"#29244b","peekViewResult.background":"#22262b","scrollbar.shadow":"#23252c","scrollbarSlider.activeBackground":"#747d9180","scrollbarSlider.background":"#4e566660","scrollbarSlider.hoverBackground":"#5a637580","settings.focusedRowBackground":"#282c34","settings.headerForeground":"#fff","sideBar.background":"#21252b","sideBar.foreground":"#abb2bf","sideBarSectionHeader.background":"#282c34","sideBarSectionHeader.foreground":"#abb2bf","statusBar.background":"#21252b","statusBar.debuggingBackground":"#cc6633","statusBar.debuggingBorder":"#66017a","statusBar.debuggingForeground":"#ffffff","statusBar.foreground":"#9da5b4","statusBar.noFolderBackground":"#21252b","statusBarItem.hoverBackground":"#2c313a","statusBarItem.remoteBackground":"#4d78cc","statusBarItem.remoteForeground":"#f8fafd","tab.activeBackground":"#282c34","tab.activeForeground":"#dcdcdc","tab.border":"#181a1f","tab.hoverBackground":"#323842","tab.inactiveBackground":"#21252b","tab.unfocusedHoverBackground":"#323842","terminal.ansiBlack":"#3f4451","terminal.ansiBlue":"#4aa5f0","terminal.ansiBrightBlack":"#4f5666","terminal.ansiBrightBlue":"#4dc4ff","terminal.ansiBrightCyan":"#4cd1e0","terminal.ansiBrightGreen":"#a5e075","terminal.ansiBrightMagenta":"#de73ff","terminal.ansiBrightRed":"#ff616e","terminal.ansiBrightWhite":"#d7dae0","terminal.ansiBrightYellow":"#f0a45d","terminal.ansiCyan":"#42b3c2","terminal.ansiGreen":"#8cc265","terminal.ansiMagenta":"#c162de","terminal.ansiRed":"#e05561","terminal.ansiWhite":"#e6e6e6","terminal.ansiYellow":"#d18f52","terminal.background":"#282c34","terminal.border":"#3e4452","terminal.foreground":"#abb2bf","terminal.selectionBackground":"#abb2bf30","textBlockQuote.background":"#2e3440","textBlockQuote.border":"#4b5362","textLink.foreground":"#61afef","textPreformat.foreground":"#d19a66","titleBar.activeBackground":"#282c34","titleBar.activeForeground":"#9da5b4","titleBar.inactiveBackground":"#21252b","titleBar.inactiveForeground":"#6b717d","walkThrough.embeddedEditorBackground":"#2e3440","welcomePage.buttonHoverBackground":"#404754"}},autoImport:!0,skipLanguages:[],filepath:"/home/runner/work/dmitripavlutin.com/dmitripavlutin.com/posts/113-dom-node
1-vs-element/index.md"};function i(e){const t=Object.assign({p:"p",em:"em",h2:"h2",a:"a",span:"span",code:"code",h3:"h3",ul:"ul",li:"li"},(0,r.ah)(),e.components),{Affiliate:o}=t;return o||l("Affiliate",!0),s||l("CH",!1),s.Code||l("CH.Code",!0),n.createElement(n.Fragment,null,n.createElement(t.p,null,"The Document Object Model (DOM) is an interface that treats HTML or XML document as a tree structure, where each node is an object of the document. DOM also provides a set of methods to query the tree, alter the structure, style."),"\n",n.createElement(t.p,null,"DOM also uses the term ",n.createElement(t.em,null,"element"),": which is quite similar to a node. So, what's the difference between a DOM node and an element? Let's find out!"),"\n",n.createElement(o),"\n",n.createElement(t.h2,{id:"1-dom-node",style:{position:"relative"}},n.createElement(t.a,{href:"#1-dom-node","aria-label":"1 dom node permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"1. DOM Node"),"\n",n.createElement(t.p,null,"The key to understanding the difference between a node and an element is to understand what a node is."),"\n",n.createElement(t.p,null,"From a higher viewpoint, a DOM document consists of a hierarchy of nodes. Each node can have a parent and/or children."),"\n",n.createElement(t.p,null,"Let's look at the following HTML document:"),"\n",n.createElement(s.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"<!",props:{style:{color:"#ABB2BF"}}},{content:"DOCTYPE ",props:{style:{color:"#E06C75"}}},{content:"html",props:{style:{color:"#D19A66"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"<",props:{style:{color:"#ABB2BF"}}},{content:"html",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"head",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"title",props:{style:{color:"#E06C75"}}},{content:">My Page</",props:{style:{color:"#ABB2BF"}}},{content:"title",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" </",props:{style:{color:"#ABB2BF"}}},{content:"head",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"body",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" \x3c!-- Page Body --\x3e",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"h2",props:{style:{color:"#E06C75"}}},{content:">My Page</",props:{style:{color:"#ABB2BF"}}},{content:"h2",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"p ",props:{style:{color:"#E06C75"}}},{content:"id",props:{style:{color:"#D19A66"}}},{content:"=",props:{style:{color:"#ABB2BF"}}},{content:'"content"',props:{style:{color:"#98C379"}}},{content:">Thank you for visiting my web page!</",props:{style:{color:"#ABB2BF"}}},{content:"p",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" </",props:{style:{color:"#ABB2BF"}}},{content:"body",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"</",props:{style:{color:"#ABB2BF"}}},{content:"html",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]}],lang:"html"},annotations:[]}]}),"\n",n.createElement(t.p,null,"The document contains the following hierarchy of nodes:"),"\n",n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<span\n class="gatsby-resp-image-wrapper"\n style="position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 560px; "\n >\n <a\n class="gatsby-resp-image-link"\n href="/static/75f1711be6313112e996905bd49c9951/fb709/dom-nodes.png"\n style="display: block"\n target="_blank"\n rel="noopener"\n >\n <span\n class="gatsby-resp-image-background-image"\n style="padding-bottom: 54.285714285714285%; position: relative; bottom: 0; left: 0; background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAIAAADwazoUAAAACXBIWXMAAAsTAAALEwEAmpwYAAABRUlEQVR42pXQwU7jMBCA4b7/s3DiCTiAkBAEsS1t2iTU9cQkpanteMZ2Yyf1Cu1eKfDfvxnNzACgKDZbtuWcuxA2XYfDkH7WrMg2T1dZW7VIGOKonB/G8aeYiKrbqrguaG/TL
1/vEUh55xt/u3rDDKU3OudPpFEKYpul7jBKbqmnqRnbSmD7Pc+CwXC6tcyml8/n8JQ5jLO/L1c1K9tIMxkfv/cla66wlxOHi82YppfdGPJaPD/Bwy++4AqPNfDHnHBbzP03TXlj+iY8fx90Tc8bFGGMIxmgiJKI4xvPX/cfqqD7EPs9XWwZtS1lW5ev69XXpvr05peTJ1wW8vDzX9QFgWsz7VS6V6q2zWmsi0koprRGRELXWpjdK6WEYZv9mIGHXdVJK7yzAjrFKiFoIseP8cDhwxoqyFOK93bcAwBjL12vn/F+GPXRDNDDMDAAAAABJRU5ErkJggg==\'); background-size: cover; display: block;"\n ></span>\n <img\n class="gatsby-resp-image-image"\n alt="Hierarchy of DOM Nodes"\n title=""\n src="/static/75f1711be6313112e996905bd49c9951/2e575/dom-nodes.png"\n srcset="/static/75f1711be6313112e996905bd49c9951/b9440/dom-nodes.png 140w,\n/static/75f1711be6313112e996905bd49c9951/6d9bb/dom-nodes.png 280w,\n/static/75f1711be6313112e996905bd49c9951/2e575/dom-nodes.png 560w,\n/static/75f1711be6313112e996905bd49c9951/fb709/dom-nodes.png 707w"\n sizes="(max-width: 560px) 100vw, 560px"\n style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;"\n loading="lazy"\n decoding="async"\n />\n </a>\n </span>'}}),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"<html>")," is a node in the document tree. It has 2 children: ",n.createElement(t.code,null,"<head>")," and ",n.createElement(t.code,null,"<body>")," nodes."),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"<body>")," is also a node having 3 children: a comment ",n.createElement(t.code,null,"\x3c!-- Page Body --\x3e"),", heading ",n.createElement(t.code,null,"<h2>"),", and paragraph ",n.createElement(t.code,null,"<p>"),". The parent of the ",n.createElement(t.code,null,"<body>")," node is ",n.createElement(t.code,null,"<html>")," node."),"\n",n.createElement(t.p,null,"The tags in the HTML document represent a node, what's interesting is that regular text is also a node. The paragraph node ",n.createElement(t.code,null,"<p>")," has 1 child: the text node ",n.createElement(t.code,null,'"Thank you for visiting my web page!"'),"."),"\n",n.createElement(t.h3,{id:"12-node-types",style:{position:"relative"}},n.createElement(t.a,{href:"#12-node-types","aria-label":"12 node types permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"1.2 Node Types"),"\n",n.createElement(t.p,null,"How can you distinguish these different types of nodes? The answer lays in the DOM ",n.createElement(t.a,{href:"https://developer.mozilla.org/en-US/docs/Web/API/Node",target:"_blank",rel:"noopener noreferrer"},"Node")," interface, particularly in the ",n.createElement(t.code,null,"Node.nodeType")," property."),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"Node.nodeType")," can have one of the following values that represents the type of the node:"),"\n",n.createElement(t.ul,null,"\n",n.createElement(t.li,null,n.createElement(t.code,null,"Node.ELEMENT_NODE")),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"Node.ATTRIBUTE_NODE")),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"Node.TEXT_NODE")),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"Node.CDATA_SECTION_NODE")),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"Node.PROCESSING_INSTRUCTION_NODE")),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"Node.COMMENT_NODE")),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"Node.DOCUMENT_NODE")),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"Node.DOCUMENT_TYPE_NODE")),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"Node.DOCUMENT_FRAGMENT_NODE")),"\n",n.createElement(t.li,null,n.createElement(t.code,null,"Node.NOTATION_NODE")),"\n"),"\n",n.createElement(t.p,null,"The constants meaningfully indicate the node type: for example ",n.createElement(t.code,null,"Node.ELEMENT_NODE")," represents an element node, ",n.createElement(t.code,null,"Node.TEXT_NODE")," represents a text node, ",n.createElement(t.code,null,"Node.DOCUMENT_NODE")," the document node, and so on."),"\n",n.createElement(t.p,null,"For example, let's select the paragraph node, and look at its ",n.createElement(t.code,null,"nodeType")," property:"),"\n",n.createElement(s.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"paragraph ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"document",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"querySelector",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'p'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"paragraph",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"nodeType ",props:{style:{color:"#E06C75"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"Node",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"ELEMENT_NODE",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"As expected ",n.createElement(t.code,null,"paragraph.nodeType")," has the value ",n.createElement(t.code,null,"Node.ELEMENT_NODE"),", indicating that the paragraph is an element."),"\n",n.createElement(t.p,null,"The paragraph also contains a text node:"),"\n",n.createElement(s.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"paragraph ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"document",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"querySelector",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'p'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"firstChild ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"paragraph",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"childNodes",props:{style:{color:"#E06C75"}}},{content:"[",props:{style:{color:"#ABB2BF"}}},{content:"0",props:{style:{color:"#D19A66"}}},{content:"];",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"firstChild",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"nodeType ",props:{style:{color:"#E06C75"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"Node",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"TEXT_NODE",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"There's a node type that represents the entire document tree of nodes â ",n.createElement(t.code,null,"Node.DOCUMENT_NODE"),":"),"\n",n.createElement(s.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"document",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"nodeType ",props:{style:{color:"#E06C75"}}},{content:"=== ",props:{style:{color:"#56B6C2"}}},{content:"Node",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"DOCUMENT_NODE",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.h2,{id:"2-dom-element",style:{position:"relative"}}
1,n.createElement(t.a,{href:"#2-dom-element","aria-label":"2 dom element permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"2. DOM Element"),"\n",n.createElement(t.p,null,"After getting a good grasp of what a DOM node is, now is the time to differentiate the DOM node and element."),"\n",n.createElement(t.p,null,"If you get well the ",n.createElement(t.em,null,"node")," term, then the answer is obvious: an element is a node of a specific type â element (",n.createElement(t.code,null,"Node.ELEMENT_NODE"),"). Along with types like document, comment, text, etc."),"\n",n.createElement(t.p,null,"In simple words, an element is a node that's written using a tag in the HTML document. ",n.createElement(t.code,null,"<html>"),", ",n.createElement(t.code,null,"<head>"),", ",n.createElement(t.code,null,"<title>"),", ",n.createElement(t.code,null,"<body>"),", ",n.createElement(t.code,null,"<h2>"),", ",n.createElement(t.code,null,"<p>")," are all elements because they are represented by tags."),"\n",n.createElement(t.p,null,"The document type, the comment, the text nodes aren't elements because they are not written with tags:"),"\n",n.createElement(s.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",mark:"1,4,6",focus:"",code:{lines:[{tokens:[{content:" <!",props:{style:{color:"#ABB2BF"}}},{content:"DOCTYPE ",props:{style:{color:"#E06C75"}}},{content:"html",props:{style:{color:"#D19A66"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"<",props:{style:{color:"#ABB2BF"}}},{content:"html",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"body",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" \x3c!-- Page Body --\x3e",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"p",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" Thank you for visiting my web page!",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" </",props:{style:{color:"#ABB2BF"}}},{content:"p",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" </",props:{style:{color:"#ABB2BF"}}},{content:"body",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"</",props:{style:{color:"#ABB2BF"}}},{content:"html",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]}],lang:"html"},annotations:[{focus:"1,4,6",Component:s.annotations.mark}]}]}),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"Node")," is constructor of a node, and ",n.createElement(t.code,null,"HTMLElement")," is a constructor of an element in JavaScript DOM. A paragraph, being a node and also an element, is an instance of both ",n.createElement(t.code,null,"Node")," and ",n.createElement(t.code,null,"HTMLElement"),":"),"\n",n.createElement(s.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"paragraph ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"document",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"querySelector",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'p'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"paragraph ",props:{style:{color:"#E06C75"}}},{content:"instanceof ",props:{style:{color:"#C678DD"}}},{content:"Node",props:{style:{color:"#E5C07B"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"paragraph ",props:{style:{color:"#E06C75"}}},{content:"instanceof ",props:{style:{color:"#C678DD"}}},{content:"HTMLElement",props:{style:{color:"#E5C07B"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// => true",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"Saying it simpler, an element is a subtype of a node the same way a cat is a subtype of an animal."),"\n",n.createElement(t.h2,{id:"3-dom-properties-nodes-and-elements",style:{position:"relative"}}
1,n.createElement(t.a,{href:"#3-dom-properties-nodes-and-elements","aria-label":"3 dom properties nodes and elements permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"3. DOM properties: nodes and elements"),"\n",n.createElement(t.p,null,"Aside from differentiating nodes from elements, you need also to distinguish the DOM properties that contain specifically only nodes, or only elements."),"\n",n.createElement(t.p,null,"The following properties of ",n.createElement(t.code,null,"Node")," type evaluate to a node or a collection of nodes (",n.createElement(t.code,null,"NodeList"),"):"),"\n",n.createElement(s.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"node",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"parentNode",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// Node or null",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"node",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"firstChild",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// Node or null",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"node",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"lastChild",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// Node or null",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"node",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"childNodes",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// NodeList",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"However, the following properties are elements or collection of elements (",n.createElement(t.code,null,"HTMLCollection"),"):"),"\n",n.createElement(s.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"node",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"parentElement",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// HTMLElement or null",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"node",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"children",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// HTMLCollection",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}),"\n",n.createElement(t.p,null,"Since both ",n.createElement(t.code,null,"node.childNodes")," and ",n.createElement(t.code,null,"node.children")," return a list of children, why have both of these properties? Good question!"),"\n",n.createElement(t.p,null,"Consider the following paragraph element containing some text:"),"\n",n.createElement(s.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"<",props:{style:{color:"#ABB2BF"}}},{content:"p",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:" <",props:{style:{color:"#ABB2BF"}}},{content:"b",props:{style:{color:"#E06C75"}}},{content:">Thank you</",props:{style:{color:"#ABB2BF"}}},{content:"b",props:{style:{color:"#E06C75"}}},{content:"> for visiting my web page!",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"</",props:{style:{color:"#ABB2BF"}}},{content:"p",props:{style:{color:"#E06C75"}}},{content:">",props:{style:{color:"#ABB2BF"}}}]}],lang:"html"},annotations:[]}]}),"\n",n.createElement(t.p,null,"Open the ",n.createElement(t.a,{href:"https://jsitor.com/3mPwoSVbYh",target:"_blank",rel:"noopener noreferrer"},"demo"),", then look at ",n.createElement(t.code,null,"childNodes")," and ",n.createElement(t.code,null,"children")," properties of the parapgraph node:"),"\n",n.createElement(s.Code,{codeConfig:c,northPanel:{tabs:[""],active:"",heightRatio:1},files:[{name:"",focus:"",code:{lines:[{tokens:[{content:"const ",props:{style:{color:"#C678DD"}}},{content:"paragraph ",props:{style:{color:"#E5C07B"}}},{content:"= ",props:{style:{color:"#56B6C2"}}},{content:"document",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"querySelector",props:{style:{color:"#61AFEF"}}},{content:"(",props:{style:{color:"#ABB2BF"}}},{content:"'p'",props:{style:{color:"#98C379"}}},{content:");",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"",props:{style:{color:"#ABB2BF"}}}]},{tokens:[{content:"paragraph",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"childNodes",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// NodeList: [HTMLElement, Text]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]},{tokens:[{content:"paragraph",props:{style:{color:"#E5C07B"}}},{content:".",props:{style:{color:"#ABB2BF"}}},{content:"children",props:{style:{color:"#E06C75"}}},{content:"; ",props:{style:{color:"#ABB2BF"}}},{content:"// HTMLCollection: [HTMLElement]",props:{style:{color:"#7F848E",fontStyle:"italic"}}}]}],lang:"javascript"},annotations:[]}]}
1),"\n",n.createElement(t.p,null,n.createElement(t.code,null,"paragraph.childNodes")," collection contains 2 nodes: the bold element ",n.createElement(t.code,null,"<b>Thank you</b>"),", as well as the text node ",n.createElement(t.code,null," for visiting my web page!"),"."),"\n",n.createElement(t.p,null,"However, ",n.createElement(t.code,null,"paragraph.children")," collection contains only 1 item: the bold element ",n.createElement(t.code,null,"<b>Thank you</b>"),"."),"\n",n.createElement(t.p,null,"Because ",n.createElement(t.code,null,"paragraph.children")," contains only elements, the text node wasn't included here because its type is text (",n.createElement(t.code,null,"Node.TEXT_NODE"),"), and not an element (",n.createElement(t.code,null,"Node.ELEMENT_NODE"),")."),"\n",n.createElement(t.p,null,"Having both ",n.createElement(t.code,null,"node.childNodes")," and ",n.createElement(t.code,null,"node.children")," lets you choose the collection of children you'd like to access: all children nodes or only children being elements."),"\n",n.createElement(t.h2,{id:"4-summary",style:{position:"relative"}},n.createElement(t.a,{href:"#4-summary","aria-label":"4 summary permalink",className:"anchor before"},n.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" height="20" version="1.1" viewBox="0 0 16 16" width="20"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg>'}})),"4. Summary"),"\n",n.createElement(t.p,null,"A DOM document is a hierarchical collection of nodes. Each node can have a parent and/or children."),"\n",n.createElement(t.p,null,"Understanding the difference between a DOM node and an element is easy if you understand what a node is."),"\n",n.createElement(t.p,null,"Nodes have types, the element type being one of them. The element is represented by a tag in the HTML document."),"\n",n.createElement(t.p,null,n.createElement(t.em,null,"Quiz: What type of node never has a parent node?")))}var p=function(e){void 0===e&&(e={});const{wrapper:t}=Object.assign({},(0,r.ah)(),e.components);return t?n.createElement(t,e,n.createElement(i,e)):i(e)};function l(e,t){throw new Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}var d=o(12),u=o(5319),g=o(5893);function m(e){let{data:t,children:o}=e;const{featured:{popularPostsByCategory:n}}=t.site.siteMetadata,{mdx:r,popularPostsMarkdown:a}=t,s={...r.frontmatter,children:o,thumbnail:r.frontmatter.thumbnail.childImageSharp.gatsbyImageData,tableOfContents:r.tableOfContents},c=r.internal.contentFilePath.split("/").slice(-3).join("/"),i=a.edges.map(u.sN),p=n.map((e=>{let{category:t,slugs:o}=e;return{category:t,plainPosts:o.map((e=>i.find((t=>{let{slug:o}=t;return e===o}))))}}));return(0,g.jsx)(d.Z,{postRelativePath:c,post:s,popularPostsByCategory:p})}function f(e){return n.createElement(m,e,n.createElement(p,e))}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.