网站建设资讯

NEWS

网站建设资讯

DOM的概念(1)-创新互联

什么是DOM?

网站建设哪家好,找成都创新互联!专注于网页设计、网站建设、微信开发、重庆小程序开发公司、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了双桥免费建站欢迎大家使用!

  通过 JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口,连同对HTML 元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。在 1998 年,W3C 发布了第一级的 DOM 规范。

这个规范允许访问和操作 HTML 页面中的每一个单独的元素。所有的浏览器都执行了这个标准,因此,DOM 的兼容性问题也几乎难觅踪影了。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。

DOM 被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3):

Core DOM              定义了一套标准的针对任何结构化文档的对象

 XML DOM              定义了一套标准的针对 XML 文档的对象

HTML DOM              定义了一套标准的针对 HTML 文档的对象。

节点

根据 DOM,HTML 文档中的每个成分都是一个节点。

 DOM 是这样规定的:

  • 整个文档是一个文档节点
  • 每个 HTML 标签是一个元素节点
  • 包含在 HTML 元素中的文本是文本节点
  • 每一个 HTML 属性是一个属性节点
  • 注释属于注释节点

Node 层次

  节点彼此都有等级关系。HTML 文档中的所有节点组成了一个文档树(或节点树)。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。

      下面这个图片表示一个文档树(节点树):

      

文档树(节点数)       请看下面这个HTML文档:


  
    DOM Tutorial 
   
   
    

DOM Lesson one

Hello world!

      上面所有的节点彼此间都存在关系。除文档节点之外的每个节点都有父节点。举例, 和 的父节点是 节点,文本节点 "Hello world!" 的父节点是

