HTMLDOM入门级知识手册

HTML DOM定义了访问和操作HTML文档的标准方法。HTML DOM 把HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

推荐阅读:大话HTML DOM与XML DOM的区别与联系

HTML DOM简介

HTML文档对象模型(HTML Document Object Model)定义了访问和处理HTML文档的标准方法。

您应当具备的基础知识

在继续学习之前,您需要对下面的知识有基本的了解:

◆HTML / XHTML

◆JavaScript

什么是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文档的对象。

HTML DOM 节点

HTML文档中的每个成分都是一个节点。

节点

根据DOM,HTML文档中的每个成分都是一个节点。DOM是这样规定的:

◆整个文档是一个文档节点

◆每个HTML标签是一个元素节点

◆包含在HTML元素中的文本是文本节点

◆每一个HTML属性是一个属性节点

◆注释属于注释节点

Node层次

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

HTML DOM 节点树

一棵节点树中的所有节点彼此都是有关系的。

文档树(节点数)

 
 
 
  1. 请看下面这个HTML文档:  
  2.  
  3.    
  4.     DOM Tutorial   
  5.      
  6.      
  7.     

    DOM Lesson one

       
  8.     

    Hello world!

       
  9.      
  10.  

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

节点。

大部分元素节点都有子节点。比方说,节点有一个子节点:节点。<title>节点也有一个子节点:文本节点"DOM Tutorial"。当节点分享同一个父节点时,它们就是同辈(同级节点)。比方说,<h1>和 <p>是同辈,因为它们的父节点均是<body>节点。</p><p>节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点,以此类推。比方说,所有的文本节点都是<html>节点的后代,而***个文本节点是<head>节点的后代。节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点,以此类推。比方说,所有的文本节点都可把<html>节点作为先辈节点。</p><p>#p#</p><p><strong>HTML DOM访问节点</strong></p><p>通过DOM,您可访问HTML文档中的每个节点。</p><p><strong>查找并访问节点</strong></p><p>你可通过若干种方法来查找您希望操作的元素:</p><p>◆通过使用 getElementById() 和 getElementsByTagName() 方法。</p><p>◆通过使用一个元素节点的parentNode、firstChild以及lastChild属性。</p><p><strong>getElementById() 和 getElementsByTagName()</strong></p><p>getElementById() 和 getElementsByTagName()这两种方法,可查找整个HTML文档中的任何HTML元素。</p><p>这两种方法会忽略文档的结构。假如您希望查找文档中所有的<p>元素,getElementsByTagName()会把它们全部找到,不管<p>元素处于文档中的哪个层次。同时,getElementById()方法也会返回正确的元素,不论它被隐藏在文档结构中的什么位置。这两种方法会像您提供任何你所需要的HTML元素,不论它们在文档中所处的位置!getElementById()可通过指定的ID来返回元素:</p><pre> <ol> <li>document.getElementById("ID");  </li> </ol></pre><p>注释:getElementById() 无法工作在XML中。在XML文档中,您必须通过拥有类型id的属性来进行搜索,而此类型必须在XML DTD中进行声明。</p><p>getElementsByTagName() 方法会使用指定的标签名返回所有的元素(作为一个节点列表),这些元素是您在使用此方法时所处的元素的后代。getElementsByTagName() 可被用于任何的HTML元素:</p><p><strong>getElementsByTagName() 语法</strong></p><pre> <ol> <li>document.getElementsByTagName("标签名称");  </li> </ol></pre><p>或者:</p><pre> <ol> <li>document.getElementById('ID').getElementsByTagName("标签名称");  </li> </ol></pre><p><strong>实例 1</strong></p><p>下面这个例子会返回文档中所有<p>元素的一个节点列表:</p><pre> <ol> <li>document.getElementsByTagName("p");  </li> </ol></pre><p><strong>实例 2</strong></p><p>下面这个例子会返回所有<p>元素的一个节点列表,且这些<p>元素必须是id为"maindiv"的元素的后代:</p><pre> <ol> <li>document.getElementById('maindiv').getElementsByTagName("p");  </li> </ol></pre><p><strong>节点列表(nodeList)</strong></p><p>当我们使用节点列表时,通常要把此列表保存在一个变量中,就像这样:</p><pre> <ol> <li>var x=document.getElementsByTagName("p"); </li> </ol></pre><p>现在,变量x包含着页面中所有<p>元素的一个列表,并且我们可以通过它们的索引号来访问这些<p>元素。注释:索引号从0开始。您可以通过使用length属性来循环遍历节点列表:</p><pre> <ol> <li>var x=document.getElementsByTagName("p");  </li> <li>for (var i=0;i<x.length;i++)  </li> <li>  {   </li> <li>  // do something with each paragraph  </li> <li>  } </li> </ol></pre><p>您也可以通过索引号来访问某个具体的元素。要访问第三个<p>元素,您可以这么写:</p><pre> <ol> <li>var y=x[2]; </li> </ol></pre><p><strong>parentNode、firstChild以及lastChild</strong></p><p>这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构,在文档中进行“短距离的旅行”。请看下面这个HTML片段:</p><pre> <ol> <li><table> </li> <li>  <tr> </li> <li>    <td>John</td> </li> <li>    <td>Doe</td> </li> <li>    <td>Alaska</td> </li> <li>  </tr> </li> <li></table> </li> </ol></pre><p>在上面的HTML代码中,***个<td>是<tr>元素的***子元素(firstChild),而***一个<td>是<tr>元素的***一个子元素(lastChild)。此外,<tr>是每个<td>元素的父节点(parentNode)。对firstChild最普遍的用法是访问某个元素的文本:</p><pre> <ol> <li>var x=[a paragraph];  </li> <li>var text=x.firstChild.nodeValue;  </li> </ol></pre><p>parentNode属性常被用来改变文档的结构。假设您希望从文档中删除带有id为"maindiv"的节点:</p><pre> <ol> <li>var x=document.getElementById("maindiv");  </li> <li>x.parentNode.removeChild(x);  </li> </ol></pre><p>首先,您需要找到带有指定id的节点,然后移至其父节点并执行removeChild()方法。</p><p>#p#</p><p><strong>根节点</strong></p><p>有两种特殊的文档属性可用来访问根节点:</p><pre> <ol> <li>document.documentElement   </li> <li>document.body  </li> </ol></pre><p>***个属性可返回存在于XML以及HTML文档中的文档根节点。第二个属性是对HTML页面的特殊扩展,提供了对<body>标签的直接访问。</p><p><strong>HTML DOM 节点信息</strong></p><p>nodeName、nodeValue以及nodeType包含有关于节点的信息。</p><p><strong>节点信息</strong></p><p>每个节点都拥有包含着关于节点某些信息的属性。这些属性是:</p><p>◆nodeName(节点名称)</p><p>◆nodeValue(节点值)</p><p>◆nodeType(节点类型)</p><p><strong>nodeName</strong></p><p>nodeName属性含有某个节点的名称。</p><p>◆元素节点的nodeName是标签名称</p><p>◆属性节点的nodeName是属性名称</p><p>◆文本节点的nodeName永远是#text</p><p>◆文档节点的nodeName永远是#document</p><p>注释:nodeName所包含的XML元素的标签名称永远是大写的</p><p><strong>nodeValue</strong></p><p>◆对于文本节点,nodeValue属性包含文本。</p><p>◆对于属性节点,nodeValue属性包含属性值。</p><p>◆nodeValue属性对于文档节点和元素节点是不可用的。</p><p><strong>nodeType</strong></p><p>nodeType属性可返回节点的类型。最重要的节点类型是:</p><p><strong>一个 HTML DOM 实例</strong></p><p>下面这个例子向我们展示了当一个用户在文档中点击时,HTML文档的背景颜色如何被改变。</p><pre> <ol> <li><html> </li> <li><head> </li> <li><script type="text/javascript"> </li> <li>function ChangeColor()  </li> <li>{  </li> <li>document.body.bgColor="yellow" </li> <li>}  </li> <li></script> </li> <li></head> </li> <li><body onclick="ChangeColor()"> </li> <li>Click on this document!  </li> <li></body> </li> <li></html> </li> </ol></pre><p><em>原文链接:http://www.webjx.com/htmldata/2007-09-21/1190376115.html</em></p> <p> 名称栏目:<a href="http://www.mswzjz.cn/qtweb/news13/363563.html">HTMLDOM入门级知识手册</a> <br> URL分享:<a href="http://www.mswzjz.cn/qtweb/news13/363563.html">http://www.mswzjz.cn/qtweb/news13/363563.html</a> </p> <p> 攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能,是专注品牌与效果的网络营销公司;服务项目有等 </p> <p class="adpic"> <a href="https://www.cdcxhl.com/service/ad.html" target="_blank" class="ad">广告</a> <a href="" target="_blank" class="adimg"><img src=""></a> </p> <p class="copy"> 声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: <a href="http://www.mswzjz.cn/" target="_blank">贝锐智能</a> </p> </div> <div class="newsmorelb"> <p>贝锐智能技术为您推荐以下文章</p> <ul> <li> <a href="/qtweb/news12/363562.html">韩国云人工智能在制造业领域有哪些应用</a> </li><li> <a href="/qtweb/news11/363561.html">Linux学习记录:从文件管理到系统编程的成长之路</a> </li><li> <a href="/qtweb/news10/363560.html">新手学习SEO从冷门词开始</a> </li><li> <a href="/qtweb/news9/363559.html">行进入Redis命令行的简单操作(如何进入redis命令)</a> </li><li> <a href="/qtweb/news8/363558.html">建立Redis运行环境创建Redis用户(创建redis运行用户)</a> </li><li> <a href="/qtweb/news7/363557.html">中国香港云服务器需要备案吗</a> </li><li> <a href="/qtweb/news6/363556.html">一键Ghost备份文件的删除方法</a> </li><li> <a href="/qtweb/news5/363555.html">无法连接到dns怎么办</a> </li><li> <a href="/qtweb/news4/363554.html">端口映射详细步骤?端口映射windows</a> </li> </ul> </div> </div> <div class="col-lg-3 noneb"> <div class="bkright" style="margin-top: 0"> <p><a href="https://www.cdcxhl.com/news/zuo/">做网站知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news48/126048.html">为什么用电脑登录微信手机微信就没提示音了?手机微信windows版</a> </li><li> <a class="text_overflow" href="/qtweb/news6/432456.html">Linux发现:寻找新的可能性(linuxfound)</a> </li><li> <a class="text_overflow" href="/qtweb/news9/36309.html">简单代码的秘诀—去掉显而易见的,加上有意义的</a> </li><li> <a class="text_overflow" href="/qtweb/news29/160129.html">导致香港服务器流量超标的因素有哪些</a> </li><li> <a class="text_overflow" href="/qtweb/news16/492266.html">Linux进程调度机制实现研究(linux进程调度)</a> </li><li> <a class="text_overflow" href="/qtweb/news39/249889.html">怎么使用Flask创建Web网站</a> </li><li> <a class="text_overflow" href="/qtweb/news28/356428.html">asperageo_MySQL-&gt;CSS/ES</a> </li><li> <a class="text_overflow" href="/qtweb/news40/54040.html">虚拟主机不备案会怎么样吗</a> </li><li> <a class="text_overflow" href="/qtweb/news26/300826.html">10m带宽服务器能支持多少人(10m带宽可以在线多少人?)</a> </li><li> <a class="text_overflow" href="/qtweb/news14/424864.html">vps账号密码怎么修改?(vps怎么修改密码)</a> </li><li> <a class="text_overflow" href="/qtweb/news4/247804.html">虚拟专用网络断开了怎么办?(网站恢复一下备份-虚拟主机/数据库问题)</a> </li><li> <a class="text_overflow" href="/qtweb/news6/71706.html">ping命令的七种用法,看完瞬间成大神</a> </li><li> <a class="text_overflow" href="/qtweb/news16/66866.html">自己做平台怎么做的,如何创建一个app平台呢</a> </li><li> <a class="text_overflow" href="/qtweb/news36/306336.html">如何克服多云管理的挑战?</a> </li><li> <a class="text_overflow" href="/qtweb/news33/389083.html">缓存TP5 快速设置Redis缓存(tp5如何设置redis)</a> </li> </ul> </div> <div class="bkright tag"> <p><a href="https://www.cdcxhl.com/hangye/" target="_blank">同城分类信息</a></p> <ul> <li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/zsljbc/" target="_blank">自上料搅拌车</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/pvc/" target="_blank">PVC花箱</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/jszz/" target="_blank">假山制作</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bxgds/" target="_blank">不锈钢雕塑</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/fwqtg/" target="_blank">服务器托管</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/hntjbg/" target="_blank">混凝土搅拌罐</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/swzbw/" target="_blank">三维植被网</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/lajitong/" target="_blank">垃圾桶</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/caihui/" target="_blank">墙体彩绘</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/fadianjihs/" target="_blank">发电机回收</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/dibang/" target="_blank">地磅秤</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/boligeduan/" target="_blank">玻璃隔断</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/jiagu/" target="_blank">加固</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/yangtaihulan/" target="_blank">阳台护栏</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/bolimo/" target="_blank">玻璃贴膜</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/qchs/" target="_blank">报废汽车回收</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="https://www.cdcxhl.com/" target="_blank">制作网站</a>    <a href="http://www.cpwzsj.com/" target="_blank">平城网站运维</a>    <a href="https://www.cdcxhl.com/waimao.html" target="_blank">成都外贸网站建设公司</a>    <a href="https://www.cdcxhl.com/seo.html" target="_blank">成都网站营销</a>    <a href="http://www.ptjierui.cn/" target="_blank">郫县网站建设</a>    <a href="http://www.mswzjz.cn/" target="_blank">攀枝花网站建设</a>    <a href="http://www.cqhuaxiang.cn/" target="_blank">重庆花箱</a>    <a href="https://www.cdcxhl.com/gaiban/chengdu.html" target="_blank">成都企业网站改版</a>    <a href="http://www.xhgfhy.com/ " target="_blank">不锈钢防护栏</a>    <a href="http://www.cdymzj.com/" target="_blank">域名注册</a>    <a href="https://www.cdcxhl.com/tuoguan/zongshu/" target="_blank">成都棕树机房</a>    <a href="http://www.cxhljz.cn/app/" target="_blank">成都App定制</a>    <a href="http://www.cqcxhl.com/" target="_blank">重庆网站设计</a>    <a href="http://m.cdxwcx.com/xibuxinxi.html" target="_blank">西部信息机房</a>    <a href="http://mc.scmwjz.com/" target="_blank">成都封阳台</a>    <a href="http://www.36103.cn/" target="_blank">成都做网站</a>    <a href="http://m.cdcxhl.cn/mobile/ " target="_blank">手机网站设计</a>    <a href="http://www.scghjhjc.com/" target="_blank">广汉锦华橡塑</a>    <a href="http://www.cdkjz.cn/fangan/education/" target="_blank">教育网站设计方案</a>    <a href="http://www.cdsuliao.cn/" target="_blank">成都塑料加工</a>     </div> </div> <footer> <div class="carousel-inner footjz"> <div class="container"> <i class="icon iconfont zbw"></i> 品质网站制作 <i class="icon iconfont"></i> 自适应网站 <i class="icon iconfont"></i> 开发成本低 <i class="icon iconfont"></i> 响应速度快 <i class="icon iconfont"></i> 多人服务好 <button type="button" class="btn btn-default btn-lg" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 立即开始600网站建设</button> <button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 600网站制作</button> </div> </div> <div class="carousel-inner bqsy"> <div class="container"> <div class="lxfs"> <h4 class="yutelnone">028-86922220 13518219792</h4> <h4 class="yutelblock"><a href="tel:02886922220">028-86922220</a> <a href="tel:13518219792">13518219792</a></h4> <a class="btn btn-default" href="tencent://message/?uin=532337155&Site=&Menu=yes" role="button">网站建设<span>QQ</span>:532337155</a> <a class="btn btn-default" href="tencent://message/?uin=631063699&Site=&Menu=yes" role="button">营销推广<span>QQ</span>:631063699</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=532337155&version=1&src_type=web&web_src=oicqzone.com" role="button">网站制作<span>QQ</span>:532337155</a> <a class="btn btn1 btn-default" href="mqqwpa://im/chat?chat_type=wpa&uin=631063699&version=1&src_type=web&web_src=oicqzone.com" role="button">营销推广<span>QQ</span>:631063699</a> <a class="btn btn-default nonea" href="tencent://message/?uin=1683211881&Site=&Menu=yes" role="button">售后QQ:1683211881</a> <div class="dz">创新互联建站专注: <a href="http://www.mswzjz.cn/" target="_blank">攀枝花网站设计</a> <a href="http://www.mswzjz.cn/" target="_blank">攀枝花网站制作</a> <a href="http://www.mswzjz.cn/" target="_blank">攀枝花网站建设</a> <address>地址:成都太升南路288号锦天国际A幢10楼</address> </div> </div> <div class="bzdh dz"><img src="https://www.cdcxhl.com/imges/bottom_logo.png" alt="创新互联"> <p><a href="https://www.cdcxhl.com/menu.html" target="_blank">成都创新互联科技有限公司</a><br> Tel:028-86922220(7x24h)</p></div> </div> </div> </footer> </body> </html> <script> $.getJSON ("../../qtwebpic.txt", function (data) { var jsonContent = { "featured":data } var random = jsonContent.featured[Math.floor(Math.random() * jsonContent.featured.length)]; $(".adpic .adimg").attr("href",random.link) $(".adpic img").attr("src",random.pic); }) </script>