一篇文章带你了解JavaScript htmldom 导航

前端进阶学习交流

共 2348字,需浏览 5分钟

 · 2021-11-21

点击上方“前端进阶学习交流”,进行关注

回复“前端”即可获赠前端相关学习资料

瀚海阑干百丈冰,愁云惨淡万里凝。

使用HTML DOM,可以使用节点关系来导航"节点树"。

一、DOM 节点

在一个HTML文档都是一个节点,The entire document is a document node 每个HTML元素是元素节点 在HTML元素的文本是文本节点 每一个HTML属性是一个属性节点 所有注释都是注释节点。

使用HTML DOM, 在节点树的所有节点可以通过JavaScript访问。可以创建新节点,并可以修改或删除所有节点。

1. 节点关系

节点树中的节点彼此具有层次关系。

2. 子节点和节点值

在DOM处理中常见的错误就是认为一个元素节点包含文本。

<title id="demo">DOM Tutorialtitle>

元素节点</code></span><span md-inline="plain"> (在上面的实例中) 不包含文本。</span></p><p cid="n12" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="plain">它包含有值的文本节点 "DOM Tutorial"。</span></p><p cid="n13" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="plain">该文本节点的值可以通过节点的innerHTML属性访问。</span></p><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li></ul><pre class="code-snippet__js" data-lang="javascript"><code><span class="code-snippet_outer"><span class="code-snippet__keyword">var</span> myTitle = <span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"demo"</span>).innerHTML;</span></code></pre></section><p cid="n15" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="plain">访问innerHTML属性访问和访问第一个子节点值相同:</span></p><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li></ul><pre class="code-snippet__js" data-lang="javascript"><code><span class="code-snippet_outer"><span class="code-snippet__keyword">var</span> myTitle = <span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"demo"</span>).firstChild.nodeValue;</span></code></pre></section><p cid="n17" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="plain">访问第一个子节点也可以这样做:</span></p><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li></ul><pre class="code-snippet__js" data-lang="javascript"><code><span class="code-snippet_outer"><span class="code-snippet__keyword">var</span> myTitle = <span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"demo"</span>).childNodes[<span class="code-snippet__number">0</span>].nodeValue;</span></code></pre></section><p cid="n19" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="strong"><strong>实例1:</strong></span></p><p cid="n20" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="plain">查询</span><span md-inline="code" spellcheck="false"><code style="font-family: var(--monospace);vertical-align: initial;border-width: 1px;border-style: solid;border-color: rgb(231, 234, 237);background-color: rgb(243, 244, 244);border-radius: 3px;padding-right: 2px;padding-left: 2px;font-size: 0.9em;"><h1></code></span><span md-inline="plain">元素的文本,并且拷贝它到</span><span md-inline="code" spellcheck="false"><code style="font-family: var(--monospace);vertical-align: initial;border-width: 1px;border-style: solid;border-color: rgb(231, 234, 237);background-color: rgb(243, 244, 244);border-radius: 3px;padding-right: 2px;padding-left: 2px;font-size: 0.9em;"><p></code></span><span md-inline="plain">元素。</span></p><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="xml"><code><span class="code-snippet_outer"><span class="code-snippet__meta"><!DOCTYPE html></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">html</span> <span class="code-snippet__attr">lang</span>=<span class="code-snippet__string">"en"</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">head</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">meta</span> <span class="code-snippet__attr">charset</span>=<span class="code-snippet__string">"UTF-8"</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">title</span>></span>项目<span class="code-snippet__tag"></<span class="code-snippet__name">title</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">head</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">body</span> <span class="code-snippet__attr">style</span>=<span class="code-snippet__string">"background-color: aqua;"</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">h1</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"id01"</span>></span>My First Page<span class="code-snippet__tag"></<span class="code-snippet__name">h1</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">p</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"id02"</span>></span><span class="code-snippet__tag"></<span class="code-snippet__name">p</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"id02"</span>).innerHTML = <span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"id01"</span>).innerHTML;</span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">body</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">html</span>></span></span></code></pre></section><p style="text-align: center;"><img class="rich_pages" data-ratio="0.1547049441786284" data-s="300,640" src="https://filescdn.proginn.com/ca1cc720d1f157f268bd66b72cb103da/248f998d1d826c4347a2dda4b91896f9.webp" data-type="png" data-w="1254" style=""></p><p cid="n23" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="strong"><strong>实例2:</strong></span><br></p><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="xml"><code><span class="code-snippet_outer"><span class="code-snippet__meta"><!DOCTYPE html></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">html</span> <span class="code-snippet__attr">lang</span>=<span class="code-snippet__string">"en"</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">head</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">meta</span> <span class="code-snippet__attr">charset</span>=<span class="code-snippet__string">"UTF-8"</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">title</span>></span>项目<span class="code-snippet__tag"></<span class="code-snippet__name">title</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">head</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">body</span> <span class="code-snippet__attr">style</span>=<span class="code-snippet__string">"background-color: aqua;"</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">h1</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"id01"</span>></span>My First Page<span class="code-snippet__tag"></<span class="code-snippet__name">h1</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">p</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"id02"</span>></span><span class="code-snippet__tag"></<span class="code-snippet__name">p</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"id02"</span>).innerHTML = <span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"id01"</span>).firstChild.nodeValue;</span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">body</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">html</span>></span></span></code></pre></section><p style="text-align: center;"><img class="rich_pages" data-ratio="0.18968023255813954" data-s="300,640" src="https://filescdn.proginn.com/25aa5596c081681e3f8211b3d9e0f9f0/e6b51b3b745d806cf3f4fe4eac66664c.webp" data-type="png" data-w="1376" style=""></p><p cid="n26" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="strong"><strong>实例3 :</strong></span><br></p><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="xml"><code><span class="code-snippet_outer"><span class="code-snippet__meta"><!DOCTYPE html></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">html</span> <span class="code-snippet__attr">lang</span>=<span class="code-snippet__string">"en"</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">head</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">meta</span> <span class="code-snippet__attr">charset</span>=<span class="code-snippet__string">"UTF-8"</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">title</span>></span>项目<span class="code-snippet__tag"></<span class="code-snippet__name">title</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">head</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">body</span> <span class="code-snippet__attr">style</span>=<span class="code-snippet__string">"background-color: aqua;"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">h1</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"id01"</span>></span>My First Page<span class="code-snippet__tag"></<span class="code-snippet__name">h1</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">p</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"id02"</span>></span>Hello!<span class="code-snippet__tag"></<span class="code-snippet__name">p</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"id02"</span>).innerHTML = <span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"id01"</span>).childNodes[<span class="code-snippet__number">0</span>].nodeValue;</span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">body</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">html</span>></span></span></code></pre></section><p><img class="rich_pages" data-ratio="0.18968023255813954" data-s="300,640" src="https://filescdn.proginn.com/25aa5596c081681e3f8211b3d9e0f9f0/e6b51b3b745d806cf3f4fe4eac66664c.webp" data-type="png" data-w="1376" style=""></p><p><br></p><h2 cid="n29" mdtype="heading" style="break-after: avoid-page;break-inside: avoid;orphans: 4;font-size: 1.75em;margin-top: 1rem;margin-bottom: 1rem;font-weight: bold;line-height: 1.225;cursor: text;padding-bottom: 0.3em;border-bottom: 1px solid rgb(238, 238, 238);white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;text-align: start;"><span md-inline="plain">二、DOM 根节点</span><br></h2><p cid="n30" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="plain">有两个特殊属性允许访问完整文档:</span></p><p cid="n31" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="strong"><strong>document.body - 文档主体</strong></span></p><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="xml"><code><span class="code-snippet_outer"><span class="code-snippet__meta"><!DOCTYPE html></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">html</span> <span class="code-snippet__attr">lang</span>=<span class="code-snippet__string">"en"</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">head</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">meta</span> <span class="code-snippet__attr">charset</span>=<span class="code-snippet__string">"UTF-8"</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">title</span>></span>项目<span class="code-snippet__tag"></<span class="code-snippet__name">title</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">head</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">body</span> <span class="code-snippet__attr">style</span>=<span class="code-snippet__string">"background-color: aqua;"</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">h1</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"id01"</span>></span>我的第一个页面<span class="code-snippet__tag"></<span class="code-snippet__name">h1</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">p</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"id02"</span>></span><span class="code-snippet__tag"></<span class="code-snippet__name">p</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"id02"</span>).innerHTML = <span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"id01"</span>).childNodes[<span class="code-snippet__number">0</span>].nodeValue;</span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">body</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">html</span>></span></span></code></pre></section><p style="text-align: center;"><img class="rich_pages" data-ratio="0.49122807017543857" data-s="300,640" src="https://filescdn.proginn.com/2e1a2b1287fc1c528f04bdf5ab188130/23ffe2c7e67789051e2ccf25e36ae37a.webp" data-type="png" data-w="969" style=""></p><p cid="n34" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="strong"><strong>document.documentElement - 完整的文档</strong></span><br></p><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="xml"><code><span class="code-snippet_outer"><span class="code-snippet__meta"><!DOCTYPE html></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">html</span> <span class="code-snippet__attr">lang</span>=<span class="code-snippet__string">"en"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">head</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">meta</span> <span class="code-snippet__attr">charset</span>=<span class="code-snippet__string">"UTF-8"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">title</span>></span>项目<span class="code-snippet__tag"></<span class="code-snippet__name">title</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"></<span class="code-snippet__name">head</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">body</span> <span class="code-snippet__attr">style</span>=<span class="code-snippet__string">"background-color: aqua;"</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">p</span>></span>Hello World!<span class="code-snippet__tag"></<span class="code-snippet__name">p</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">div</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">p</span>></span>The DOM is very useful!<span class="code-snippet__tag"></<span class="code-snippet__name">p</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">p</span>></span>This example demonstrates the <span class="code-snippet__tag"><<span class="code-snippet__name">b</span>></span>document.documentElement<span class="code-snippet__tag"></<span class="code-snippet__name">b</span>></span> property.<span class="code-snippet__tag"></<span class="code-snippet__name">p</span>></span></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"></<span class="code-snippet__name">div</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"> <span class="code-snippet__tag"><<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"> alert(<span class="code-snippet__built_in">document</span>.documentElement.innerHTML);</span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">body</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">html</span>></span></span></code></pre></section><p style="text-align: center;"><img class="rich_pages" data-ratio="0.4566420664206642" data-s="300,640" src="https://filescdn.proginn.com/595ad9dc63c59be11e88f812d779706d/3148572d0661b7852228c2c5244af5ff.webp" data-type="png" data-w="1084" style=""></p><h4 cid="n37" mdtype="heading" style="break-after: avoid-page;break-inside: avoid;orphans: 4;font-size: 1.25em;margin-top: 1rem;margin-bottom: 1rem;font-weight: bold;line-height: 1.4;cursor: text;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;text-align: start;"><span md-inline="plain">1. nodeName 属性</span><br></h4><p cid="n38" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="plain">nodeName属性指定一个节点的名称,nodeName 是只读的。</span></p><ol class="list-paddingleft-2" start="" cid="n39" mdtype="list" style="margin-top: 0.8em;margin-bottom: 0.8em;padding-left: 30px;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;white-space: normal;"><li><p cid="n41" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-bottom: 0.5rem;white-space: pre-wrap;"><span md-inline="plain">nodeName 是只读的。</span></p></li><li><p cid="n43" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-bottom: 0.5rem;white-space: pre-wrap;"><span md-inline="plain">nodeName 一个元素节点的节点名称和标签名称相同。</span></p></li><li><p cid="n45" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-bottom: 0.5rem;white-space: pre-wrap;"><span md-inline="plain">一个属性节点的节点名称是属性名。</span></p></li><li><p cid="n47" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-bottom: 0.5rem;white-space: pre-wrap;"><span md-inline="plain">一个文本节点的nodeName总是 #text。</span></p></li><li><p cid="n49" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-bottom: 0.5rem;white-space: pre-wrap;"><span md-inline="plain">文档的节点名称总是 #document。</span></p></li></ol><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="xml"><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">h1</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"id01"</span>></span>My First Page<span class="code-snippet__tag"></<span class="code-snippet__name">h1</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">p</span> <span class="code-snippet__attr">id</span>=<span class="code-snippet__string">"id02"</span>></span><span class="code-snippet__tag"></<span class="code-snippet__name">p</span>></span></span></code><code><span class="code-snippet_outer"><br></span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"id02"</span>).innerHTML = <span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"id01"</span>).nodeName;</span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">script</span>></span></span></code></pre></section><p style="text-align: center;"><img class="rich_pages" data-ratio="0.2390488110137672" data-s="300,640" src="https://filescdn.proginn.com/01ed1bf9b354e84f9f2644ec768d5df9/a0497aa4690b844a64e86ce5fd83f62a.webp" data-type="png" data-w="799" style=""></p><p cid="n52" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="strong"><strong>注意:</strong></span><span md-inline="plain"> </span><br></p><p cid="n53" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="plain">nodeName总是包含HTML元素的大写标签名称。</span></p><h4 cid="n54" mdtype="heading" style="break-after: avoid-page;break-inside: avoid;orphans: 4;font-size: 1.25em;margin-top: 1rem;margin-bottom: 1rem;font-weight: bold;line-height: 1.4;cursor: text;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;text-align: start;"><span md-inline="plain">2. nodeValue 属性</span></h4><p cid="n55" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="plain">nodeValue 属性指定节点的值。素节点的节点值是 undefined,文本节点的节点是文本本身,属性节点的节点值是属性值。</span></p><h4 cid="n56" mdtype="heading" style="break-after: avoid-page;break-inside: avoid;orphans: 4;font-size: 1.25em;margin-top: 1rem;margin-bottom: 1rem;font-weight: bold;line-height: 1.4;cursor: text;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;text-align: start;"><span md-inline="plain">3. nodeType 属性</span></h4><p cid="n57" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="plain">nodeType 属性返回节点类型. nodeType 是只读的。</span></p><section class="code-snippet__fix code-snippet__js"><ul class="code-snippet__line-index code-snippet__js"><li></li><li></li><li></li></ul><pre class="code-snippet__js" data-lang="xml"><code><span class="code-snippet_outer"><span class="code-snippet__tag"><<span class="code-snippet__name">script</span>></span></span></code><code><span class="code-snippet_outer"><span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"id02"</span>).innerHTML = <span class="code-snippet__built_in">document</span>.getElementById(<span class="code-snippet__string">"id01"</span>).nodeType;</span></code><code><span class="code-snippet_outer"><span class="code-snippet__tag"></<span class="code-snippet__name">script</span>></span></span></code></pre></section><p style="text-align: center;"><img class="rich_pages" data-ratio="0.25254813137032844" data-s="300,640" src="https://filescdn.proginn.com/2159f6d6aafb807c494d6033e7447442/b64f53036c6781449ffb74df52bdd17a.webp" data-type="png" data-w="883" style=""></p><p style="text-align: center;"><br></p><h2 cid="n60" mdtype="heading" style="break-after: avoid-page;break-inside: avoid;orphans: 4;font-size: 1.75em;margin-top: 1rem;margin-bottom: 1rem;font-weight: bold;line-height: 1.225;cursor: text;padding-bottom: 0.3em;border-bottom: 1px solid rgb(238, 238, 238);white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;text-align: start;"><span md-inline="plain">三、总结</span><br></h2><p cid="n61" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="plain">本文基于JavaScript,介绍了页面上htmldom 导航的节点。节点和节点之间的关系,采用生动的比喻进行讲解。以及根节点的属性进行了详细讲解。通过丰富的案例,运行效果图的展示。希望能帮助读者更好的学习。</span></p><p cid="n62" mdtype="paragraph" style="line-height: inherit;orphans: 4;margin-top: 0.8em;margin-bottom: 0.8em;white-space: pre-wrap;font-family: "Open Sans", "Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 16px;text-align: start;"><span md-inline="plain">使用JavaScript 语言,方便大家更好理解,希望对大家的学习有帮助。</span></p><p style="white-space: normal;letter-spacing: 0.544px;color: rgb(62, 62, 62);font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;word-spacing: 2px;font-size: 16px;background-color: rgb(255, 255, 255);text-align: center;"><span style="font-size: 20px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;color: rgb(0, 113, 193);font-family: Helvetica, Arial, sans-serif;font-size: 16px;widows: 1;"><strong style="letter-spacing: 0.544px;">---</strong>--<strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;">---</strong></strong>---<strong style="font-size: 20px;letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;font-size: 16px;"><strong style="letter-spacing: 0.544px;">---</strong>--<strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;">---</strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong> End <strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;color: rgb(0, 113, 193);font-family: Helvetica, Arial, sans-serif;font-size: 16px;widows: 1;"><strong style="letter-spacing: 0.544px;">---</strong>--<strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;">---</strong>--</strong>---<strong style="font-size: 20px;letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;font-size: 16px;"><strong style="letter-spacing: 0.544px;">---</strong>--<strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;"><strong style="letter-spacing: 0.544px;">-</strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></strong></span></p><p style="white-space: normal;text-align: center;"></p><p style="white-space: normal;letter-spacing: 0.544px;color: rgb(62, 62, 62);font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;word-spacing: 2px;font-size: 16px;background-color: rgb(255, 255, 255);">往期精彩文章推荐:<br></p><ul class="list-paddingleft-2" style="width: 577.417px;white-space: normal;font-family: -apple-system-font, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;letter-spacing: 0.544px;background-color: rgb(255, 255, 255);"><li style="font-size: 16px;"><h2 style="margin-bottom: 14px;padding-bottom: 10px;font-size: 26px;line-height: 1.4;border-bottom: 1px solid rgb(231, 231, 235);"><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2" style="font-size: 16px;">一篇文章带你了解JavaScript switch</a><br></h2></li><li style="font-size: 16px;"><h2 style="margin-bottom: 14px;padding-bottom: 10px;font-size: 26px;line-height: 1.4;border-bottom: 1px solid rgb(231, 231, 235);"><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2" style="font-size: 16px;">一篇文章带你了解JavaScript字符串</a><br></h2></li><li style="font-size: 16px;"><h2 style="margin-bottom: 14px;padding-bottom: 10px;font-size: 26px;line-height: 1.4;border-bottom: 1px solid rgb(231, 231, 235);"><a target="_blank" data-itemshowtype="0" tab="innerlink" data-linktype="2" style="font-size: 16px;">一篇文章带你了解JavaScript随机数</a><br></h2></li></ul><section style="white-space: normal;letter-spacing: 0.544px;color: rgb(62, 62, 62);word-spacing: 2px;background-color: rgb(255, 255, 255);font-size: 16px;font-family: 微软雅黑;border-width: 0px;border-style: none;border-color: initial;"><section style="border-width: 0px;border-style: none;border-color: initial;"><section data-role="outer" label="Powered by 135editor.com"><section data-tools="135编辑器" data-id="92356" style="border-width: 0px;border-style: none;border-color: initial;"><section data-role="paragraph" style="border-width: 0px;border-style: none;border-color: initial;"><section style="padding: 10px;"><section data-width="97%" style="width: 637.287px;text-align: center;"><section style="margin-bottom: -30px;display: -webkit-flex;justify-content: flex-end;transform: translateZ(10px);"><section style="margin-right: -15px;width: 40px;"><section style="width: 40px;"><img data-ratio="1.3246753246753247" data-type="png" data-w="77" data-width="100%" src="https://filescdn.proginn.com/73a8f5b16758b6b2c9441a66e5fa45a9/0e7563aaa0c8fe1fb69dd4e9d22d14a7.webp" style="display: block;box-sizing: border-box !important;visibility: visible !important;width: 40px !important;"></section></section></section><section data-bgless="spin" data-bglessp="120" style="padding-bottom: 15px;background-color: rgb(236, 234, 233);border-width: 1px;border-style: solid;border-color: transparent;display: flex;justify-content: flex-end;"><section data-width="100%" style="margin-top: -15px;margin-right: -15px;margin-left: 15px;padding: 15px;width: 635.287px;background-color: rgb(249, 231, 192);box-shadow: rgb(204, 204, 204) 0px 0px 2px;"><section style="padding: 15px;border-width: 2px;border-style: solid;border-color: rgb(254, 254, 254);line-height: 26px;"><p><span style="vertical-align: inherit;">欢迎大家<strong style="letter-spacing: 0.544px;">点赞,</strong><strong style="letter-spacing: 0.544px;">留言,</strong><strong>转发,<strong style="letter-spacing: 0.544px;">转载,</strong></strong>感谢大家的相伴与支持</span></p><p><span style="letter-spacing: 0.544px;">想加入前端学习群请在后台回复【</span><strong style="letter-spacing: 0.544px;">入群</strong><span style="letter-spacing: 0.544px;">】</span></p><p><span style="letter-spacing: 0.544px;">万水千山总是情,点个【</span><strong style="letter-spacing: 0.544px;">在看</strong><span style="letter-spacing: 0.544px;">】行不行</span></p></section></section></section></section></section></section></section></section></section></section> </div></div></div><div class="tag-list-box"><div class="tag-list"><div class="tag-list-container"></div></div></div><span class="view_num">浏览 1</span><div class="float-bar float-bar-relative" id="float-bar-relative"><div class="float-bar-body"><div class="item qinglite-zan"><i class="iconfont icon-dianzan"></i>点赞 </div><div class="gap"></div><a href="#comments" class="item"><i class="iconfont iconfont icon-pinglun1"></i><span class="com_num"></span>评论 </a><div class="item qinglite-collect"><i class="iconfont icon-shoucang"></i>收藏 </div><div class="item qinglite_share"><i class="iconfont icon-fenxiang1"></i>分享 <div class="qrcode-modal"><img src="/api/pub/ewm" alt=""><p>手机扫一扫分享</p></div></div><div class="expand"></div><div class="item jubao qinglite-jubao">举报</div></div></div></div><div class="comments_wrapper comments"><div class="title">评论</div><div id="comments" class="comments"><div class="error"></div><div class="textarea-wrapper"><textarea class="comment-content" cols="30" rows="5" placeholder="输入评论"></textarea></div><div class="button"><div class="error"><div class="comment-emojis"><div class="comment-choose-img qinglite_upload"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-tupianyangshi2"></use></svg><span>图片</span></div><div class="comment-choose-img comment-emoji-btn"><svg class="icon show-emoji-list" aria-hidden="true"><use xlink:href="#icon-biaoqing"></use></svg><span class="show-emoji-list">表情</span><div class="comment-emoji-list"></div></div><div style="display: none" class="comment-choose-img"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shipinwenjian1"></use></svg><span>视频</span></div></div></div><button class="qinglite-comment">评价</button></div><div class="medias qinglite_upload_content"></div></div></div><div style="display: none" class="comments"><div class="title">全部评论</div><div class="comments comment-item-content"></div></div><div id="recommend" class="comments"><div class="title">推荐<a href="#qs_detail" class="iconfont icon-huidaodingbu"></a></div></div><div class="qs_post_list flow_post_list"><div class="item qinglite_item"><a href="https://jishu.proginn.com/doc/782964774d3d674cf" title="一篇文章带你了解Hashtable类" class="content"><div class="qinglite_item_top_wrapper"><div class="title">一篇文章带你了解Hashtable类</div><div class="right-top-icon-tag"></div></div><div class="desc">点击上方“Java进阶学习交流”,进行关注后台回复“Java”即可获赠Java学习资料今日鸡汤斜拔玉钗灯影畔,剔开红焰救飞蛾。大家好,我是Java进阶者。一、Hashtable类1.Hashtable类描述的是散列表,也称哈希表,它通过映射...</div></a><a href="https://jishu.proginn.com/u/8361646eee5e43a36" title="Java进阶学习交流" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/522165/cps_wx_017660a4709a.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">Java进阶学习交流</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="https://jishu.proginn.com/doc/6814645e741708a2f" title="一篇文章带你了解HTML5 MathML" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/bb61839914565ba0cd604c7c19a009fb/adf8ab86c4ad71102597142769f7d23f.webp?x-oss-process=image/resize,w_300)"></div></a><a href="https://jishu.proginn.com/doc/6814645e741708a2f" title="一篇文章带你了解HTML5 MathML" class="title_middle">一篇文章带你了解HTML5 MathML</a><a href="https://jishu.proginn.com/u/827964441384c97d1" title="Python爬虫与数据挖掘" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/468332/cps_wx_0173a366442f.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">Python爬虫与数据挖掘</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="https://jishu.proginn.com/doc/31176476a65775c5e" title="一篇文章带你了解ListIterator接口" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/1184754beeccc9f7220ba55dcfa4cd6f/28b3ddd9d00e87a71c7e318603017844.webp?x-oss-process=image/resize,w_300)"></div></a><a href="https://jishu.proginn.com/doc/31176476a65775c5e" title="一篇文章带你了解ListIterator接口" class="title_middle">一篇文章带你了解ListIterator接口</a><a href="https://jishu.proginn.com/u/8361646eee5e43a36" title="Java进阶学习交流" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/522165/cps_wx_017660a4709a.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">Java进阶学习交流</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="https://jishu.proginn.com/doc/10246475636aec794" title="一篇文章带你简单了解音频视频" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/129f86ffd0598fea4ce3b2a95403aea6/81ff78947a10f1d414148c52911a0c1b.webp?x-oss-process=image/resize,w_300)"></div></a><a href="https://jishu.proginn.com/doc/10246475636aec794" title="一篇文章带你简单了解音频视频" class="title_middle">一篇文章带你简单了解音频视频</a><a href="https://jishu.proginn.com/u/56836474f0b4df125" title="音视频开发进阶" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/547651/cps_wx_0177d7ea2b3a.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">音视频开发进阶</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="https://jishu.proginn.com/doc/71196475a3a5c6760" title="一篇文章带你了解Python高阶函数" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/0fb802ceabd2e3d060595614e64b9665/6598c9bee4deed36f9f1b7cdb15ffe6a.webp?x-oss-process=image/resize,w_300)"></div></a><a href="https://jishu.proginn.com/doc/71196475a3a5c6760" title="一篇文章带你了解Python高阶函数" class="title_middle">一篇文章带你了解Python高阶函数</a><a href="https://jishu.proginn.com/u/4917646d3cc66077f" title="Python爬虫与数据挖掘" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/519930/cps_wx_017617091c69.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">Python爬虫与数据挖掘</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="https://jishu.proginn.com/doc/66206475808d9e05f" title="一篇文章带你了解CSS定位知识" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/5fec0de2617b91ba9b8843fa12f90c6b/b64f72b3dc28e0bc1e635abd534abaf4.webp?x-oss-process=image/resize,w_300)"></div></a><a href="https://jishu.proginn.com/doc/66206475808d9e05f" title="一篇文章带你了解CSS定位知识" class="title_middle">一篇文章带你了解CSS定位知识</a><a href="https://jishu.proginn.com/u/4709646ef83610820" title="IT共享之家" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/522178/cps_wx_017660a47959.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">IT共享之家</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item qinglite_item"><a href="https://jishu.proginn.com/doc/53476617a16bea45b" title="一篇文章带你了解Python运算符重载" class="content"><div class="qinglite_item_top_wrapper"><div class="title">一篇文章带你了解Python运算符重载</div><div class="right-top-icon-tag"></div></div><div class="desc">点击上方“Go语言进阶学习”,进行关注回复“Go语言”即可获赠从入门到进阶共10本电子书今日鸡汤不堪玄鬓影,来对白头吟。您可以根据所使用的操作数来更改Python中运算符的含义。这种做法称为运算符重载,今天我们一起来...</div></a><a href="https://jishu.proginn.com/u/7010646ef8b10281f" title="Go语言进阶学习" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/522179/cps_wx_017660a47a0c.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">Go语言进阶学习</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="https://jishu.proginn.com/doc/82666475a40b37d55" title="一篇文章带你了解Python高阶函数" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/1c8855eb78cb8b3db7c261437f2656f0/ae7e24102702dec78cc94ac833d9b737.webp?x-oss-process=image/resize,w_300)"></div></a><a href="https://jishu.proginn.com/doc/82666475a40b37d55" title="一篇文章带你了解Python高阶函数" class="title_middle">一篇文章带你了解Python高阶函数</a><a href="https://jishu.proginn.com/u/7010646ef8b10281f" title="Go语言进阶学习" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/522179/cps_wx_017660a47a0c.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">Go语言进阶学习</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="https://jishu.proginn.com/doc/516264758f1a14517" title="一篇文章带你了解Python运算符重载" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/887f7a659f820149887d46884d2d02ef/506fbc876c133544d36f9e733a5f37fa.webp?x-oss-process=image/resize,w_300)"></div></a><a href="https://jishu.proginn.com/doc/516264758f1a14517" title="一篇文章带你了解Python运算符重载" class="title_middle">一篇文章带你了解Python运算符重载</a><a href="https://jishu.proginn.com/u/7010646ef8b10281f" title="Go语言进阶学习" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/522179/cps_wx_017660a47a0c.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">Go语言进阶学习</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><div class="item img qinglite_item"><a href="https://jishu.proginn.com/doc/6375647599615d5c4" title="一篇文章带你了解Python运算符重载" class="content"><div class="bg" style="background-image:url(https://filescdn.proginn.com/9d2ede49259a96123cb33872bacb1981/123364f1a61b16234eb457f25962690a.webp?x-oss-process=image/resize,w_300)"></div></a><a href="https://jishu.proginn.com/doc/6375647599615d5c4" title="一篇文章带你了解Python运算符重载" class="title_middle">一篇文章带你了解Python运算符重载</a><a href="https://jishu.proginn.com/u/827964441384c97d1" title="Python爬虫与数据挖掘" class="up_info"><div style="background-image:url(https://inn.proginn.com/useralbum/468332/cps_wx_0173a366442f.jpg!mediumicon?imageMogr2/format/webp/thumbnail/!200x200r)" class="avatar"></div><div class="username">Python爬虫与数据挖掘</div><div class="expand"></div><div class="likes"><i class="iconfont icon-dianzan"></i></div><span class="num">0</span></a></div><i></i><i></i><i></i><i></i><i></i></div><div class="float-bar" id="float-bar"><div class="float-bar-body"><div class="item qinglite-zan"><i class="iconfont icon-dianzan"></i>点赞 </div><div class="gap"></div><a href="#comments" class="item"><i class="iconfont iconfont icon-pinglun1"></i><span class="com_num"></span>评论 </a><div class="item qinglite-collect"><i class="iconfont icon-shoucang"></i>收藏 </div><div class="item qinglite_share"><i class="iconfont icon-fenxiang1"></i>分享 <div class="qrcode-modal"><img src="/api/pub/ewm" alt=""><p>手机扫一扫分享</p></div></div><div class="expand"></div><div class="item jubao qinglite-jubao">举报</div><a href="#recommend" class="item iconfont icon-huidaodingbu"></a></div></div></article></div></main><script> let act_type = 1; let act_pro_id="221196"; let act_point = 0; let act_kind = 0; let act_time =30000; </script><footer><div class="container"><div class="links"><i class="copyright">2023©技术圈</i><a href="https://jishu.proginn.com">隐私协议</a><a href="https://jishu.proginn.com">用户协议</a><a href="https://jishu.proginn.com/about">关于我们</a></div></div></footer><link href="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/layui/css/layui.css" rel="stylesheet"><script src="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/layui/layui.js?v=v20231129069"></script><script> let token = ""; var $ = layui.jquery; </script><script src="https://cdn.qinglite.cn/js/pub.js?v=v20231129069"></script><script src="https://cdn.qinglite.cn/js/news_info.js?v=v20231129069"></script><link rel="stylesheet" href="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/icon/iconfont.css?v=v20231129069"><script src="https://qinglite-1253448069.cos.ap-shanghai.myqcloud.com/css/icon/iconfont.js?v=v20231129069"></script></body></html>