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.csdahua.cn/qtweb/news13/363563.html">HTMLDOM入门级知识手册</a> <br> 网站路径:<a href="http://www.csdahua.cn/qtweb/news13/363563.html">http://www.csdahua.cn/qtweb/news13/363563.html</a> </p> <p> <a href="http://www.csdahua.cn/" target="_blank">成都网站优化推广公司</a>_<a href="https://www.cdcxhl.com/" target="_blank">创新互联</a>,为您提供<a href="https://www.cdcxhl.com/news/jingtai/">静态网站</a>、<a href="https://www.cdcxhl.com/news/qiyejianzhan/">企业建站</a>、<a href="https://www.cdcxhl.com/news/daohang/">网站导航</a>、<a href="https://www.cdcxhl.com/news/jianshe/">网站建设</a>、<a href="https://www.cdcxhl.com/news/zuo/">做网站</a>、<a href="https://www.cdcxhl.com/news/ued/">用户体验</a> </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.csdahua.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/jianshe/">网站建设知识</a></p> <ul> <li> <a class="text_overflow" href="/qtweb/news35/272785.html">Argo Rollouts 基于 Analysis 的渐进式发布</a> </li><li> <a class="text_overflow" href="/qtweb/news6/128206.html">设置行间距为什么没反应</a> </li><li> <a class="text_overflow" href="/qtweb/news29/200079.html">如何在SQL2023中创建数据库(sql2023创建数据库)</a> </li><li> <a class="text_overflow" href="/qtweb/news31/144281.html">怎样区分香港物理服务器和虚拟服务器?</a> </li><li> <a class="text_overflow" href="/qtweb/news2/180302.html">服务器登录密码怎么修改?(如何给服务器改密码)</a> </li><li> <a class="text_overflow" href="/qtweb/news48/119398.html">云机房与一般机房的区别?云服务器区别</a> </li><li> <a class="text_overflow" href="/qtweb/news3/444753.html">CentOS7下图形配置网络的方法:简单易懂,让你轻松上手</a> </li><li> <a class="text_overflow" href="/qtweb/news23/208473.html">基于RHEL8的CentOS8.0计划于下周发布</a> </li><li> <a class="text_overflow" href="/qtweb/news36/531786.html">phpstorm怎么搭建运行环境?(php主机环境搭建及配置的方法是什么)</a> </li><li> <a class="text_overflow" href="/qtweb/news4/108204.html">SQLServer7.0排序规则的转换</a> </li><li> <a class="text_overflow" href="/qtweb/news41/458591.html">怎样把域名连接到服务器?求高手?域名连接服务器</a> </li><li> <a class="text_overflow" href="/qtweb/news30/219930.html">云服务器租用空间如何用</a> </li><li> <a class="text_overflow" href="/qtweb/news49/61849.html">通信网络建设技术服务提供商?(通信网络建设技术服务提供商有哪些)</a> </li><li> <a class="text_overflow" href="/qtweb/news31/6531.html">在国内玩儿lol怎么连接台服?(如何连接到台湾的服务器上)</a> </li><li> <a class="text_overflow" href="/qtweb/news16/283166.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/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/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/ddcl/" 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/renzaowu/" 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/menchuang/" 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/shilongwang/" 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/jbgc/" 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/weilanhulan/" 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/xiangsu/" 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><li class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <a href="https://www.cdcxhl.com/hangye/ldjbc/" 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/shidiao/" 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/fengyangtai/" 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/hldzj/" target="_blank">护栏打桩机</a> </li> </ul> </div> </div> </div> <div class="carousel-inner linkbg" style="background: #fff"> <div class="container"> <a href="http://m.cdcxhl.cn/dingzhi/ " target="_blank">定制网站制作</a>    <a href="http://www.ycggtw.cn/" target="_blank">金羊影视传媒</a>    <a href="http://www.4006tel.net/yingxiao/" target="_blank">企业营销型网站</a>    <a href="http://m.cdcxhl.cn/shop/ " target="_blank">商城网站建设公司</a>    <a href="https://www.cdxwcx.com/" target="_blank">成都网站设计公司</a>    <a href="http://www.snfdjwx.com/" target="_blank">成都企业注册服务</a>    <a href="http://www.cdhuace.com/zhuangxiu.html" target="_blank">成都店面装修公司</a>    <a href="http://www.kswcd.com/service/" target="_blank">高端网站建设</a>    <a href="https://www.xwcx.net/" target="_blank">成都机柜租用</a>    <a href="http://www.njzdgg.com/" target="_blank">内江广告</a>    <a href="https://www.cdxwcx.com/wangzhan/mbshangcheng.html" target="_blank">模板商城网站</a>    <a href="https://www.cdxwcx.com/jifang/yaan.html" target="_blank">雅安服务器托管</a>    <a href="http://www.cxjianzhan.com/mobile/" target="_blank">wap网站建设</a>    <a href="http://www.xjjierui.cn/" target="_blank">xjjierui.cn</a>    <a href="http://www.myzitong.com/" target="_blank">绵阳梓潼做网站</a>    <a href="http://chengdu.cdcxhl.cn/seo/" target="_blank">成都网站优化</a>    <a href="https://www.cdxwcx.com/" target="_blank">成都网站制作</a>    <a href="http://www.chdeyu.com/" target="_blank">佑馨产后护理</a>    <a href="http://www.njjbc.cn/" target="_blank">南京护栏钻孔机</a>    <a href="https://www.cdcxhl.com/" 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'"> 立即开始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="http://www.csdahua.cn/" target="_blank">网站优化</a> <a href="http://www.csdahua.cn/" target="_blank">网络推广</a> <a href="http://www.csdahua.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>