HTML DOM基础知识
一、什么是DOM？
1、HTML DOM 定义了访问和操作HTML文档的标准方法。
2、HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
3、通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。DOM 可被 JavaScript 用来读取、改变 HTML、XHTML 以及 XML 文档。
4、DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：
*Core DOM：定义了一套标准的针对任何结构化文档的对象*XML DOM：定义了一套标准的针对 XML 文档的对象 *HTML DOM：定义了一套标准的针对 HTML 文档的对象。
二、HTML DOM节点及节点树
1、节点
根据 DOM，HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
2、Node 层次
节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树（或节点树）。HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
下面这个图片表示一个文档树（节点树）：
3、节点树
1
2
3 DOM Tutorial
4
5
6 DOM Lesson one
7 Hello world!
8
9
上面所有的节点彼此间都存在关系。
*除文档节点之外的每个节点都有父节点。举例，
和 的父节点是 节点，文本节点 "Hello world!" 的父节点是
节点。
*大部分元素节点都有子节点。比方说，
节点有一个子节点：
节点。<title> 节点也有一个子节点：文本节点 "DOM Tutorial"。</p>
<p> *当节点分享同一个父节点时，它们就是<em>同辈（同级节点）</em>。比方说，<h2> 和 <p>是同辈，因为它们的父节点均是 <body> 节点。</p>
<p> *节点也可以拥有<em>后代</em>，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。比方说，所有的文本节点都是 <html>节点的后代，而第一个文本节点是 <head> 节点的后代。</p>
<p> *节点也可以拥有<em>先辈</em>。先辈是某个节点的父节点，或者父节点的父节点，以此类推。比方说，所有的文本节点都可把 <html> 节点作为先辈节点。</p>
<hr />
<h2>三、ＨＴＭＬ ＤＯＭ访问节点的方法</h2>
<p>１．查找并访问节点</p>
<p>你可通过若干种方法来查找您希望操作的元素：</p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/wenzhong.js"></script>
<li>通过使用 getElementById() 和 getElementsByTagName() 方法</li>
<li>通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性 </li>
<p>２．getElementById() 和 getElementsByTagName()</p>
<p>（１）getElementById() 可通过指定的 ID 来返回元素，语法：</p>
<div class="51ds_code" style="position: relative;"><pre class="brush:php;toolbar:false">document.getElementById("ID"); </pre></div>
<p>（２）getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。getElementsByTagName() 可被用于任何的 HTML 元素：</p>
<p>语法：</p>
<div class="51ds_code" style="position: relative;"><pre class="brush:php;toolbar:false">document.getElementsByTagName("标签名称"); </pre></div>
<p>或者：</p>
<div class="51ds_code" style="position: relative;"><pre class="brush:php;toolbar:false">document.getElementById('ID').getElementsByTagName("标签名称"); </pre></div>
<p>＜访问节点列表时，索引号从０开始＞</p>
<p>３．parentNode、firstChild以及lastChild</p>
<p>这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。对 firstChild 最普遍的用法是访问某个元素的文本；parentNode 属性常被用来改变文档的结构；</p>
<p>４．根节点</p>
<p>有两种特殊的文档属性可用来访问根节点：</p>
<li>document.documentElement</li>
<li>document.body</li>
<p>第一个属性可返回存在于 XML 以及 HTML 文档中的文档根节点。</p>
<p>第二个属性是对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。</p>
<hr />
<h2>四．节点信息</h2>
<p>每个节点都拥有包含着关于节点某些信息的属性。这些属性是：</p>
<li>nodeName（节点名称）</li>
<li>nodeValue（节点值）</li>
<li>nodeType（节点类型） </li>
<p>１．nodeName</p>
<p>nodeName 属性含有某个节点的名称。</p>
<li>元素节点的 nodeName 是标签名称</li>
<li>属性节点的 nodeName 是属性名称</li>
<li>文本节点的 nodeName 永远是 #text</li>
<li>文档节点的 nodeName 永远是 #document</li>
<p class="note">注释：nodeName 所包含的 XML 元素的标签名称永远是大写的</p>
<p>２．nodeValue</p>
<p>对于文本节点，nodeValue 属性包含文本。</p>
<p>对于属性节点，nodeValue 属性包含属性值。</p>
<p>nodeValue 属性对于文档节点和元素节点是不可用的。</p>
<p>３．nodeType</p>
<p>nodeType 属性可返回节点的类型。</p>
<hr /><br />
</p><p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/dysph.js"></script></div>
<div class="downbox clearfix">
<div class="ico"><img src="https://js.51dongshi.net/tpl/pc2/images/document.png" alt="文档"></div>
<div class="txt">
<h4>HTMLDOM基础知识-*茉莉花开*</h4>
<div class="co">HTMLDOM基础知识-*茉莉花开*:HTML DOM基础知识 一、什么是DOM？ 1、HTML DOM 定义了访问和操作HTML文档的标准方法。 2、HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。 3、通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上</div>
<div class="tj"><b>推荐度：</b><div class="tj_stars_list"><i class="tj_stars tj_05"></i></div></div>
</div>
<div class="btn">
<a href="javascript:;" class="html2word" data-model="article" data-id="addvrr" title="文档下载">
<b>点击下载本文</b>
<span>文档为doc格式</span>
</a>
</div>
</div>
<script>keji_detail_ga('article_content_bottom');</script>
<div class="tvideo_tag">
标签：
<a href="/tlist-173009/">基本</a>
<a href="/tlist-246007/">html</a>
<a href="/tlist-363498/">基础</a>
</div>
<div class="tvideo_box tvideo_box_tab">
<div class="hd">
<ul><li class="on">热门焦点</li><script>keji_detail_ga('hot_jiaodian_tab_title');</script></ul>
</div>
<div class="bd">
<ul class="ult_jpic clearfix">
<script>get_hot_jiaodian_content('wz_hot_jiaodian',33,'hot',1);</script>
</ul>
</div>
</div>
</div>
<!--中间文章 end-->
<!--右侧专题 star-->
<div class="ult_zt">
<script>keji_detail_ga('article_right_top');</script>
<div class="ult_ztbox">
<h4>最新推荐</h4>
<ul class="tvideo_r_a clearfix">
<script>get_detail_right('wz_right_new',33,'')</script>
</ul>
</div>
<script>keji_detail_ga('article_right_middle');</script>
<div class="ult_ztbox">
<h4>猜你喜欢</h4>
<ul class="telist_rb clearfix">
<script>get_detail_right('wz_right_love',33,'')</script>
</ul>
</div>
<script>keji_detail_ga('article_right_new_bottom');</script>
<div class="ult_ztbox">
<h4>热门推荐</h4>
<ul class="tvideo_r_b clearfix">
<script>get_detail_right('wz_right_hot',33,'')</script>
</ul>
</div>
<script>keji_detail_ga('article_right_bottom');</script>
</div>
<!--右侧专题 end-->
<div style="display:none"><a href="https://www.51dongshi.net/wzztf/ad/addvrr/">专题</a>
</div>
</div>
</div>
<script src="https://js.51dongshi.net/plug/qrcode/qrcode.min.js"></script>
<script src="https://js.51dongshi.net/js/share.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/waypoints.min.js"></script>
<script type="text/javascript" src="https://js.51dongshi.net/tpl/pc2/js/icon_step.js"></script>
<style>
#qrcode{padding: 15px;background: #fff;}
</style>
<div id="qrcode" style="display: none"></div>
<script>new QRCode(document.getElementById("qrcode"), "https://m.51dongshi.net/eedfaddvrr.html");</script>
<iframe src="https://hits.51dongshi.net/?biao=ho_article&id=922711" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe>
<script src="https://js.51dongshi.net/js/shHighlighter.js"></script>
<link rel="stylesheet" href="https://jss.51dongshi.net/js/fffz/css/box.css">
<script id="fffz" data-domain="//www.51dongshi.net/index" src="https://js.51dongshi.net/js/fffz/fffz.js"></script>
<script type="text/javascript" src="https://jss.51dongshi.net/pcwz/tj.js"></script>
<div style="display:none"><script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?4b1ebb0298b66c8a109db070c4878833";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<!--foot star-->
<div class="footer">
<div class="m_box">
<div class="footer_in">
<a href="#" target="_blank">产品服务</a>
<a href="#" target="_blank">发展历程</a>
<a href="#" target="_blank">企业资讯</a>
<a href="#" target="_blank">企业文化</a>
<a href="#" target="_blank">关于我们</a>
<a href="#" target="_blank">加入我们</a>
<a href="#" target="_blank">联系我们</a>
<a href="#" target="_blank">网站导航</a>
<a href="#" target="_blank">网站律师</a>
</div>
<ul class="ftrlist">
<li>
<a rel="nofollow" href="https://www.itrust.org.cn" target="_blank">
<img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo01.gif" alt="中国互联网协会"></a>
</li>
<li>
<a rel="nofollow" href="https://www.12377.cn/" target="_blank">
<img src="https://js.51dongshi.net/tpl/pc2/images/12377logo.png" alt="中国互联网举报中心"></a>
</li>
<li>
<a rel="nofollow" href="http://www.cyberpolice.cn/" target="_blank">
<img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo05.gif" alt="网络110报警服务"></a>
</li>
<li>
<a rel="nofollow" href="http://www.creditchina.gov.cn/" target="_blank">
<img src="https://js.51dongshi.net/tpl/pc2/images/creditchina.gif" alt="信用中国"></a>
</li>
<li class="last">
<a rel="nofollow" href="http://www.shdf.gov.cn/shdf/channels/740.html" target="_blank">
<img src="https://js.51dongshi.net/tpl/pc2/images/footer_logo11.png" alt="中国扫黄打非网"><p>中国扫黄打非网</p>
</a>
</li>
</ul>
<div class="footer_co">
<a href="/" class="footlogo"><img src="https://js.51dongshi.net/tpl/pc2/images/logo.png" alt="动视"></a>
<p>Copyright © 2019-2025 <a href="/" target="_blank">51dongshi.net</a> 版权所有</p>
<p>
<a rel="nofollow" target="_blank" href="https://beian.miit.gov.cn/">赣ICP备2023002352号-34</a>
</p>
<p>违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务</p>
</div>
</div>
</div>
<!--foot end-->
<a href="#0" class="cd-top">Top</a>
<script type="text/javascript">
$(function(){
var _line=parseInt($(window).height()/3);
$(window).scroll(function(){
if ($(window).scrollTop()>100) {
$('.edu_top').css({'position':'fixed','top':'0','z-index':'99'})
}else{
$('.edu_top').css({'position':'relative','top':'0'})
}
})
})
</script>
<script type="text/javascript" src="https://jss.51dongshi.net/ga/all.js"></script>
</body>
</html>
