dom属性指什么意思(DOM和SUB是什么属性)

推荐2年前发布 AI工具箱
42 00

DOM 还使用术语元素(Element)它与节点非常相似。那么,DOM节点和元素之间有什么区别呢?

dom属性指什么意思(DOM和SUB是什么属性)

1. DOM节点

理解节点和元素之间区别的关键是理解节点是什么。

更高的角度来看,DOM文档由节点层次结构组成。每个节点可以具有父级和/或子级。

看看下面的HTML文档:

My Page

My Page

Thank you for visiting my web page!

该文档包含以下节点层次结构:

dom属性指什么意思(DOM和SUB是什么属性)

是文档树中的一个节点。它有2个子节点:和。

子有3个子节点的节点:注释节点 ,标题

,段落

。节点的父节点是节点。

HTML文档中的标记代表一个节点,有趣的是普通文本也是一个节点。段落节点

有1个子节点:文本节点“Thank you for visiting my web page!”。

1.2节点类型

我们要如何区分这些不同类型的节点?答案在于DOM Node接口,尤其是Node.nodeType属性

Node.nodeType可以具有代表节点类型的以下值之一:

  • Node.ELEMENT_NODE
  • Node.ATTRIBUTE_NODE
  • Node.TEXT_NODE
  • Node.CDATA_SECTION_NODE
  • Node.PROCESSING_INSTRUCTION_NODE
  • Node.COMMENT_NODE
  • Node.DOCUMENT_NODE
  • Node.DOCUMENT_TYPE_NODE
  • Node.DOCUMENT_FRAGMENT_NODE
  • Node.NOTATION_NODE

常量有意义地指示节点类型:例如Node.ELEMENT_NODE代表元素节点,Node.TEXT_NODE代表文本节点,Node.DOCUMENT_NODE文档节点,依此类推。

例如,让我们选择段落节点,然后查看其nodeType属性:

const paragraph = document.querySelector(\'p\');

paragraph.nodeType === Node.ELEMENT_NODE; // => true

代表整个节点文档树的节点类型为Node.DOCUMENT_NODE:

document.nodeType === Node.DOCUMENT_NODE; // => true

2. DOM元素

掌握了DOM节点的知识之后,现在该区分DOM节点和元素了。

如果你了解节点术语,那么答案是显而易见的:元素是特定类型的节点 element (Node.ELEMENT_NODE),以及文档、注释、文本等类型。

简而言之,元素是使用HTML文档中的标记编写的节点。,,,,</p><h2>,</p><p>都是元素,因为它们由标签表示。</p><p>文档类型,注释,文本节点不是元素,因为它们没有使用标签编写:</p><p>Node是节点的构造函数,HTMLElement 是 JS DOM 中元素的构造函数。段落既是节点又是元素,它同时是Node和HTMLElement的实例</p><p><code>const paragraph = document.querySelector(\'p\');</code></p><p>paragraph instanceof Node;        // => trueparagraph instanceof HTMLElement; // => true</p><p>简单地说,元素是节点的子类型,就像猫是动物的子类型一样。</p><p><strong>3. DOM属性:节点和元素</strong></p><p>除了区分节点和元素之外,还需要区分只包含节点或只包含元素的DOM属性。</p><p>节点类型的以下属性评估为一个节点或节点集合(NodeList):</p><p><code>node.parentNode; // Node or null</code></p><p>node.firstChild; // Node or nullnode.lastChild;  // Node or null</p><p>node.childNodes; // NodeList</p><p>但是,以下属性是元素或元素集合(HTMLCollection):</p><p><code>node.parentElement; // HTMLElement or null</code></p><p>node.children;      // HTMLCollection</p><p>由于node.childNodes和node.children都返回子级列表,因此为什么要同时具有这两个属性?好问题!</p><p>考虑以下包含某些文本的段落元素:</p><p><code></p><p><b>Thank you</b> for visiting my web page!</p><p></code></p><p>打开演示,然后查看parapgraph节点的childNodes和children属性:</p><p><code>const paragraph = document.querySelector(\'p\');</code></p><p>paragraph.childNodes; // NodeList:       [HTMLElement, Text]paragraph.children;   // HTMLCollection: [HTMLElement]</p><p>paragraph.childNodes集合包含2个节点:<b>Thank you</b>,,以及for visiting my web page!文本节点!</p><p>但是,paragraph.children集合仅包含1个项目:<b>Thank you</b>。</p><p>由于paragraph.children仅包含元素,因此此处未包含文本节点,因为其类型是文本(Node.TEXT_NODE),而不是元素(Node.ELEMENT_NODE)。</p><p>同时拥有node.childNodes和node.children,我们可以选择要访问的子级集合:所有子级节点或仅子级是元素。</p><p><strong>4.总结</strong></p><p>DOM文档是节点的分层集合,每个节点可以具有父级和/或子级。如果了解节点是什么,那么了解DOM节点和元素之间的区别就很容易。</p><p>节点有类型,元素类型就是其中之一,元素由HTML文档中的标记表示。</p><p>完~ 我是小智,我要去刷碗了,我们下期再见!</p></div><div class="post-tags my-3"><i class="iconfont icon-tags mr-2"></i><a href="https://www.aiodt.com/article" class="vc-l-yellow btn btn-sm text-height-xs m-1 rounded-pill text-xs" rel="tag" title="查看更多"><i class="iconfont icon-folder mr-1"></i>推荐</a><a href="https://www.aiodt.com/tag/%e5%85%83%e7%b4%a0" class="vc-l-green btn btn-sm text-height-xs m-1 rounded-pill text-xs" rel="tag" title="查看更多"># 元素</a><a href="https://www.aiodt.com/tag/%e5%b1%9e%e6%80%a7" class="vc-l-blue btn btn-sm text-height-xs m-1 rounded-pill text-xs" rel="tag" title="查看更多"># 属性</a><a href="https://www.aiodt.com/tag/%e6%96%87%e6%a1%a3" class="vc-l-theme btn btn-sm text-height-xs m-1 rounded-pill text-xs" rel="tag" title="查看更多"># 文档</a><a href="https://www.aiodt.com/tag/%e7%b1%bb%e5%9e%8b" class="vc-l-green btn btn-sm text-height-xs m-1 rounded-pill text-xs" rel="tag" title="查看更多"># 类型</a><a href="https://www.aiodt.com/tag/%e8%8a%82%e7%82%b9" class="vc-l-yellow btn btn-sm text-height-xs m-1 rounded-pill text-xs" rel="tag" title="查看更多"># 节点</a></div><div class="text-xs text-muted"><div><span>©</span> 版权声明</div><div class="posts-copyright">本页内容中文字和图片均整理自互联网,不代表本站立场,版权归原作者所有,如有侵权,请联系admin#aiodt.com删除。</div></div></div></div><div class="near-navigation mt-4 py-2"><div class="nav previous border-right border-color"><a class="near-permalink" href="https://www.aiodt.com/article/14400.html"><span class="text-muted">上一篇</span><h4 class="near-title">分享7种微博引流到微信的方法(微博引流到微信该怎么做)</h4></a></div><div class="nav next border-left border-color"><a class="near-permalink" href="https://www.aiodt.com/article/14402.html"><span class="text-muted">下一篇</span><h4 class="near-title">此致敬礼需要标点吗(此致敬礼的格式位置)</h4></a></div></div><h4 class="text-gray text-lg my-4"><i class="site-tag iconfont icon-book icon-lg mr-1" ></i>相关文章</h4><div class="posts-row"><article class="posts-item post-item d-flex style-post-card post-15973 col-2a col-md-4a"><div class="item-header"><div class="item-media"><a class="item-image" href="https://www.aiodt.com/article/15973.html" target="_blank"><img class="fill-cover unfancybox" src="http://p3.itc.cn/q_70/images03/20221123/08418d9994bf424f98cb1227add7bd9f.jpeg" height="auto" width="auto" alt="2022年第40届英国金摇杆全部奖项获奖游戏名单公布"></a></div></div><div class="item-body d-flex flex-column flex-fill"><h3 class="item-title line2"><a href="https://www.aiodt.com/article/15973.html" title="2022年第40届英国金摇杆全部奖项获奖游戏名单公布"target="_blank">2022年第40届英国金摇杆全部奖项获奖游戏名单公布</a></h3><div class="mt-auto"><div class="item-tags overflow-x-auto no-scrollbar"><a href="https://www.aiodt.com/article" class="badge vc-l-theme text-ss mr-1" rel="tag" title="查看更多文章"><i class="iconfont icon-folder mr-1"></i>推荐</a><a href="https://www.aiodt.com/tag/%e5%b9%b4%e5%ba%a6" class="badge text-ss mr-1" rel="tag" title="查看更多文章"># 年度</a><a href="https://www.aiodt.com/tag/%e6%91%87%e6%9d%86" class="badge text-ss mr-1" rel="tag" title="查看更多文章"># 摇杆</a><a href="https://www.aiodt.com/tag/%e6%b8%b8%e6%88%8f" class="badge text-ss mr-1" rel="tag" title="查看更多文章"># 游戏</a></div><div class="item-meta d-flex align-items-center flex-fill text-muted text-xs"><div class="meta-left"><span title="2022-11-25 12:14:34" class="meta-time"><i class="iconfont icon-time-o"></i>2年前</span></div><div class="ml-auto meta-right"><span class="meta-view"><i class="iconfont icon-chakan-line"></i>66</span><span class="meta-like d-none d-md-inline-block"><i class="iconfont icon-like-line"></i>0</span></div></div></div></div></article><article class="posts-item post-item d-flex style-post-card post-12310 col-2a col-md-4a"><div class="item-header"><div class="item-media"><a class="item-image" href="https://www.aiodt.com/article/12310.html" target="_blank"><img class="fill-cover unfancybox" src="//cdn.iowen.cn/gh/owen0o0/ioStaticResources@master/screenshots/4.jpg" height="auto" width="auto" alt="国家级称号,湖北一地上榜!"></a></div></div><div class="item-body d-flex flex-column flex-fill"><h3 class="item-title line2"><a href="https://www.aiodt.com/article/12310.html" title="国家级称号,湖北一地上榜!"target="_blank">国家级称号,湖北一地上榜!</a></h3><div class="mt-auto"><div class="item-tags overflow-x-auto no-scrollbar"><a href="https://www.aiodt.com/article" class="badge vc-l-theme text-ss mr-1" rel="tag" title="查看更多文章"><i class="iconfont icon-folder mr-1"></i>推荐</a><a href="https://www.aiodt.com/tag/%e6%99%af%e5%8c%ba" class="badge text-ss mr-1" rel="tag" title="查看更多文章"># 景区</a><a href="https://www.aiodt.com/tag/%e7%a5%9e%e5%86%9c" class="badge text-ss mr-1" rel="tag" title="查看更多文章"># 神农</a><a href="https://www.aiodt.com/tag/%e7%a5%9e%e5%86%9c%e6%9e%b6" class="badge text-ss mr-1" rel="tag" title="查看更多文章"># 神农架</a></div><div class="item-meta d-flex align-items-center flex-fill text-muted text-xs"><div class="meta-left"><span title="2022-11-11 21:18:06" class="meta-time"><i class="iconfont icon-time-o"></i>2年前</span></div><div class="ml-auto meta-right"><span class="meta-view"><i class="iconfont icon-chakan-line"></i>50</span><span class="meta-like d-none d-md-inline-block"><i class="iconfont icon-like-line"></i>0</span></div></div></div></div></article><article class="posts-item post-item d-flex style-post-card post-10925 col-2a col-md-4a"><div class="item-header"><div class="item-media"><a class="item-image" href="https://www.aiodt.com/article/10925.html" target="_blank"><img class="fill-cover unfancybox" src="//cdn.iowen.cn/gh/owen0o0/ioStaticResources@master/screenshots/1.jpg" height="auto" width="auto" alt="不想买“小电车”?盘点5万左右燃油代步车,油耗不高没旅程焦虑"></a></div></div><div class="item-body d-flex flex-column flex-fill"><h3 class="item-title line2"><a href="https://www.aiodt.com/article/10925.html" title="不想买“小电车”?盘点5万左右燃油代步车,油耗不高没旅程焦虑"target="_blank">不想买“小电车”?盘点5万左右燃油代步车,油耗不高没旅程焦虑</a></h3><div class="mt-auto"><div class="item-tags overflow-x-auto no-scrollbar"><a href="https://www.aiodt.com/article" class="badge vc-l-theme text-ss mr-1" rel="tag" title="查看更多文章"><i class="iconfont icon-folder mr-1"></i>推荐</a><a href="https://www.aiodt.com/tag/%e5%8a%a8%e5%8a%9b" class="badge text-ss mr-1" rel="tag" title="查看更多文章"># 动力</a><a href="https://www.aiodt.com/tag/%e6%96%b9%e9%9d%a2" class="badge text-ss mr-1" rel="tag" title="查看更多文章"># 方面</a><a href="https://www.aiodt.com/tag/%e6%b6%88%e8%b4%b9%e8%80%85" class="badge text-ss mr-1" rel="tag" title="查看更多文章"># 消费者</a></div><div class="item-meta d-flex align-items-center flex-fill text-muted text-xs"><div class="meta-left"><span title="2022-11-08 06:17:55" class="meta-time"><i class="iconfont icon-time-o"></i>2年前</span></div><div class="ml-auto meta-right"><span class="meta-view"><i class="iconfont icon-chakan-line"></i>56</span><span class="meta-like d-none d-md-inline-block"><i class="iconfont icon-like-line"></i>0</span></div></div></div></div></article><article class="posts-item post-item d-flex style-post-card post-21276 col-2a col-md-4a"><div class="item-header"><div class="item-media"><a class="item-image" href="https://www.aiodt.com/article/21276.html" target="_blank"><img class="fill-cover unfancybox" src="//cdn.iowen.cn/gh/owen0o0/ioStaticResources@master/screenshots/8.jpg" height="auto" width="auto" alt="军人肩章(部队军衔等级肩章)"></a></div></div><div class="item-body d-flex flex-column flex-fill"><h3 class="item-title line2"><a href="https://www.aiodt.com/article/21276.html" title="军人肩章(部队军衔等级肩章)"target="_blank">军人肩章(部队军衔等级肩章)</a></h3><div class="mt-auto"><div class="item-tags overflow-x-auto no-scrollbar"><a href="https://www.aiodt.com/article" class="badge vc-l-theme text-ss mr-1" rel="tag" title="查看更多文章"><i class="iconfont icon-folder mr-1"></i>推荐</a></div><div class="item-meta d-flex align-items-center flex-fill text-muted text-xs"><div class="meta-left"><span title="2023-03-16 12:08:35" class="meta-time"><i class="iconfont icon-time-o"></i>2年前</span></div><div class="ml-auto meta-right"><span class="meta-view"><i class="iconfont icon-chakan-line"></i>375</span><span class="meta-like d-none d-md-inline-block"><i class="iconfont icon-like-line"></i>0</span></div></div></div></div></article></div><div id="comments" class="comments"><h2 id="comments-list-title" class="comments-title text-lg mx-1 my-4"><i class="iconfont icon-comment"></i><span class="noticom"><a href="https://www.aiodt.com/article/14401.html#respond" class="comments-title" >暂无评论</a></span></h2><div class="card"><div class="card-body"><div id="respond_box"><div id="respond" class="comment-respond"><form id="commentform" class="text-sm mb-4"><div class="avatar-box d-flex align-items-center flex-fill mb-2"><div class="avatar-img"><img class="avatar rounded-circle" src="https://www.aiodt.com/wp-content/themes/onenav/assets/images/gravatar.jpg"></div></div><div class="comment-textarea mb-3"><textarea name="comment" id="comment" class="form-control" placeholder="输入评论内容..." tabindex="4" cols="50" rows="3"></textarea></div><div id="comment-author-info" class="row row-sm"><div class="col-12 col-md-6 mb-3"><input type="text" name="author" id="author" class="form-control" value="" size="22" placeholder="昵称" tabindex="2"/></div><div class="col-12 col-md-6 mb-3"><input type="text" name="email" id="email" class="form-control" value="" size="22" placeholder="邮箱" tabindex="3" /></div></div><div class="com-footer d-flex justify-content-end flex-wrap"><input type="hidden" id="_wpnonce" name="_wpnonce" value="51faa123c3" /><input type="hidden" name="_wp_http_referer" value="/article/14401.html" /><a rel="nofollow" id="cancel-comment-reply-link" style="display: none;" href="javascript:;" class="btn vc-l-gray mx-2">再想想</a><input captcha-type="slider" type="hidden" name="captcha_type" value="slider" slider-id=""><button class="btn btn-hover-dark btn-shadow vc-theme ml-2" type="submit" id="submit">发表评论</button><input type="hidden" name="action" value="ajax_comment"/><input type='hidden' name='comment_post_ID' value='14401' id='comment_post_ID' /><input type='hidden' name='comment_parent' id='comment_parent' value='0' /></div></form><div class="clear"></div></div></div><div id="loading-comments"><span></span></div><div class="col-1a-i nothing-box nothing-type-none"><div class="nothing"><img src="https://www.aiodt.com/wp-content/themes/onenav/assets/images/svg/wp_none.svg" alt="none" class="nothing-svg"><div class="nothing-msg text-sm text-muted">暂无评论...</div></div></div></div></div></div></div></div><div class="sidebar sidebar-tools d-none d-lg-block"><div id="iow_single_posts_min-8" class="card io-sidebar-widget io-widget-single-posts-list"><div class="sidebar-header "><div class="card-header widget-header"><h3 class="text-md mb-0"><i class="mr-2 fab fa-hotjar"></i>热门工具</h3></div></div><a href="" class="ajax-auto-post click" data-href="https://www.aiodt.com/wp-admin/admin-ajax.php" data-target="#iow_single_posts_min-8 .ajax-panel" data-action="load_single_posts" data-style="sites-min" data-args="{"exclude":[],"similar":0,"fallback":1,"style":"min"}" data-id="iow_single_posts_min-8" data-data_id="" title="刷新"><i class="iconfont icon-refresh"></i></a><div class="card-body ajax-panel"><div class="posts-row row-sm row-col-2a"><div class="posts-item sites-item d-flex style-sites-min post-22773 muted-bg br-md no-go-ico" ><a href="https://www.aiodt.com/site/22773.html" target="_blank" data-id="22773" data-url="https://www.copyai.cn" class="sites-body " title="快文CopyDone"><div class="item-header"><div class="item-media"><div class="blur-img-bg lazy-bg" style="background-image: url(https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://www.copyai.cn);"></div><div class="item-image"><img class="fill-cover sites-icon unfancybox" src="https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://www.copyai.cn" 1 height="auto" width="auto" onerror=null;src=ioLetterAvatar(alt,60) alt="快文CopyDone"></div></div></div><div class="item-body overflow-hidden d-flex flex-column flex-fill"><h3 class="item-title line1"><b>快文CopyDone</b></h3></div></a><div class="sites-tags"></div></div><div class="posts-item sites-item d-flex style-sites-min post-23029 muted-bg br-md no-go-ico" ><a href="https://www.aiodt.com/site/23029.html" target="_blank" data-id="23029" data-url="https://www.laomaai.com" class="sites-body " title="AI魔法工具盒"><div class="item-header"><div class="item-media"><div class="blur-img-bg lazy-bg" style="background-image: url(https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://www.laomaai.com);"></div><div class="item-image"><img class="fill-cover sites-icon unfancybox" src="https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://www.laomaai.com" 1 height="auto" width="auto" onerror=null;src=ioLetterAvatar(alt,60) alt="AI魔法工具盒"></div></div></div><div class="item-body overflow-hidden d-flex flex-column flex-fill"><h3 class="item-title line1"><b>AI魔法工具盒</b></h3></div></a><div class="sites-tags"></div></div><div class="posts-item sites-item d-flex style-sites-min post-22932 muted-bg br-md no-go-ico" ><a href="https://www.aiodt.com/site/22932.html" target="_blank" data-id="22932" data-url="https://ai.google" class="sites-body " title="Google AI"><div class="item-header"><div class="item-media"><div class="blur-img-bg lazy-bg" style="background-image: url(https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://ai.google);"></div><div class="item-image"><img class="fill-cover sites-icon unfancybox" src="https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://ai.google" 1 height="auto" width="auto" onerror=null;src=ioLetterAvatar(alt,60) alt="Google AI"></div></div></div><div class="item-body overflow-hidden d-flex flex-column flex-fill"><h3 class="item-title line1"><b>Google AI</b></h3></div></a><div class="sites-tags"></div></div><div class="posts-item sites-item d-flex style-sites-min post-22931 muted-bg br-md no-go-ico" ><a href="https://www.aiodt.com/site/22931.html" target="_blank" data-id="22931" data-url="https://chatglm.cn" class="sites-body " title="智谱清言"><div class="item-header"><div class="item-media"><div class="blur-img-bg lazy-bg" style="background-image: url(https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://chatglm.cn);"></div><div class="item-image"><img class="fill-cover sites-icon unfancybox" src="https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://chatglm.cn" 1 height="auto" width="auto" onerror=null;src=ioLetterAvatar(alt,60) alt="智谱清言"></div></div></div><div class="item-body overflow-hidden d-flex flex-column flex-fill"><h3 class="item-title line1"><b>智谱清言</b></h3></div></a><div class="sites-tags"></div></div><div class="posts-item sites-item d-flex style-sites-min post-22784 muted-bg br-md no-go-ico" ><a href="https://www.aiodt.com/site/22784.html" target="_blank" data-id="22784" data-url="https://www.wujieai.com" class="sites-body " title="无界AI"><div class="item-header"><div class="item-media"><div class="blur-img-bg lazy-bg" style="background-image: url(https://cdn.wujiebantu.com/upload/8A9FBA86DE2EA52AC1A24BDC692FF171/1712129887561/FmNieqg-bOfiZ97cu2ZtoAmJdbp7.png);"></div><div class="item-image"><img class="fill-cover sites-icon unfancybox" src="https://cdn.wujiebantu.com/upload/8A9FBA86DE2EA52AC1A24BDC692FF171/1712129887561/FmNieqg-bOfiZ97cu2ZtoAmJdbp7.png" height="auto" width="auto" alt="无界AI"></div></div></div><div class="item-body overflow-hidden d-flex flex-column flex-fill"><h3 class="item-title line1"><b>无界AI</b></h3></div></a><div class="sites-tags"></div></div><div class="posts-item sites-item d-flex style-sites-min post-23144 muted-bg br-md no-go-ico" ><a href="https://www.aiodt.com/site/23144.html" target="_blank" data-id="23144" data-url="https://www.atalk-ai.com" class="sites-body " title="海鲸AI"><div class="item-header"><div class="item-media"><div class="blur-img-bg lazy-bg" style="background-image: url(https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://www.atalk-ai.com);"></div><div class="item-image"><img class="fill-cover sites-icon unfancybox" src="https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://www.atalk-ai.com" 1 height="auto" width="auto" onerror=null;src=ioLetterAvatar(alt,60) alt="海鲸AI"></div></div></div><div class="item-body overflow-hidden d-flex flex-column flex-fill"><h3 class="item-title line1"><b>海鲸AI</b></h3></div></a><div class="sites-tags"></div></div></div></div></div><div id="iow_single_posts_min-7" class="card io-sidebar-widget io-widget-single-posts-list"><div class="sidebar-header "><div class="card-header widget-header"><h3 class="text-md mb-0"><i class="mr-2 iconfont icon-tools"></i>今日关注</h3></div></div><a href="" class="ajax-auto-post click auto" data-href="https://www.aiodt.com/wp-admin/admin-ajax.php" data-target="#iow_single_posts_min-7 .ajax-panel" data-action="load_single_posts" data-style="post-min-sm" data-args="{"exclude":[],"similar":0,"fallback":0,"style":"min-sm"}" data-id="iow_single_posts_min-7" data-data_id="" title="刷新"><i class="iconfont icon-refresh"></i></a><div class="card-body ajax-panel"><div class="posts-row row-sm row-col-1a"><div class="placeholder-posts null-post-min-sm"><div class="p-header"><span class="--image"></span></div><div class="p-meta"><span class="--title" style="--this-title-width:89%;"></span><div class="--meta"><span></span><span></span><span></span></div></div></div><div class="placeholder-posts null-post-min-sm"><div class="p-header"><span class="--image"></span></div><div class="p-meta"><span class="--title" style="--this-title-width:96%;"></span><div class="--meta"><span></span><span></span><span></span></div></div></div><div class="placeholder-posts null-post-min-sm"><div class="p-header"><span class="--image"></span></div><div class="p-meta"><span class="--title" style="--this-title-width:58%;"></span><div class="--meta"><span></span><span></span><span></span></div></div></div><div class="placeholder-posts null-post-min-sm"><div class="p-header"><span class="--image"></span></div><div class="p-meta"><span class="--title" style="--this-title-width:74%;"></span><div class="--meta"><span></span><span></span><span></span></div></div></div><div class="placeholder-posts null-post-min-sm"><div class="p-header"><span class="--image"></span></div><div class="p-meta"><span class="--title" style="--this-title-width:93%;"></span><div class="--meta"><span></span><span></span><span></span></div></div></div><div class="placeholder-posts null-post-min-sm"><div class="p-header"><span class="--image"></span></div><div class="p-meta"><span class="--title" style="--this-title-width:50%;"></span><div class="--meta"><span></span><span></span><span></span></div></div></div></div></div></div><div id="iow_code_embed-4" class="card io-sidebar-widget io-widget-code-embed"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7656930379472324" crossorigin="anonymous"></script><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7656930379472324" data-ad-slot="8093490049" data-ad-format="auto" data-full-width-responsive="true"></ins><script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div><div id="iow_ranking_post_min-6" class="fx-header-bg card io-sidebar-widget io-widget-ranking-list ajax-parent"><div class="sidebar-header "><div class="card-header widget-header"><h3 class="text-md mb-0">AI工具排行榜</h3></div></div><div class="range-nav text-md"><a href="javascript:;" class="is-tab-btn ajax-click-post active loaded" data-target=".ajax-panel" data-action="get_w_rankings_posts" data-args="{"post_type":"sites","range":"today","count":"6","window":"1","only_title":"","serial":"1","show_thumbs":"1","go":"","nofollow":""}" data-style="sites-default">日榜</a><a href="javascript:;" class="is-tab-btn ajax-click-post" data-target=".ajax-panel" data-action="get_w_rankings_posts" data-args="{"post_type":"sites","range":"week","count":"6","window":"1","only_title":"","serial":"1","show_thumbs":"1","go":"","nofollow":""}" data-style="sites-default">周榜</a><a href="javascript:;" class="is-tab-btn ajax-click-post" data-target=".ajax-panel" data-action="get_w_rankings_posts" data-args="{"post_type":"sites","range":"month","count":"6","window":"1","only_title":"","serial":"1","show_thumbs":"1","go":"","nofollow":""}" data-style="sites-default">月榜</a></div><div class="card-body"><div class="posts-row row-sm ajax-panel row-col-1a"><div class="posts-item sites-item d-flex style-sites-default post-22777 muted-bg br-md no-go-ico" ><a href="https://www.aiodt.com/site/22777.html" target="_blank" data-id="22777" data-url="https://effidit.qq.com" class="sites-body " title="腾讯Effidit"><div class="item-header"><div class="item-media"><div class="blur-img-bg lazy-bg" style="background-image: url(https://effidit.qq.com/favicon.png);"></div><div class="item-image"><img class="fill-cover sites-icon unfancybox" src="https://effidit.qq.com/favicon.png" height="auto" width="auto" alt="腾讯Effidit"></div></div></div><div class="item-body overflow-hidden d-flex flex-column flex-fill"><h3 class="item-title line1"><b>腾讯Effidit</b></h3><div class="line1 text-muted text-xs">腾讯旗下智能创作助手。</div></div></a><div class="sites-tags"></div></div><div class="posts-item sites-item d-flex style-sites-default post-22894 muted-bg br-md no-go-ico" ><a href="https://www.aiodt.com/site/22894.html" target="_blank" data-id="22894" data-url="https://ppt.sankki.com" class="sites-body " title="闪击PPT"><div class="item-header"><div class="item-media"><div class="blur-img-bg lazy-bg" style="background-image: url(https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://ppt.sankki.com);"></div><div class="item-image"><img class="fill-cover sites-icon unfancybox" src="https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://ppt.sankki.com" 1 height="auto" width="auto" onerror=null;src=ioLetterAvatar(alt,60) alt="闪击PPT"></div></div></div><div class="item-body overflow-hidden d-flex flex-column flex-fill"><h3 class="item-title line1"><b>闪击PPT</b></h3><div class="line1 text-muted text-xs">在线制快速PPT编辑。</div></div></a><div class="sites-tags"></div></div><div class="posts-item sites-item d-flex style-sites-default post-23216 muted-bg br-md no-go-ico" ><a href="https://www.aiodt.com/site/23216.html" target="_blank" data-id="23216" data-url="https://yige.baidu.com" class="sites-body " title="文心一格"><div class="item-header"><div class="item-media"><div class="blur-img-bg lazy-bg" style="background-image: url(https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://yige.baidu.com);"></div><div class="item-image"><img class="fill-cover sites-icon unfancybox" src="https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://yige.baidu.com" 1 height="auto" width="auto" onerror=null;src=ioLetterAvatar(alt,60) alt="文心一格"></div></div></div><div class="item-body overflow-hidden d-flex flex-column flex-fill"><h3 class="item-title line1"><b>文心一格</b></h3><div class="line1 text-muted text-xs">百度旗下AI艺术和创意辅助平台。</div></div></a><div class="sites-tags"></div></div><div class="posts-item sites-item d-flex style-sites-default post-30149 muted-bg br-md no-go-ico" ><a href="https://www.aiodt.com/site/30149.html" target="_blank" data-id="30149" data-url="https://bgmcat.com" class="sites-body " title="BGM猫"><div class="item-header"><div class="item-media"><div class="blur-img-bg lazy-bg" style="background-image: url(https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://bgmcat.com);"></div><div class="item-image"><img class="fill-cover sites-icon unfancybox" src="https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://bgmcat.com" 1 height="auto" width="auto" onerror=null;src=ioLetterAvatar(alt,60) alt="BGM猫"></div></div></div><div class="item-body overflow-hidden d-flex flex-column flex-fill"><h3 class="item-title line1"><span class="badge badge-title vc-j-purple mr-1" data-toggle="tooltip" title="最近新增">新</span><b>BGM猫</b></h3><div class="line1 text-muted text-xs">BGM猫提供版权背景音乐一站式服务。</div></div></a><div class="sites-tags"></div></div><div class="posts-item sites-item d-flex style-sites-default post-30150 muted-bg br-md no-go-ico" ><a href="https://www.aiodt.com/site/30150.html" target="_blank" data-id="30150" data-url="https://www.trae.com.cn" class="sites-body " title="Trae"><div class="item-header"><div class="item-media"><div class="blur-img-bg lazy-bg" style="background-image: url(https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://www.trae.com.cn);"></div><div class="item-image"><img class="fill-cover sites-icon unfancybox" src="https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://www.trae.com.cn" 1 height="auto" width="auto" onerror=null;src=ioLetterAvatar(alt,60) alt="Trae"></div></div></div><div class="item-body overflow-hidden d-flex flex-column flex-fill"><h3 class="item-title line1"><span class="badge badge-title vc-j-purple mr-1" data-toggle="tooltip" title="最近新增">新</span><b>Trae</b></h3><div class="line1 text-muted text-xs">国内首款 AI 原生 IDE。</div></div></a><div class="sites-tags"></div></div><div class="posts-item sites-item d-flex style-sites-default post-22768 muted-bg br-md no-go-ico" ><a href="https://www.aiodt.com/site/22768.html" target="_blank" data-id="22768" data-url="https://www.xiezuocat.com" class="sites-body " title="秘塔写作猫"><div class="item-header"><div class="item-media"><div class="blur-img-bg lazy-bg" style="background-image: url(https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://www.xiezuocat.com);"></div><div class="item-image"><img class="fill-cover sites-icon unfancybox" src="https://t2.gstatic.cn/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=https://www.xiezuocat.com" 1 height="auto" width="auto" onerror=null;src=ioLetterAvatar(alt,60) alt="秘塔写作猫"></div></div></div><div class="item-body overflow-hidden d-flex flex-column flex-fill"><h3 class="item-title line1"><b>秘塔写作猫</b></h3><div class="line1 text-muted text-xs">新一代交互式中英文写作辅助平台。</div></div></a><div class="sites-tags"></div></div></div></div><a href="https://www.aiodt.com/ai-tool-ranking?type=sites" class="btn vc-l-yellow d-block mx-3 mb-3 text-sm" target="_blank">查看完整榜单</a></div></div></div></main><div class="apd my-3 container"><div class="apd-body"><script id="w2898_18834">(function(){var zy=document.createElement("script");var flowExchange=window.location.protocol.split(":")[0];var http=flowExchange==="https"?"https":"http";zy.src=http+"://exchange.2898.com/index/flowexchange/getGoods?id=18834&sign=92c40656828ac46e57e5cc1862a41048";var s=document.getElementsByTagName("script");for(var i=0;i<s.length;i++){if(s[i].id){if(s[i].id=="w2898_18834"){s[i].parentNode.insertBefore(zy,s[i]);continue;}}}})();</script></div></div><footer class="main-footer footer-stick"><div class="switch-container container-footer container"><div class="footer-copyright text-xs my-4">Copyright © 2025 <a href="https://www.aiodt.com" title="AI工具箱" class="" rel="home">AI工具箱</a> <a href="https://beian.miit.gov.cn/" target="_blank" class="" rel="link noopener">沪ICP备15021140号-3</a> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js?id=Jn0Oc3Fsw3d4mD8k&ck=Jn0Oc3Fsw3d4mD8k"></script><script>var _hmt=_hmt||[];(function(){var hm=document.createElement("script");hm.src="https://hm.baidu.com/hm.js?fc3593e019730afe142d67ab03f75d46";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();</script></div></div></footer><div id="footer-tools" class="tools-right io-footer-tools d-flex flex-column"><a href="javascript:" class="btn-tools go-to-up go-up my-1" rel="go-up" style="display: none"><i class="iconfont icon-to-up"></i></a><a href="javascript:" class="btn-tools switch-dark-mode my-1" data-toggle="tooltip" data-placement="left" title="夜间模式"><i class="mode-ico iconfont icon-light"></i></a></div><div class="search-modal" id="search-modal"><div class="search-body mx-0 mx-md-3"><form role="search" method="get" class="search-form search-card" action="https://www.aiodt.com/"><div class="search-box"><div class="dropdown" select-dropdown><a href="javascript:" role="button" class="btn" data-toggle="dropdown" aria-expanded="false"><span class="select-item">网址</span><i class="iconfont i-arrow icon-arrow-b ml-2"></i></a><input type="hidden" name="post_type" value="sites"><div class="dropdown-menu"><a class="dropdown-item" href="javascript:" data-value="sites">网址</a><a class="dropdown-item" href="javascript:" data-value="post">文章</a></div></div><input type="search" class="form-control" required="required" placeholder="你想了解些什么" value="" name="s" /><button type="submit" class="btn vc-theme search-submit"><i class="iconfont icon-search"></i></button></div></form><div class="search-body-box d-flex flex-column flex-md-row"></div></div></div><script type="text/javascript">window.IO={"ajaxurl":"https:\/\/www.aiodt.com\/wp-admin\/admin-ajax.php","uri":"https:\/\/www.aiodt.com\/wp-content\/themes\/onenav","homeUrl":"https:\/\/www.aiodt.com","minAssets":".min","uid":"","homeWidth":"1260","loginurl":"https:\/\/www.aiodt.com\/login\/?redirect_to=https:\/\/www.aiodt.com\/article\/14401.html","sitesName":"AI工具箱","addico":"https:\/\/www.aiodt.com\/wp-content\/themes\/onenav\/assets\/images\/add.png","order":"desc","formpostion":"top","defaultclass":"io-grey-mode","isCustomize":false,"faviconApi":"https:\/\/t2.gstatic.cn\/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&size=128&url=%url%","customizemax":10,"newWindow":"1","lazyload":"0","minNav":"0","loading":"1","hotWords":"google","classColumns":" col-2a col-sm-2a col-md-3a col-lg-3a col-xl-4a col-xxl-5a ","apikey":"TURBeU1ESXhOVGMzTWpreU5UUT11OHNSU05UZzJNRTg1TnpoeWRtOVNRbGx3ZWxJM2FFMXNTMUJVWVU1V1kydHdTV3BW","isHome":false,"themeType":"auto-system","mceCss":"https:\/\/www.aiodt.com\/wp-content\/themes\/onenav\/assets\/css\/editor-style.css","version":"5.23","localize":{"liked":"您已经赞过了!","like":"谢谢点赞!","networkError":"网络错误 --.","parameterError":"参数错误 --.","selectCategory":"为什么不选分类。","addSuccess":"添加成功。","timeout":"访问超时,请再试试,或者手动填写。","lightMode":"日间模式","nightMode":"夜间模式","editBtn":"编辑","okBtn":"确定","urlExist":"该网址已经存在了 --.","cancelBtn":"取消","successAlert":"成功","infoAlert":"信息","warningAlert":"警告","errorAlert":"错误","extractionCode":"网盘提取码已复制,点“确定”进入下载页面。","wait":"请稍候","loading":"正在处理请稍后...","userAgreement":"请先阅读并同意用户协议","reSend":"秒后重新发送","weChatPay":"微信支付","alipay":"支付宝","scanQRPay":"请扫码支付","payGoto":"支付成功,页面跳转中","clearFootprint":"确定要清空足迹记录吗?"},"postData":{"postId":14401,"postType":"post"}};</script><script type="text/javascript" src="https://www.aiodt.com/wp-content/themes/onenav/assets/js/jquery.min.js" id="jquery-js"></script><script type="text/javascript" src="https://www.aiodt.com/wp-content/themes/onenav/assets/js/bootstrap.bundle.min.js" id="bootstrap-js-js"></script><script type="text/javascript" id="require-js-extra">var slidercaptcha={"loading":"\u52a0\u8f7d\u4e2d...","retry":"\u518d\u8bd5\u4e00\u6b21","slider":"\u5411\u53f3\u6ed1\u52a8\u586b\u5145\u62fc\u56fe","failed":"\u52a0\u8f7d\u5931\u8d25"};</script><script type="text/javascript" src="https://www.aiodt.com/wp-content/cache/autoptimize/js/autoptimize_single_5c731f7da68c59a69f6dfc6e1fd83072.js" id="require-js"></script></body></html>