节点。大部分元素节点都有子节点。比方说, 节点有一个子节点: 节点。<title> 节点也有一个子节点:文本节点 "DOM Tutorial"。当节点分享同一个父节点时,它们就是同辈(同级节点)。比方说,<h1> 和 <p>是同辈,因为它们的父节点均是 <body> 节点。节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点,以此类推。比方说,所有的文本节点都是 <html>节点的后代,而第一个文本节点是 <head> 节点的后代。节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点,以此类推。比方说,所有的文本节点都可把 <html> 节点作为先辈节点。</p> 做做笔记,传播知识,我是个勤劳的搬运工 1224144402@qq.com <br> 网站标题:DOM的概念(1)-创新互联 <br> 文章出自:<a href="http://cdweb.net/article/dioggc.html">http://cdweb.net/article/dioggc.html</a> </div> </div> <div class="other"> <h3>其他资讯</h3> <ul> <li> <a href="/article/dcoioge.html">ChatGPT的guan网 chacott guan网</a> </li><li> <a href="/article/dcoideo.html">sap日文系统的简单介绍</a> </li><li> <a href="/article/dcoicdj.html">服务器在阿里云安全吗 阿里云服务器服务器</a> </li><li> <a href="/article/dcoidjg.html">java后端登录系统代码 java用户登录系统代码</a> </li><li> <a href="/article/dcoidid.html">go语言写服务 go语言 项目</a> </li> </ul> </div> </div> </div> <footer> <div class="footop"> <div class="wrap"> <div class="bottomrpw"> <div class="erp arp"> <dl> <dt>ADDRESS</dt> <dd class="address"> <i class="icon"></i> <span class="word">成都市青羊区锦天国际1号楼1002室</span> </dd> </dl> </div> <div class="erp arp"> <dl> <dt>TEL</dt> <dd class="phonum"> <i class="icon"></i> <span class="word en"> <a href="tel:18980820575">18980820575</a> </span> </dd> </dl> </div> <div class="erp crp"> <dl> <dt>OTHER</dt> <dd> <a class="word get-quote">获得报价与方案</a> </dd> <dd> <a href="#" target="_blank" rel='nofollow' class="word" title="付款方式">付款方式</a> </dd> </dl> </div> <div class="erp code-rp"> <dl> <dt>Wechat</dt> <dd class="code-wrap"> <span class="code"> <img src="/Public/Home/images/qr-code.jpg" alt="快上网微信公众号" /> </span> </dd> </dl> </div> </div> </div> </div> <div class="footerbot"> <div class="friendlinks"> <div class="wrap"> <ul class="rpl"> <li><a href="http://www.hzjierui.cn/" title="彭州网站建设" target="_blank">彭州网站建设</a></li><li><a href="https://www.cdcxhl.com/xiaochengx.html" title="小程序开发" target="_blank">小程序开发</a></li><li><a href="https://www.xwcx.net/zuyong.html" title="成都服务器租用" target="_blank">成都服务器租用</a></li><li><a href="https://www.cdxwcx.com/wangzhan/" title="成都网站建设" target="_blank">成都网站建设</a></li><li><a href="https://www.cdcxhl.cn/ " title="腾讯云香港免备案空间" target="_blank">腾讯云香港免备案空间</a></li><li><a href="http://www.cdhuace.com/zhuangxiu.html" title="成都装饰装修" target="_blank">成都装饰装修</a></li><li><a href="https://www.cdxwcx.com/wangzhan/app.html" title="app开发公司" target="_blank">app开发公司</a></li><li><a href="http://www.4006tel.net/yingxiao/" title="seo优化" target="_blank">seo优化</a></li><li><a href="http://www.kswjz.com/" title="微信小程序开发" target="_blank">微信小程序开发</a></li><li><a href="http://www.huineicun.com/" title="广安园林绿化公司" target="_blank">广安园林绿化公司</a></li> </ul> </div> </div> <div class="wrap"> <div class="copyright"> <span class="en">©2007-2022</span> 成都快上网科技有限公司 <span class="en">ALL RIGHTS RESERVED.</span> <a rel="nofollow" href="http://www.miitbeian.gov.cn" target="_blank">蜀ICP备19037934号</a> </div> </div> </div> </footer> <div class="fcwrap"> <ul class="rpl clearfix"> <li class="phone"> <a rel="nofollow" target="_blank" href="tel:18980820575"> <i class="icon"></i> <strong>18980820575</strong> </a> </li> <li class="qq"> <a rel="nofollow" target="_blank" href="https://wpa.qq.com/msgrd?v=1&uin=244261566&site=qq&menu=yes"> <i class="icon"></i> <strong>244261566</strong> </a> </li> <li class="back-top"> <a href="javascript:void(0)" rel="nofollow" class="back-to-top"> <i class="icon"></i> <strong>回到顶部</strong> </a> </li> </ul> </div> <!--nav--> <div class="n-Wrap"> <div class="navBar visble show"> <div class="barlogo"> <a href="/" rel="nofollow"> <img src="/Public/Home/images/logo1.png" alt="成都做网站" /> <img src="/Public/Home/images/logo2.png" alt="成都网站设计" /> </a> </div> <div class="bmenu"> <i class="bar-top"><span></span></i> <i class="bar-cen"><span></span></i> <i class="bar-bom"><span></span></i> <i class="bar-left"><span></span></i> <i class="bar-right"><span></span></i> </div> </div> <section class="fixmenu"> <div class="close-bar"> <i class="bar-left"><span></span></i> <i class="bar-right"><span></span></i> </div> <nav class="smph"> <ul> <li class="index-hrefs on"><a href="http://www.cdweb.net/"><font>首页</font></a></li> <li><a href="/about/" rel="nofollow"><font>关于快上网</font></a></li> <li><a href="/service/" rel="nofollow"><font>服务范围</font></a></li> <li><a href="/case/" rel="nofollow"><font>案例展示</font></a></li> <li><a href="/solve/" rel="nofollow"><font>解决方案</font></a></li> <li><a href="/news/" rel="nofollow"><font>建站资讯</font></a></li> <li><a href="/contact/" rel="nofollow"><font>联系快上网</font></a></li> </ul> <div class="pwrap"> <span class="label">服务热线</span> <strong class="phone"><a href="tel:18980820575">18980820575</a></strong> </div> </nav> </section> </div> <!--end nav--> <script src="/Public/Home/js/hotcss.js"></script> <script type="text/javascript" src="/Public/Home/js/su_new.js"></script> </body> </html> <script> $(".con img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>