DOM对象的概念是什么

魁首哥

作者

DOM对象的概念是什么

今天小编给大家分享一下DOM对象的概念是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　一、DOM对象

　　DOM，全称“DocumentObjectModel（文档对象模型）”，它是由W3C组织定义的一个标准。

　　在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。

　　说白了，DOM就是一个接口，我们可以通过DOM来操作页面中各种元素，例如添加元素、删除元素、替换元素等。这下大家就懂了吧。记住，DOM就是文档对象模型，文档对象模型就是DOM，很多人在学习DOM的时候看到“文档对象模型”还不知道是什么？

　　二、DOM结构

　　DOM采用树形结构作为分层结构，以树节点形式表示页面中各种元素或内容。

　　举例：

<title></p><p>　　<body></p><p>　　<h2>php中文网</h2></p><p>　　<p>php中文网成立.....</p></p><p>　　</body></p><p>　　</html></p><p>　　在DOM中，每一个元素看成一个节点，而每一个节点就是一个“对象”。也就是我们在操作元素时，把每一个元素节点看成一个对象，然后使用这个对象的属性和方法进行相关操作。（这句话对理解DOM操作太重要了）。</p><p>　　下面我们介绍几个关于节点的概念。</p><p>　　1、根节点</p><p>　　在HTML文档中，html就是根节点。</p><p>　　2、父节点</p><p>　　一个节点之上的节点就是该节点的父节点，例如h2的父节点就是body，body的父节点就是html。</p><p>　　3、子节点</p><p>　　一个节点之下的节点就是该节点的子节点，例如h2就是body的子节点。</p><p>　　4、兄弟节点</p><p>　　如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。</p><p>　　例如h2和p就是兄弟节点，因为他们拥有相同的父节点body。<br><br><br><br></p><p>以上就是“DOM对象的概念是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注恰卡编程网行业资讯频道。</p> </div> </div> <div class="view-allcontent-box"> <a href="javascript:void(0);" onclick="viewmore()"> <div class="view-allcontent" >阅读全文</div> </a> </div> <span class="zhi-con-wz-date">发布于 2022-03-17 21:16:47 </span> <div class="zhi-con-tag"><a href="https://mip.qiaqa.com/tags/dom.html">dom</a></div> <div class="zhi-con-action"> <div class="zhi-con-action-item"> <div class="icon-button fenBtn"><i class="ri-share-circle-line"></i> 分享 <div class="fenxme"><span class="menu-arrow"></span> <ul> <li><a href="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https://mip.qiaqa.com/idea/63614.html&title=DOM%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%A6%82%E5%BF%B5%E6%98%AF%E4%BB%80%E4%B9%88&desc=DOM%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%A6%82%E5%BF%B5%E6%98%AF%E4%BB%80%E4%B9%88%E4%BB%8A%E5%A4%A9%E5%B0%8F%E7%BC%96%E7%BB%99%E5%A4%A7%E5%AE%B6%E5%88%86%E4%BA%AB%E4%B8%80%E4%B8%8BDOM%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%A6%82%E5%BF%B5%E6%98%AF%E4%BB%80%E4%B9%88%E7%9A%84%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9%EF%BC%8C%E5%86%85%E5%AE%B9%E8%AF%A6%E7%BB%86%EF%BC%8C%E9%80%BB%E8%BE%91%E6%B8%85%E6%99%B0%EF%BC%8C%E7%9B%B8%E4%BF%A1%E5%A4%A7%E9%83%A8%E5%88%86%E4%BA%BA%E9%83%BD%E8%BF%98%E5%A4%AA%E4%BA%86%E8%A7%A3%E8%BF%99%E6%96%B9...&summary=DOM%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%A6%82%E5%BF%B5%E6%98%AF%E4%BB%80%E4%B9%88%E4%BB%8A%E5%A4%A9%E5%B0%8F%E7%BC%96%E7%BB%99%E5%A4%A7%E5%AE%B6%E5%88%86%E4%BA%AB%E4%B8%80%E4%B8%8BDOM%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%A6%82%E5%BF%B5%E6%98%AF%E4%BB%80%E4%B9%88%E7%9A%84%E7%9B%B8%E5%85%B3%E7%9F%A5%E8%AF%86%E7%82%B9%EF%BC%8C%E5%86%85%E5%AE%B9%E8%AF%A6%E7%BB%86%EF%BC%8C%E9%80%BB%E8%BE%91%E6%B8%85%E6%99%B0%EF%BC%8C%E7%9B%B8%E4%BF%A1%E5%A4%A7%E9%83%A8%E5%88%86%E4%BA%BA%E9%83%BD%E8%BF%98%E5%A4%AA%E4%BA%86%E8%A7%A3%E8%BF%99%E6%96%B9..." target="_blank" title="分享空间"><i class="ri-qq-fill"></i> 分享空间</a></li> <li><a class="weibo-share" href="https://service.weibo.com/share/share.php?url=https://mip.qiaqa.com/idea/63614.html&title=DOM%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%A6%82%E5%BF%B5%E6%98%AF%E4%BB%80%E4%B9%88&pic=&appkey=&searchPic=true" target="_blank" title="分享微博"><i class="ri-weibo-fill"></i> 分享微博</a></li> <li><span class="ewm"><img src="https://mip.qiaqa.com/zb_users/theme/ZhiMedia/function/api.php?act=poster&url=https://mip.qiaqa.com/idea/63614.html" alt="https://mip.qiaqa.com/idea/63614.html" /></span><span>手机扫一扫</span></li> </ul> </div> </div> <div class="action-hai"><span class="haibao" id="63614"><i class="ri-camera-lens-line"></i> 海报</span></div> <div class="action-eyes"><i class="ri-eye-line"></i> 41</div> </div> </div> <section class="zhi-prevnext"> <a href="https://mip.qiaqa.com/idea/63613.html" title="上一篇：如何使用JavaScript对象元素">上一篇：如何使用JavaScript对象元素</a> <a href="https://mip.qiaqa.com/idea/63615.html" title="下一篇：ggplot2图形属性有哪些">下一篇：ggplot2图形属性有哪些</a> </section> </div> </div> </div> <div id="catalogBox"><div class="catalogBox_title">目录</div><ul id="catalogul"></ul></div> <div class="zhi-con-xg"> <h3>推荐阅读</h3> <div class="slide-items"> <a href="javascript:;" class="slide-btn prev-r"><i class="ri-arrow-right-s-line"></i></a> <a href="javascript:;" class="slide-btn prev-l"><i class="ri-arrow-left-s-line"></i></a> <div class="swiper-container slide-item"> <ul class="swiper-wrapper slide-item-body"> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/php/148937.html"> <div class="new-img"> <img src="https://oss.qiaqa.com/article/2022/10/11/9782.jpg" alt="PHP学习第十五天——JavaScript入门DOM对象：二"> </div> <div class="new-body"> <p class="new-body-title">PHP学习第十五天——JavaScript入门DOM对象：二</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/php/146668.html"> <div class="new-img"> <img src="https://oss.qiaqa.com/article/2022/10/11/4331.jpg" alt="PHP写站点地图sitemap代码分享及robots的SEO"> </div> <div class="new-body"> <p class="new-body-title">PHP写站点地图sitemap代码分享及robots的SEO</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/68537.html"> <div class="new-body"> <p class="new-body-title">JavaScript中DOM与BOM的区别与用法是什么</p> <p class="new-body-text">JavaScript中DOM与BOM的区别与用法是什么本文小编为大...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/64030.html"> <div class="new-body"> <p class="new-body-title">jQuery如何创建DOM元素</p> <p class="new-body-text">jQuery如何创建DOM元素本篇内容介绍了“jQuery如何创建...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/63946.html"> <div class="new-body"> <p class="new-body-title">jQuery怎么实现当DOM加载完成时执行函数</p> <p class="new-body-text">jQuery怎么实现当DOM加载完成时执行函数这篇文章主要介绍“j...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/62637.html"> <div class="new-body"> <p class="new-body-title">如何使用JavaScript DOM制作简单留言板</p> <p class="new-body-text">如何使用JavaScriptDOM制作简单留言板这篇文章主要介绍...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/62627.html"> <div class="new-body"> <p class="new-body-title">如何将dom对象转换成jquery对象</p> <p class="new-body-text">如何将dom对象转换成jquery对象这篇文章主要介绍“如何将do...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/59155.html"> <div class="new-body"> <p class="new-body-title">HTML的DOM事件相关知识有哪些</p> <p class="new-body-text">HTML的DOM事件相关知识有哪些这篇文章主要介绍“HTML的DO...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/idea/59117.html"> <div class="new-body"> <p class="new-body-title">jquery的DOM与事件实例分析</p> <p class="new-body-text">jquery的DOM与事件实例分析本文小编为大家详细介绍“jque...</p> </div> </a> </li> <li class="swiper-slide"> <a href="https://mip.qiaqa.com/jingyan/41685.html"> <div class="new-body"> <p class="new-body-title">如何使用postMessage利用Facebook中基于DOM的XSS漏洞</p> <p class="new-body-text">如何使用postMessage利用Facebook中基于DOM的XSS漏洞...</p> </div> </a> </li> </ul> </div> </div> </div> </div> </div> </div> <div class="zhi-user-modal"> <div class="zhi-user-modal-container"> <ul class="zhi-switcher"> <li><a href="javascript:void(0);">用户登录</a></li> <li><a href="javascript:void(0);">注册新用户</a></li> </ul> <div id="zhi-login"> <form method="post" action="#" class="zhi-form"> <p class="fieldset"> <label class="image-replace zhi-username" for="edtUserName">用户名</label> <input type="text" class="full-width has-padding has-border" placeholder="用户名" id="edtUserName" name="edtUserName" size="20" value="" tabindex="1" /> </p> <p class="fieldset"> <label class="image-replace zhi-password" for="edtPassWord">密码</label> <input type="password" class="full-width has-padding has-border" placeholder="密码" id="edtPassWord" name="edtPassWord" size="20" tabindex="2" /> </p> <p class="fieldset"> <input type="checkbox" name="chkRemember" id="chkRemember" tabindex="98" /> <label for="chkRemember">记住登录状态</label> <a class="fieldsetrig" href="https://mip.qiaqa.com/?user=repass">忘记密码？</a> </p> <p class="fieldset"> <input id="btnPost" name="btnPost" type="submit" value="登录" class="full-width" tabindex="99"/> <input type="hidden" name="username" id="username" value="" /> <input type="hidden" name="password" id="password" value="" /> <input type="hidden" name="savedate" id="savedate" value="1" /> </p> </form> </div> <div id="zhi-singup"> <form method="post" action="#" class="zhi-form" id="formsing"> <p class="zhi-singup-set"> <label class="image-replace zhi-username">用户名</label> <input class="full-width has-padding has-border" id="zhanghao" name="zhanghao" type="text" placeholder="输入用户名"> </p> <p class="zhi-singup-set"> <label class="image-replace zhi-email">邮箱</label> <input class="full-width has-padding has-border" id="email" name="email" type="text" placeholder="输入mail"> </p> <p class="zhi-singup-set"> <label class="image-replace zhi-password">密码</label> <input class="full-width has-padding has-border" id="zpassword" name="zpassword" type="password" placeholder="输入密码"> </p> <p class="zhi-singup-set"> <label class="image-replace zhi-password">确认密码</label> <input class="full-width has-padding has-border" id="repassword" name="repassword" type="password" placeholder="确认密码"> </p> <p class="zhi-singup-set"> <input name="code" type="text" maxlength="6" class="form-control" placeholder="图形验证码" autocomplete="off" required=""> <span class="fieldset-code" style="width:96px;"> <img src="https://mip.qiaqa.com/zb_system/script/c_validcode.php?id=singin" id="singin" onclick="javascript:this.src='https://mip.qiaqa.com/zb_system/script/c_validcode.php?id=singin&tm='+Math.random();" alt="图形验证码"/> </span> </p> <p class="zhi-singup-set"> <input type="checkbox" name="xieyi" id="xieyi" tabindex="98" /> <label for="xieyi">我已阅读并同意 <a href="">用户协议</a></label> </p> <p class="zhi-singup-set"> <input id="btnSin" class="full-width" type="submit" value="注册新用户"> </p> </form> </div> <a href="javascript:void(0);" class="zhi-close-form"></a> </div> </div> <div class="zhiback" id="zhiback"> <div class="askBox"> <div class="ask-group"> <form action="https://mip.qiaqa.com/zb_users/theme/ZhiMedia/function/cmd.php?act=ask" method="POST" id="formask"> <div class="ask-item"> <div class="ask-item-img"> <img src="https://mip.qiaqa.com/zb_users/avatar/0.png?1745490870" alt="" /> </div> <input type="text" id="asktitle" name="asktitle" placeholder="请输入问题标题"> </div> <div class="ask-item"> <textarea name="askcon" id="askcon"> 请输入问题背景及详细信息... </textarea> </div> <div class="ask-footer"> <div class="ask-item-as"> <input type="hidden" name="csrfToken" value="659588c7811bff8b96a04f41b0c552de"> <input type="submit" class="ask-item-btn" value="发布" /> </div> </div> </form> </div> <button aria-label="关闭" type="button" class="ask-close"><i class="ri-close-line"></i></button> </div> </div> <div id="backbox" class="backbox"> <div class="back genight"><i class="ri-sun-fill"></i></div> <div class="back" id="totop"><i class="ri-arrow-up-s-line"></i></div> </div> <div class="zhi-menu-m"> <button type="button" class="btn-close" aria-label="Close"><i class="ri-close-line"></i></button> <div class="logo"> <a href="https://mip.qiaqa.com/"><img src="https://mip.qiaqa.com/logo.png" alt="恰卡编程网"/></a> </div> <div class="zhi-menu-search"> <form name="search" method="post" action="https://mip.qiaqa.com/zb_system/cmd.php?act=search"> <input name="q" size="11" class="zhi-menu-search-input" type="text" placeholder="请输入关键词" autocomplete="off"> <button class="zhi-menu-search-submit" type="submit"><i class="ri-search-2-line"></i></button> </form> </div> <nav id="mnav"></nav> </div> <footer class="zhi-footer"> <div class="inner"> <div class="footer-center-info"> 恰卡编程网--程序员编程资料和编程经验分享平台,从入门到进阶,非常详细。学习Java级其他网络编程语言的人很多,借助本站教程,相信你能很快精通并出类拔萃。 </div> <div class="zhi-footer-bottom"> <p>Copyright © 2018-2022 恰卡网 qiaqa.com 版权所有 <a rel="nofollow" class="ico-ico" href="http://www.beian.gov.cn/portal/recordQuery?token=9c5a0517-c8ae-4a6b-b2c7-0dbf41cd45f0" target="_blank">苏ICP备18042295号</a> </p> </div> </div> </footer> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?a88faa5532b1e037da0ed2f1324c3674"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="https://mip.qiaqa.com/zb_system/script/jquery-2.2.4.min.js"></script> <script src="https://mip.qiaqa.com/zb_users/theme/ZhiMedia/script/swiper.js"></script> <script src="https://mip.qiaqa.com/zb_users/theme/ZhiMedia/script/copy.js"></script> <script src="https://mip.qiaqa.com/zb_users/plugin/UEditor/third-party/prism/prism.js"></script> <script src="https://mip.qiaqa.com/zb_users/theme/ZhiMedia/script/html2canvas.min.js"></script> <script src="https://mip.qiaqa.com/zb_users/theme/ZhiMedia/script/lightbox.js"></script> <script src="https://mip.qiaqa.com/zb_users/theme/ZhiMedia/script/jquery.form.js"></script> <script src="https://mip.qiaqa.com/zb_users/theme/ZhiMedia/script/zhimedia.js?v=1.3.6"></script> </body> </html>