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.shufengxianlan.com/qtweb/news13/363563.html">HTMLDOM入门级知识手册</a> <br> 文章源于:<a href="http://www.shufengxianlan.com/qtweb/news13/363563.html">http://www.shufengxianlan.com/qtweb/news13/363563.html</a> </p> <p> 网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等 </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="https://www.cdcxhl.com/" 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/jianzhan/">建站公司知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news29/482829.html">Redis中利用过期键实现优化(redis过期键策略)</a> </li><li> <a class="text_overflow" href="/qtweb/news41/104041.html">如何查看ubuntu存储空间</a> </li><li> <a class="text_overflow" href="/qtweb/news35/390185.html">区块链的新世代</a> </li><li> <a class="text_overflow" href="/qtweb/news2/33752.html">web服务器的架设流程是什么</a> </li><li> <a class="text_overflow" href="/qtweb/news2/216152.html">Redis键值命名简单而又高效的技巧(redis键值命名技巧)</a> </li><li> <a class="text_overflow" href="/qtweb/news26/521926.html">关于安全工具“整合”的那些误解</a> </li><li> <a class="text_overflow" href="/qtweb/news8/179658.html">Linux下如何使用lv扩容磁盘分区(linuxlv扩容)</a> </li><li> <a class="text_overflow" href="/qtweb/news10/184610.html">虚拟机主机有操作系统么</a> </li><li> <a class="text_overflow" href="/qtweb/news13/544263.html">如何制作漂亮网页,漂亮网页的设计要点</a> </li><li> <a class="text_overflow" href="/qtweb/news10/388910.html">云虚拟主机类型怎么选</a> </li><li> <a class="text_overflow" href="/qtweb/news10/480110.html">随州云服务器</a> </li><li> <a class="text_overflow" href="/qtweb/news32/260532.html">cdn产品有哪些?(国内cdn价格一般是多少)</a> </li><li> <a class="text_overflow" href="/qtweb/news13/241763.html">10行代码-利用Python做一个微信聊天机器人(简单易懂)</a> </li><li> <a class="text_overflow" href="/qtweb/news13/216113.html">python3中input函数用法</a> </li><li> <a class="text_overflow" href="/qtweb/news21/334771.html">服务器防火墙怎么关闭?(服务器怎么关闭防火墙设置)</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/sdjbc/" 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/vr/" target="_blank">VR全景</a> </li><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/shiliangting/" 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/chalousj/" 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/gsdb/" 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/weixiufdj/" 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/yangguangfang/" 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/sclsb/" 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/xiaoguotu/" 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/shipenji/" 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/zhendongpan/" 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/suliaodai/" 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/bdfhw/" target="_blank">被动防护网</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="http://www.cdhuace.com/logo.html" target="_blank">标志设计</a>    <a href="https://www.scvps.cn/" target="_blank">云服务器</a>    <a href="http://www.cdxwcx.cn/" target="_blank">成都网站设计</a>    <a href="http://www.scgaoxian.com/" target="_blank">高县网站建设</a>    <a href="http://m.cdcxhl.com/" target="_blank">成都网站制作</a>    <a href="http://www.scjierui.cn/" target="_blank">四川网站建设</a>    <a href="https://www.cdxwcx.com/jifang/wenjiang.html" target="_blank">成都多线机房</a>    <a href="http://www.wjzwz.com/" target="_blank">温江网站建设</a>    <a href="http://m.cdcxhl.com/" target="_blank">成都网站设计</a>    <a href="http://www.gtmaxf.com/" target="_blank">国泰民安消防</a>    <a href="http://www.wjzwz.com/" target="_blank">温江做网站</a>    <a href="https://www.cdcxhl.com/tuoguan/guanghua/" target="_blank">成都电信服务器托管</a>    <a href="http://www.cxjianzhan.com/" target="_blank">网络推广公司</a>    <a href="https://www.cdcxhl.com/" target="_blank">成都做网站</a>    <a href="http://www.cdhuace.com/faguangzi/minifgz.html" target="_blank">迷你发光字</a>    <a href="http://chengdu.cdcxhl.com/dingzhi/" target="_blank">定制网站建设</a>    <a href="https://www.xwcx.net/zuyong.html" target="_blank">成都服务器租用</a>    <a href="http://m.cdxwcx.com/wenjiang.html" target="_blank">温江电信机房</a>    <a href="http://www.cdxwcx.cn/tuoguan/mianyang.html" target="_blank">绵阳电信机房</a>    <a href="http://www.cdkjz.cn/wangzhan/keyseo/" target="_blank">成都关键词SEO优化</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'"> 立即开始2800定制网站建设</button> <button type="button" class="btn btn-default btn-xs" onClick="window.location.href='tencent://message/?uin=631063699&Site=&Menu=yes'"> 2800定制网站建设</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="https://www.cdcxhl.com/" target="_blank">网站设计</a> <a href="https://www.cdcxhl.com/" target="_blank">网站制作</a> <a href="https://www.cdcxhl.com/" 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:400-028-6601(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>