DOM 节点
根据 W3C HTML DOM 标准，HTML 文档中的所有事物都是节点：
- 整个文档是文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 所有注释是注释节点
有了 HTML DOM，节点树中的所有节点都能通过 JavaScript 访问。
能够创建新节点，还可以修改和删除所有节点。
节点关系
节点树中的节点彼此之间有一定的等级关系。
- 术语（父、子和同胞，parent、child 以及 sibling）用于描述这些关系。
- 在节点树中，顶端节点被称为根（根节点）。
- 每个节点都有父节点，除了根（根节点没有父节点）。
- 节点能够拥有一定数量的子
- 同胞（兄弟或姐妹）指的是拥有相同父的节点。
DOM 教程
DOM 第一课
Hello world!
从以上的 HTML 中您能读到以下信息：
- 是根节点
- 没有父
- 是 和 的父
- 是 的第一个子
- 是 的最后一个子
同时：
- 有一个子：</li>
<li><title> 有一个子（文本节点）："DOM 教程"</li>
<li><body> 有两个子：<h1> 和 <p></li>
<li><h1> 有一个子："DOM 第一课"</li>
<li><p> 有一个子："Hello world!"</li>
<li><h1> 和 <p> 是同胞</li>
</ul>
<h2>在节点之间导航</h2>
<p>通过 JavaScript，您可以使用以下节点属性在节点之间导航：</p>
<ul>
<li>parentNode</li>
<li>childNodes[<i>nodenumber</i>]</li>
<li>firstChild</li>
<li>lastChild</li>
<li>nextSibling</li>
<li>previousSibling</li>
</ul>
<h2>子节点和节点值</h2>
<p>DOM 处理中的一种常见错误是认为元素节点中包含文本。</p>
<h3>实例：</h3>
<pre class="language-html">
<title id="demo">DOM 教程
（上面例子中的）元素节点
<mark>不包含</mark>文本。</p>
<p>它包含了值为 "DOM 教程" 的<em>文本节点</em>。</p>
<p>文本节点的值能够通过节点的 <code>innerHTML</code> 属性进行访问：</p>
<pre class="language-js">
var myTitle = document.getElementById("demo").innerHTML;
</pre>
<p>访问 innerHTML 属性等同于访问首个子节点的 <code>nodeValue</code>：</p>
<pre class="language-js">
var myTitle = document.getElementById("demo").firstChild.nodeValue;
</pre>
<p>也可以这样访问第一个子节点：</p>
<pre class="language-js">
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
</pre>
<p>以下三个例子取回 <code><h1></code> 元素的文本并复制到 <code><p></code> 元素中：</p>
<h3>实例 1</h3>
<pre class="language-html">
<html>
<body>
<h1 id="id01">我的第一张页面</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").innerHTML;
</script>
</body>
</html>
</pre>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p>
<h3>实例 2</h3>
<pre class="language-html">
<html>
<body>
<h1 id="id01">我的第一张页面</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").firstChild.nodeValue;
</script>
</body>
</html>
</pre>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p>
<h3>实例 3</h3>
<pre class="language-html">
<html>
<body>
<h1 id="id01">我的第一张页面</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").childNodes[0].nodeValue;
</script>
</body>
</html>
</pre>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p>
<h2>InnerHTML</h2>
<p>在本教程中，我们使用 <code>innerHTML</code> 取回 HTML 元素的内容。</p>
<p>不过，学习以上其他的方法有助于理解 DOM 的树结构和导航。</p>
<h2>DOM 根节点</h2>
<p>有两个特殊属性允许访问完整文档：</p>
<ul>
<li>document.body - 文档的 body</li>
<li>document.documentElement - 完整文档</li>
</ul>
<h3>实例</h3>
<pre class="language-html">
<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.body</b> 属性。</p>
</div>
<script>
alert(document.body.innerHTML);
</script>
</body>
</html>
</pre>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p>
<h3>实例</h3>
<pre class="language-html">
<html>
<body>
<p>Hello World!</p>
<div>
<p>DOM 很有用！</p>
<p>本例演示 <b>document.documentElement</b> 属性。</p>
</div>
<script>
alert(document.documentElement.innerHTML);
</script>
</body>
</html>
</pre>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p>
<h2>nodeName 属性</h2>
<p><code>nodeName</code> 属性规定节点的名称。</p>
<ul>
<li>nodeName 是只读的</li>
<li>元素节点的 nodeName 等同于标签名</li>
<li>属性节点的 nodeName 是属性名称</li>
<li>文本节点的 nodeName 总是 #text</li>
<li>文档节点的 nodeName 总是 #document</li>
</ul>
<h3>实例</h3>
<pre class="language-html">
<h1 id="id01">我的第一张网页</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeName;
</script>
</pre>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p>
<p class="note"><span>注释：</span>nodeName 总是包含 HTML 元素的大写标签名。</p>
<h2>nodeValue 属性</h2>
<p><code>nodeValue</code> 属性规定节点的值。</p>
<ul>
<li>元素节点的 nodeValue 是 undefined</li>
<li>文本节点的 nodeValue 是文本文本</li>
<li>属性节点的 nodeValue 是属性值</li>
</ul>
<h2>nodeType 属性</h2>
<p><code>nodeType</code> 属性返回节点的类型。<code>nodeType</code> 是只读的。</p>
<h3>实例</h3>
<pre class="language-html">
<h1 id="id01">我的第一张网页</h1>
<p id="id02">Hello!</p>
<script>
document.getElementById("id02").innerHTML = document.getElementById("id01").nodeType;
</script>
</pre>
<a target="_blank" href="#" class="showbtn codebtn">运行实例 »</a><p>点击 "运行实例" 按钮查看在线实例</p>
<p>最重要的 nodeType 属性是：</p>
<table class="dataintable">
<tr>
<th>节点</th>
<th>类型</th>
<th>例子</th>
</tr>
<tr>
<td>ELEMENT_NODE</td>
<td>1</td>
<td><h1 class="heading">W3School</h1></td>
</tr>
<tr>
<td>ATTRIBUTE_NODE</td>
<td>2</td>
<td>class = "heading" （弃用）</td>
</tr>
<tr>
<td>TEXT_NODE</td>
<td>3</td>
<td>W3School</td>
</tr>
<tr>
<td>COMMENT_NODE</td>
<td>8</td>
<td><!-- 这是注释 --></td>
</tr>
<tr>
<td>DOCUMENT_NODE</td>
<td>9</td>
<td>HTML 文档本身（<html> 的父）</td>
</tr>
<tr>
<td>DOCUMENT_TYPE_NODE</td>
<td>10</td>
<td><!Doctype html></td>
</tr>
</table>
<p>Type 2 在 HTML DOM 中已弃用。XML DOM 中未弃用。</p> </div>
<div class="desadown flexRow">
<a href="/js/js-js-htmldom-eventlistener.html" title="DOM 事件监听程序" class="dsdleft flexRow dsda">
<img src="/static/lhimages/icon226.png" class="nocheck"> <img src="/static/lhimages/icon226_check.png" class="check"> <p>DOM 事件监听程序</p>
</a>
<a href="/js/js-js-htmldom-nodes.html" title="DOM 节点" class="dsdright flexRow dsda"><p>DOM 节点</p>
<img src="/static/lhimages/icon227.png" class="nocheck">
<img src="/static/lhimages/icon227_check.png" class="check">
</a>
</div>
</div>
<div class="left-video">
<div class="ltzt-title lttitle flexRow">
<div class="title-left flexRow">
<p><span>相关</span><b></b></p>
<p>视频</p>
<p class="eng">RELATED VIDEOS</p>
</div>
<a class="title-more flexRow" href="/course/sort_new.html" title="视频教程"><b></b>更多 </a>
</div>
<div class="video-list flexRow codevideo">
<div class="codevideo-tab flexColumn">
<div class="vtaba-free">
<p>免费</p>
</div>
<a class="codevtaba flexRow" href="/course/901.html" title="Web前端开发极速入门">
<img src="https://img.php.cn/upload/course/000/000/067/64be28a53a4f6310.png?x-oss-process=image/resize,m_fill,h_150,w_263" alt="Web前端开发极速入门" class="codevtabimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="codevtdown flexColumn">
<div>
<dt><i class='bg1'>初级</i>
<a href="/course/901.html" title="Web前端开发极速入门"
class="aBlack aClass">Web前端开发极速入门</a>
</dt>
<dd class="flexRow studyandcoll">
<p>219920次学习</p><em><a class="courseICollection " data-id="901"
href="javascript:void(0);"><b></b>收藏</a></em>
</dd>
</div>
</div>
</div>
<div class="codevideo-tab flexColumn">
<div class="vtaba-free">
<p>免费</p>
</div>
<a class="codevtaba flexRow" href="/course/880.html" title="前端入门_HTML5">
<img src="https://img.php.cn/upload/course/000/000/068/6255589398c2c999.png?x-oss-process=image/resize,m_fill,h_150,w_263" alt="前端入门_HTML5" class="codevtabimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="codevtdown flexColumn">
<div>
<dt><i class='bg1'>初级</i>
<a href="/course/880.html" title="前端入门_HTML5"
class="aBlack aClass">前端入门_HTML5</a>
</dt>
<dd class="flexRow studyandcoll">
<p>616946次学习</p><em><a class="courseICollection " data-id="880"
href="javascript:void(0);"><b></b>收藏</a></em>
</dd>
</div>
</div>
</div>
<div class="codevideo-tab flexColumn">
<div class="vtaba-free">
<p>免费</p>
</div>
<a class="codevtaba flexRow" href="/course/874.html" title="30分钟学会网站布局">
<img src="https://img.php.cn/upload/course/000/000/041/61b8365849424887.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="30分钟学会网站布局" class="codevtabimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="codevtdown flexColumn">
<div>
<dt><i class='bg1'>初级</i>
<a href="/course/874.html" title="30分钟学会网站布局"
class="aBlack aClass">30分钟学会网站布局</a>
</dt>
<dd class="flexRow studyandcoll">
<p>238440次学习</p><em><a class="courseICollection " data-id="874"
href="javascript:void(0);"><b></b>收藏</a></em>
</dd>
</div>
</div>
</div>
<div class="codevideo-tab flexColumn">
<div class="vtaba-free">
<p>免费</p>
</div>
<a class="codevtaba flexRow" href="/course/893.html" title="CSS视频教程-玉女心经版">
<img src="https://img.php.cn/upload/course/000/000/068/625558b87e512730.png?x-oss-process=image/resize,m_fill,h_150,w_263" alt="CSS视频教程-玉女心经版" class="codevtabimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="codevtdown flexColumn">
<div>
<dt><i class='bg1'>初级</i>
<a href="/course/893.html" title="CSS视频教程-玉女心经版"
class="aBlack aClass">CSS视频教程-玉女心经版</a>
</dt>
<dd class="flexRow studyandcoll">
<p>393054次学习</p><em><a class="courseICollection " data-id="893"
href="javascript:void(0);"><b></b>收藏</a></em>
</dd>
</div>
</div>
</div>
<div class="codevideo-tab flexColumn">
<div class="vtaba-free">
<p>免费</p>
</div>
<a class="codevtaba flexRow" href="/course/894.html" title="JavaScript极速入门_玉女心经系列">
<img src="https://img.php.cn/upload/course/000/000/068/625558e4f11c8518.png?x-oss-process=image/resize,m_fill,h_150,w_263" alt="JavaScript极速入门_玉女心经系列" class="codevtabimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="codevtdown flexColumn">
<div>
<dt><i class='bg1'>初级</i>
<a href="/course/894.html" title="JavaScript极速入门_玉女心经系列"
class="aBlack aClass">JavaScript极速入门_玉女心经系列</a>
</dt>
<dd class="flexRow studyandcoll">
<p>709168次学习</p><em><a class="courseICollection " data-id="894"
href="javascript:void(0);"><b></b>收藏</a></em>
</dd>
</div>
</div>
</div>
<div class="codevideo-tab flexColumn">
<div class="vtaba-free">
<p>免费</p>
</div>
<a class="codevtaba flexRow" href="/course/372.html" title="独孤九贱(1)_HTML5视频教程">
<img src="https://img.php.cn/upload/course/000/000/001/5d1c6ddbecdb1707.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="独孤九贱(1)_HTML5视频教程" class="codevtabimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="codevtdown flexColumn">
<div>
<dt><i class='bg1'>初级</i>
<a href="/course/372.html" title="独孤九贱(1)_HTML5视频教程"
class="aBlack aClass">独孤九贱(1)_HTML5视频教程</a>
</dt>
<dd class="flexRow studyandcoll">
<p>615934次学习</p><em><a class="courseICollection " data-id="372"
href="javascript:void(0);"><b></b>收藏</a></em>
</dd>
</div>
</div>
</div>
<div class="codevideo-tab flexColumn">
<div class="vtaba-free">
<p>免费</p>
</div>
<a class="codevtaba flexRow" href="/course/582.html" title="独孤九贱(6)_jQuery视频教程">
<img src="https://img.php.cn/upload/course/000/000/001/5d1c6e0d2b744633.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="独孤九贱(6)_jQuery视频教程" class="codevtabimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="codevtdown flexColumn">
<div>
<dt><i class='bg2'>中级</i>
<a href="/course/582.html" title="独孤九贱(6)_jQuery视频教程"
class="aBlack aClass">独孤九贱(6)_jQuery视频教程</a>
</dt>
<dd class="flexRow studyandcoll">
<p>341081次学习</p><em><a class="courseICollection " data-id="582"
href="javascript:void(0);"><b></b>收藏</a></em>
</dd>
</div>
</div>
</div>
<div class="codevideo-tab flexColumn">
<div class="vtaba-free">
<p>免费</p>
</div>
<a class="codevtaba flexRow" href="/course/585.html" title="独孤九贱(7)_Bootstrap视频教程">
<img src="https://img.php.cn/upload/course/000/000/001/5d1c6e1577037989.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="独孤九贱(7)_Bootstrap视频教程" class="codevtabimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="codevtdown flexColumn">
<div>
<dt><i class='bg2'>中级</i>
<a href="/course/585.html" title="独孤九贱(7)_Bootstrap视频教程"
class="aBlack aClass">独孤九贱(7)_Bootstrap视频教程</a>
</dt>
<dd class="flexRow studyandcoll">
<p>270827次学习</p><em><a class="courseICollection " data-id="585"
href="javascript:void(0);"><b></b>收藏</a></em>
</dd>
</div>
</div>
</div>
<div class="codevideo-tab flexColumn">
<div class="vtaba-free">
<p>免费</p>
</div>
<a class="codevtaba flexRow" href="/course/373.html" title="独孤九贱(2)_CSS视频教程">
<img src="https://img.php.cn/upload/course/000/000/001/5d1c6de7424b9255.jpg?x-oss-process=image/resize,m_fill,h_150,w_263" alt="独孤九贱(2)_CSS视频教程" class="codevtabimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="codevtdown flexColumn">
<div>
<dt><i class='bg1'>初级</i>
<a href="/course/373.html" title="独孤九贱(2)_CSS视频教程"
class="aBlack aClass">独孤九贱(2)_CSS视频教程</a>
</dt>
<dd class="flexRow studyandcoll">
<p>229605次学习</p><em><a class="courseICollection " data-id="373"
href="javascript:void(0);"><b></b>收藏</a></em>
</dd>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="conRight">
<div class="technology-news rightDiv">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b>
<p>科技资讯</p>
</div>
<a class="rititle-more flexRow" href="/it" title="科技资讯">更多</a>
</div>
<ul class="tecnewul">
<li class="tecnelli flexRow">
<a href="/faq/1747361.html" title="跟进YouTube！Meta推短片内容保护机制 助原创者抗盗版" class="tecna">
<img src="https://img.php.cn/upload/article/001/242/473/176353272537319.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="跟进YouTube！Meta推短片内容保护机制 助原创者抗盗版" class="tecnAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="tecnRight flexColumn">
<a href="/faq/1747361.html" title="跟进YouTube！Meta推短片内容保护机制 助原创者抗盗版"
class="tecnda overflowclass">跟进YouTube！Meta推短片内容保护机制 助原创者抗盗版</a>
<a class="tecnp overflowclass" href="/faq/1747361.html" title="跟进YouTube！Meta推短片内容保护机制 助原创者抗盗版">社群媒体巨擘Meta近日推出一项全新的内容保护机制，旨在协助Facebook短影片创作者防范未经授权的内容盗用。这项名为「Facebook内容保护」的工具，能够自动侦测平台上的原创Reels是否被他人转载，并提供多种应对选项，强化创作者对自身作品的掌控权。该工具目前支援行動裝置使用，当系统检测到影片被他人使用时，创作者将收到通知，并可依需求选择后续处理方式：包括封锁该影片在Facebook与Instagram上的显示权限、持续追蹤其传播数据，或加入署名链接导回原始内容。此外，创作者亦能主动放弃所</a>
</div>
</li>
<li class="tecnelli flexRow">
<a href="/faq/1747285.html" title="国际电联：全球仍有约 22 亿人处于未联网状态" class="tecna">
<img src="https://img.php.cn/upload/article/001/246/273/176353182994639.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="国际电联：全球仍有约 22 亿人处于未联网状态" class="tecnAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="tecnRight flexColumn">
<a href="/faq/1747285.html" title="国际电联：全球仍有约 22 亿人处于未联网状态"
class="tecnda overflowclass">国际电联：全球仍有约 22 亿人处于未联网状态</a>
<a class="tecnp overflowclass" href="/faq/1747285.html" title="国际电联：全球仍有约 22 亿人处于未联网状态">感谢网友西窗旧事提供的线索！11月18日，国际电信联盟（ITU）发布最新《事实与数字》报告，指出目前全球仍有大约22亿人未能接入互联网，较2024年统计的23亿人略有减少。该报告预测，到2025年，全球互联网用户数量将攀升至60亿。当前，约三分之一的移动宽带用户已使用5G网络，用户规模接近30亿，预计今年内5G网络将覆盖全球55%的人口，反映出先进通信技术正在加速推广。然而，5G覆盖存在巨大区域差异，高收入国家的5G人口覆盖率已达到84%，而低收入国家</a>
</div>
</li>
<li class="tecnelli flexRow">
<a href="/faq/1747198.html" title="消息称苹果、高通等芯片巨头将采用英特尔先进封装技术，打造下一代移动芯片" class="tecna">
<img src="https://img.php.cn/upload/article/001/246/273/176353098541348.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="消息称苹果、高通等芯片巨头将采用英特尔先进封装技术，打造下一代移动芯片" class="tecnAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="tecnRight flexColumn">
<a href="/faq/1747198.html" title="消息称苹果、高通等芯片巨头将采用英特尔先进封装技术，打造下一代移动芯片"
class="tecnda overflowclass">消息称苹果、高通等芯片巨头将采用英特尔先进封装技术，打造下一代移动芯片</a>
<a class="tecnp overflowclass" href="/faq/1747198.html" title="消息称苹果、高通等芯片巨头将采用英特尔先进封装技术，打造下一代移动芯片">感谢网友补药吖的线索投递！11月18日消息，据科技媒体TechPowerUp今天报道，英特尔、高通和博通等芯片巨头未来可能会成为英特尔晶圆代工客户，意味着英特尔可能借由芯片封装业务大幅提升收入。据报道，苹果、高通和博通最近发布的招聘信息显示，这三家芯片巨头在招聘封装工程师职位时已将掌握英特尔EMIB（嵌入式多芯片互联桥封装）技术纳入考量因素，暗示这些公司希望招聘熟悉EMIB的工程师，帮助设计下一代移动端产品。注：EMIB是一种嵌入芯片内部的硅桥，可在不需要大型硅中介层的情况下，让</a>
</div>
</li>
</ul>
</div>
<div class="readCharts">
<div class="readDown flexColumn">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b><b></b></div>
<a class="rititle-more flexRow" href="/article.html" target="_blank" title="更多">更多</a>
</div>
<ul class="rcUl">
<li class="rcLi flexRow">
<div class="rclileft">
<p>1</p>
</div>
<div class="flexColumn rcreadDiv">
<a href="/faq/1747452.html" class=" aClass readA overflowclass"
title="在Salesforce LWC中实现数据表头固定：SLDS实践指南">在Salesforce LWC中实现数据表头固定：SLDS实践指南</a>
<a href="/faq/1747452.html" class=" aClass overflowclass"
title="在Salesforce LWC中实现数据表头固定：SLDS实践指南">本文详细介绍了在SalesforceLightningWebComponents(LWC)中，如何利用SalesforceLightningDesignSystem(SLDS)提供的特定CSS类来实现数据表格头部的固定功能。通过应用slds-table--header-fixed_container、slds-table--header-fixed和slds-cell-fixed等类，并配合容器高度设置，确保用户在滚动长列表时，表格标题始终可见，从而显著提升用户体验和数据可读性。</a>
</div>
</li>
<li class="rcLi flexRow">
<div class="rclileft">
<p>2</p>
</div>
<div class="flexColumn rcreadDiv">
<a href="/faq/1747451.html" class=" aClass readA overflowclass"
title="解决多步骤表单中点击按钮后 Tab 自动返回的问题">解决多步骤表单中点击按钮后 Tab 自动返回的问题</a>
</div>
</li>
<li class="rcLi flexRow">
<div class="rclileft">
<p>3</p>
</div>
<div class="flexColumn rcreadDiv">
<a href="/faq/1747450.html" class=" aClass readA overflowclass"
title="通过数据属性和事件委托实现Vanilla JS动态模态框内容">通过数据属性和事件委托实现Vanilla JS动态模态框内容</a>
</div>
</li>
<li class="rcLi flexRow">
<div class="rclileft">
<p>4</p>
</div>
<div class="flexColumn rcreadDiv">
<a href="/faq/1747448.html" class=" aClass readA overflowclass"
title="CSS框架的响应式隐藏与显示实践_display d-none d-block应用">CSS框架的响应式隐藏与显示实践_display d-none d-block应用</a>
</div>
</li>
<li class="rcLi flexRow">
<div class="rclileft">
<p>5</p>
</div>
<div class="flexColumn rcreadDiv">
<a href="/faq/1747446.html" class=" aClass readA overflowclass"
title="JavaScript_地理位置服务与地图集成">JavaScript_地理位置服务与地图集成</a>
</div>
</li>
<li class="rcLi flexRow">
<div class="rclileft">
<p>6</p>
</div>
<div class="flexColumn rcreadDiv">
<a href="/faq/1747443.html" class=" aClass readA overflowclass"
title="PHP匿名类构造函数参数传递：实用指南">PHP匿名类构造函数参数传递：实用指南</a>
</div>
</li>
<li class="rcLi flexRow">
<div class="rclileft">
<p>7</p>
</div>
<div class="flexColumn rcreadDiv">
<a href="/faq/1747440.html" class=" aClass readA overflowclass"
title="使用Go语言将通用CSV文件转换为XML格式的教程">使用Go语言将通用CSV文件转换为XML格式的教程</a>
</div>
</li>
<li class="rcLi flexRow">
<div class="rclileft">
<p>8</p>
</div>
<div class="flexColumn rcreadDiv">
<a href="/faq/1747439.html" class=" aClass readA overflowclass"
title="PHP 枚举类型与字符串表示：__toString限制、替代方案及最佳实践">PHP 枚举类型与字符串表示：__toString限制、替代方案及最佳实践</a>
</div>
</li>
<li class="rcLi flexRow">
<div class="rclileft">
<p>9</p>
</div>
<div class="flexColumn rcreadDiv">
<a href="/faq/1747436.html" class=" aClass readA overflowclass"
title="Laravel如何获取上一次请求的URL和输入">Laravel如何获取上一次请求的URL和输入</a>
</div>
</li>
</ul>
</div>
</div>
<div class="adversitement">
<script type="text/javascript" src="https://teacher.php.cn/php/MDM3MTk1MGYxYjI5ODJmNTE0ZWVkZTA3NmJhYzhmMjI6Og=="></script>
</div>
<div class=" rightStudy rightDiv">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b>
<p> 精选课程</p>
</div>
<a class="rititle-more flexRow" href="/course/sort_new.html" title="精选课程">更多</a>
</div>
<div class="ristyList flexColumn">
<div class="ristyA flexRow ">
<a href="/course/797.html" title="PHP实战天龙八部之微信支付视频教程">
<img src="https://img.php.cn/upload/course/000/000/001/5d242759adb88970.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="PHP实战天龙八部之微信支付视频教程" class="ristyAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a href="/course/797.html" title="PHP实战天龙八部之微信支付视频教程"
class="rirightp overflowclass">PHP实战天龙八部之微信支付视频教程</a>
<div class="risrdown flexRow">
<p>共5课时</p><b></b>
<p>17.2万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow ">
<a href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站">
<img src="https://img.php.cn/upload/course/000/000/001/5d2426f409839992.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="PHP实战天龙八部之仿爱奇艺电影网站" class="ristyAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a href="/course/801.html" title="PHP实战天龙八部之仿爱奇艺电影网站"
class="rirightp overflowclass">PHP实战天龙八部之仿爱奇艺电影网站</a>
<div class="risrdown flexRow">
<p>共49课时</p><b></b>
<p>77.2万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow ">
<a href="/course/880.html" title="前端入门_HTML5">
<img src="https://img.php.cn/upload/course/000/000/068/6255589398c2c999.png?x-oss-process=image/resize,m_fill,h_88,w_162" alt="前端入门_HTML5" class="ristyAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a href="/course/880.html" title="前端入门_HTML5"
class="rirightp overflowclass">前端入门_HTML5</a>
<div class="risrdown flexRow">
<p>共29课时</p><b></b>
<p>61.8万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow ">
<a href="/course/893.html" title="CSS视频教程-玉女心经版">
<img src="https://img.php.cn/upload/course/000/000/068/625558b87e512730.png?x-oss-process=image/resize,m_fill,h_88,w_162" alt="CSS视频教程-玉女心经版" class="ristyAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a href="/course/893.html" title="CSS视频教程-玉女心经版"
class="rirightp overflowclass">CSS视频教程-玉女心经版</a>
<div class="risrdown flexRow">
<p>共25课时</p><b></b>
<p>39.4万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow ">
<a href="/course/894.html" title="JavaScript极速入门_玉女心经系列">
<img src="https://img.php.cn/upload/course/000/000/068/625558e4f11c8518.png?x-oss-process=image/resize,m_fill,h_88,w_162" alt="JavaScript极速入门_玉女心经系列" class="ristyAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a href="/course/894.html" title="JavaScript极速入门_玉女心经系列"
class="rirightp overflowclass">JavaScript极速入门_玉女心经系列</a>
<div class="risrdown flexRow">
<p>共43课时</p><b></b>
<p>71.1万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow ">
<a href="/course/372.html" title="独孤九贱(1)_HTML5视频教程">
<img src="https://img.php.cn/upload/course/000/000/001/5d1c6ddbecdb1707.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="独孤九贱(1)_HTML5视频教程" class="ristyAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a href="/course/372.html" title="独孤九贱(1)_HTML5视频教程"
class="rirightp overflowclass">独孤九贱(1)_HTML5视频教程</a>
<div class="risrdown flexRow">
<p>共25课时</p><b></b>
<p>61.7万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow ">
<a href="/course/373.html" title="独孤九贱(2)_CSS视频教程">
<img src="https://img.php.cn/upload/course/000/000/001/5d1c6de7424b9255.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="独孤九贱(2)_CSS视频教程" class="ristyAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a href="/course/373.html" title="独孤九贱(2)_CSS视频教程"
class="rirightp overflowclass">独孤九贱(2)_CSS视频教程</a>
<div class="risrdown flexRow">
<p>共22课时</p><b></b>
<p>23万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow ">
<a href="/course/386.html" title="独孤九贱(3)_JavaScript视频教程">
<img src="https://img.php.cn/upload/course/000/000/001/5d1c6df423564706.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="独孤九贱(3)_JavaScript视频教程" class="ristyAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a href="/course/386.html" title="独孤九贱(3)_JavaScript视频教程"
class="rirightp overflowclass">独孤九贱(3)_JavaScript视频教程</a>
<div class="risrdown flexRow">
<p>共28课时</p><b></b>
<p>34万人学习</p>
</div>
</div>
</div>
<div class="ristyA flexRow ">
<a href="/course/379.html" title="独孤九贱(4)_PHP视频教程">
<img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg?x-oss-process=image/resize,m_fill,h_88,w_162" alt="独孤九贱(4)_PHP视频教程" class="ristyAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ristyaRight flexColumn">
<a href="/course/379.html" title="独孤九贱(4)_PHP视频教程"
class="rirightp overflowclass">独孤九贱(4)_PHP视频教程</a>
<div class="risrdown flexRow">
<p>共89课时</p><b></b>
<p>125.3万人学习</p>
</div>
</div>
</div>
</div>
</div>
<div class=" rightDowns rightDiv">
<div class="rightdTitle flexRow">
<div class="title-left flexRow"> <b></b>
<p> 热门下载</p>
</div>
<a class="rititle-more flexRow" href="/xiazai/" title="热门下载">更多</a>
</div>
<div class="rids">
<div href="/xiazai/gongju/845" title="phpStudy 2018最新版" class="ridsA flexRow " >
<a href="/xiazai/gongju/845" title="phpStudy 2018最新版">
<img src="https://img.php.cn/upload/manual/000/000/001/5a5f0fb612676526.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="phpStudy 2018最新版" class="ridsAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ridsaRight flexColumn">
<a href="/xiazai/gongju/845" title="phpStudy 2018最新版" class="ridsrp overflowclass">phpStudy 2018最新版</a>
<a class="ridsrdown flexRow" href="/xiazai/gongju/845" title="phpStudy 2018最新版">
<p>下载</p>
</a>
</div>
</div>
<div href="/xiazai/gongju/1351" title="vc9-vc14（32+64位）运行库合集（链接在下方）" class="ridsA flexRow " >
<a href="/xiazai/gongju/1351" title="vc9-vc14（32+64位）运行库合集（链接在下方）">
<img src="https://img.php.cn/upload/manual/000/000/001/5a6a896b53dea437.png?x-oss-process=image/resize,m_fill,h_60,w_101" alt="vc9-vc14（32+64位）运行库合集（链接在下方）" class="ridsAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ridsaRight flexColumn">
<a href="/xiazai/gongju/1351" title="vc9-vc14（32+64位）运行库合集（链接在下方）" class="ridsrp overflowclass">vc9-vc14（32+64位）运行库合集（链接在下方）</a>
<a class="ridsrdown flexRow" href="/xiazai/gongju/1351" title="vc9-vc14（32+64位）运行库合集（链接在下方）">
<p>下载</p>
</a>
</div>
</div>
<div href="/xiazai/gongju/1479" title="VC9 32位" class="ridsA flexRow " >
<a href="/xiazai/gongju/1479" title="VC9 32位">
<img src="https://img.php.cn/upload/manual/000/000/001/5af2c4207a616756.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="VC9 32位" class="ridsAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ridsaRight flexColumn">
<a href="/xiazai/gongju/1479" title="VC9 32位" class="ridsrp overflowclass">VC9 32位</a>
<a class="ridsrdown flexRow" href="/xiazai/gongju/1479" title="VC9 32位">
<p>下载</p>
</a>
</div>
</div>
<div href="/xiazai/gongju/1481" title="VC11 32位" class="ridsA flexRow " >
<a href="/xiazai/gongju/1481" title="VC11 32位">
<img src="https://img.php.cn/upload/manual/000/000/001/5af2c4684dbe4408.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="VC11 32位" class="ridsAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ridsaRight flexColumn">
<a href="/xiazai/gongju/1481" title="VC11 32位" class="ridsrp overflowclass">VC11 32位</a>
<a class="ridsrdown flexRow" href="/xiazai/gongju/1481" title="VC11 32位">
<p>下载</p>
</a>
</div>
</div>
<div href="/xiazai/gongju/714" title="php程序员工具箱完整版" class="ridsA flexRow " >
<a href="/xiazai/gongju/714" title="php程序员工具箱完整版">
<img src="https://img.php.cn/upload/manual/000/000/001/5a718c0e5be0a511.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="php程序员工具箱完整版" class="ridsAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ridsaRight flexColumn">
<a href="/xiazai/gongju/714" title="php程序员工具箱完整版" class="ridsrp overflowclass">php程序员工具箱完整版</a>
<a class="ridsrdown flexRow" href="/xiazai/gongju/714" title="php程序员工具箱完整版">
<p>下载</p>
</a>
</div>
</div>
<div href="/xiazai/gongju/1484" title="VC14 32位" class="ridsA flexRow " >
<a href="/xiazai/gongju/1484" title="VC14 32位">
<img src="https://img.php.cn/upload/manual/000/000/001/5af2c54fc1f91550.jpg?x-oss-process=image/resize,m_fill,h_60,w_101" alt="VC14 32位" class="ridsAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ridsaRight flexColumn">
<a href="/xiazai/gongju/1484" title="VC14 32位" class="ridsrp overflowclass">VC14 32位</a>
<a class="ridsrdown flexRow" href="/xiazai/gongju/1484" title="VC14 32位">
<p>下载</p>
</a>
</div>
</div>
<div href="/xiazai/gongju/93" title="SublimeText3汉化版" class="ridsA flexRow " >
<a href="/xiazai/gongju/93" title="SublimeText3汉化版">
<img src="https://img.php.cn/upload/manual/000/000/001/58a1753774be3478.png?x-oss-process=image/resize,m_fill,h_60,w_101" alt="SublimeText3汉化版" class="ridsAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ridsaRight flexColumn">
<a href="/xiazai/gongju/93" title="SublimeText3汉化版" class="ridsrp overflowclass">SublimeText3汉化版</a>
<a class="ridsrdown flexRow" href="/xiazai/gongju/93" title="SublimeText3汉化版">
<p>下载</p>
</a>
</div>
</div>
<div href="/xiazai/gongju/92" title="Notepad++7.3.1" class="ridsA flexRow " >
<a href="/xiazai/gongju/92" title="Notepad++7.3.1">
<img src="https://img.php.cn/upload/manual/000/000/001/58a1713812af3871.png?x-oss-process=image/resize,m_fill,h_60,w_101" alt="Notepad++7.3.1" class="ridsAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ridsaRight flexColumn">
<a href="/xiazai/gongju/92" title="Notepad++7.3.1" class="ridsrp overflowclass">Notepad++7.3.1</a>
<a class="ridsrdown flexRow" href="/xiazai/gongju/92" title="Notepad++7.3.1">
<p>下载</p>
</a>
</div>
</div>
<div href="/xiazai/gongju/1500" title="phpStudy V8.1（Win64位）（已支持php8）" class="ridsA flexRow " >
<a href="/xiazai/gongju/1500" title="phpStudy V8.1（Win64位）（已支持php8）">
<img src="https://img.php.cn/upload/manual/000/000/001/5eb23582ba149960.png?x-oss-process=image/resize,m_fill,h_60,w_101" alt="phpStudy V8.1（Win64位）（已支持php8）" class="ridsAimg"
onerror="this.src='/static/lhimages/moren/morentu.png'">
</a>
<div class="ridsaRight flexColumn">
<a href="/xiazai/gongju/1500" title="phpStudy V8.1（Win64位）（已支持php8）" class="ridsrp overflowclass">phpStudy V8.1（Win64位）（已支持php8）</a>
<a class="ridsrdown flexRow" href="/xiazai/gongju/1500" title="phpStudy V8.1（Win64位）（已支持php8）">
<p>下载</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--底部-->
<div class="phpFoot">
<div class="phpFootIn">
<div class="phpFootCont">
<div class="phpFootLeft">
<dl>
<dt>
<a href="/about/us.html" rel="nofollow" target="_blank" title="关于我们" class="cBlack">关于我们</a>
<a href="/about/disclaimer.html" rel="nofollow" target="_blank" title="免责申明" class="cBlack">免责申明</a>
<a href="/about/jbzx.html" rel="nofollow" target="_blank" title="举报中心" class="cBlack">举报中心</a>
<a href="javascript:;" rel="nofollow" onclick="advice_data(99999999,'意见反馈')" title="意见反馈" class="cBlack">意见反馈</a>
<a href="https://www.php.cn/teacher.html" rel="nofollow" target="_blank" title="讲师合作" class="cBlack">讲师合作</a>
<a href="https://www.php.cn/blog/detail/20304.html" rel="nofollow" target="_blank" title="广告合作" class="cBlack">广告合作</a>
<!--<a href="javascript:;" target="_blank" title="其他合作" class="cBlack">其他合作</a>-->
<a href="/new/" target="_blank" title="最新文章列表" class="cBlack">最新更新</a>
<a href="https://global.php.cn/" target="_blank" title="English" class="cBlack">English</a>
<div class="clear"></div>
</dt>
<dd class="cont1">php中文网：公益在线php培训，帮助PHP学习者快速成长！</dd>
<dd class="cont2">
<span class="ylwTopBox">
<a href="javascript:;" class="cBlack"><b class="icon1"></b>关注服务号</a>
<em style="display:none;" class="ylwTopSub">
<p>微信扫码<br/>关注PHP中文网服务号</p>
<img src="/static/images/examples/text16.png"/>
</em>
</span>
<span class="ylwTopBox">
<a href="tencent://message/?uin=27220243&Site=www.php.cn&Menu=yes" target="_blank" class="cBlack"><b class="icon2"></b>技术交流群</a>
<em style="display:none;" class="ylwTopSub">
<p>QQ扫码<br/>加入技术交流群</p>
<img src="/static/images/examples/text18.png"/>
</em>
</span>
<div class="clear"></div>
</dd>
</dl>
</div>
<div class="phpFootRight">
<div class="phpFootMsg">
<span><img src="/static/images/examples/text17.png"/></span>
<dl>
<dt>PHP中文网订阅号</dt>
<dd>每天精选资源文章推送</dd>
</dl>
</div>
<div class="phpFootMsg">
<span><img src="/static/images/examples/text14.png"/></span>
<dl>
<dt>PHP中文网APP</dt>
<dd>随时随地碎片化学习</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="phpFootCode">
<div class="phpFootCodeIn"><p>Copyright 2014-2025 <a href="https://www.php.cn/" target="_blank">https://www.php.cn/</a> All Rights Reserved | php.cn | <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">湘ICP备2023035733号</a></p><a href="http://www.beian.gov.cn/portal/index.do" rel="nofollow" target="_blank"><b></b></a></div>
</div>
</div>
<input type="hidden" id="verifycode" value="/captcha.html">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?c0e685c8743351838d2a7db1c49abd56";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>layui.use(['element', 'carousel'], function () {var element = layui.element;$ = layui.jquery;var carousel = layui.carousel;carousel.render({elem: '#test1', width: '100%', height: '330px', arrow: 'always'});$.getScript('/static/js/jquery.lazyload.min.js', function () {$("img").lazyload({placeholder: "/static/images/load.jpg", effect: "fadeIn", threshold: 200, skip_invisible: false});});});</script>
<span class="layui-hide"><script type="text/javascript" src="https://s4.cnzz.com/z_stat.php?id=1280886301&web_id=1280886301"></script></span>
<!--底部 end-->
<script type="text/javascript" src="/static/js/global.min.js?5.5.53"></script>
<script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js"></script>
<script src="/static/js/CodeRunOnline.js?3.1"></script>
<script>var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?aaf8dba0861f46190106021371583c62";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script>
</body>
<script>
function copyCurrentUrl() {
const url = window.location.href;
const input = document.createElement('input');
input.value = url;
document.body.appendChild(input);
input.select();
document.execCommand('copy');
document.body.removeChild(input);
alert('✅ 已复制当前链接：' + url);
}
</script>
</html>
