資訊專欄INFORMATION COLUMN
摘要：最近在找春季實習生工作，為了準備實習面試筆試，開通屬于自己的專欄來記錄自己的學習過程，同時也是為了檢驗自己是否真正的理解了學習的知識點。一概念今天學習的是中的操作。二節(jié)點在中節(jié)點包括以下幾種元素節(jié)點文本節(jié)點屬性節(jié)點。
最近在找春季實習生工作，為了準備實習面試筆試，開通屬于自己的專欄來記錄自己的學習過程，同時也是為了檢驗自己是否真正的理解了學習的知識點。
一、DOM概念
今天學習的是JavaScript中的DOM操作。說起DOM操作，首先我們需要知道什么是DOM，DOM也叫文檔對象模型，其中D代表的是Document,即文檔；O代表的是Object,即對象；M代表的是model，即模型。
所謂模型，其實就是某種事物的表現(xiàn)形式，就像是一個火車模型代表的是真是的火車一樣，DOM代表的是加載到瀏覽器并呈現(xiàn)在用戶眼前的網(wǎng)頁。DOM把一份文檔表示成一棵樹，叫做DOM樹。既然有了樹的概念，那就還有根，父節(jié)點，子節(jié)點，兄弟節(jié)點的概念了。在下面的網(wǎng)頁中我們看一個例子：
這是測試例子
- 例子
- 例子
段落測試
以上例子我們可以看到，標簽為根標簽，接下來
和標簽屬于的子元素或者是子節(jié)點，在標簽中，又是<head>的子標簽，<body>中<div>是其子標簽，<div>標簽中<ul>與上面的p標簽都是其子元素，而這兩者是兄弟元素關(guān)系。 <br>以上就是一個典型的文檔樹關(guān)系。<br>二、節(jié)點<br>在DOM中節(jié)點包括以下幾種：<br>元素節(jié)點；文本節(jié)點；屬性節(jié)點。<br>元素節(jié)點：<br>文檔樹中諸如<head><body><ul>等叫做元素節(jié)點，標簽的名字就是元素的節(jié)點名字；<br>文本節(jié)點：<br>上面說的元素節(jié)點是一種結(jié)構(gòu)節(jié)點，如果一個文檔中全部是元素節(jié)點則不會顯示任何內(nèi)容，網(wǎng)頁中的大部分的內(nèi)容都是通過文本節(jié)點展現(xiàn)出來的。文本節(jié)點總是包含在元素節(jié)點內(nèi)部。<br>屬性節(jié)點：<br>屬性節(jié)點用來對元素做出更加詳細的描述。幾乎每個元素節(jié)點都會有一個title屬性，用來描述該元素節(jié)點是用來干什么的。<br>三、DOM的相關(guān)操作<br>1、獲取元素<br>獲取元素有三種方法可以獲得：<br>(1)getElementById()該方法接收一個參數(shù)，這個參數(shù)是元素的id屬性值，該方法返回一個id屬性值為相應值的元素對象<br>(2)getElementByTagName()改方法也接收一個參數(shù)，參數(shù)為元素名稱，該方法返回的是一個對象數(shù)組。即使匹配的元素只有一個同樣也會是數(shù)組類型，只是數(shù)組長度為1。<br>(3)getElementByClass()該方法接收一個參數(shù)，即元素屬性為class的值，該方法也返回一個數(shù)組。<br>未完待續(xù)</p>
</div>
<div id="6a22guqa" class="mt-64 tags-seach" >
<div id="6a22guqa" class="tags-info">
<a style="width:120px;" title="GPU云服務器" href="http://m.hztianpu.com/site/product/gpu.html">GPU云服務器</a>
<a style="width:120px;" title="云服務器" href="http://m.hztianpu.com/site/active/kuaijiesale.html?ytag=seo">云服務器</a>
<a style="width:120px;" title="js中操作dom節(jié)點" href="http://m.hztianpu.com/yun/tag/jszhongcaozuodomjiedian/">js中操作dom節(jié)點</a>
<a style="width:120px;" title="js操作dom對象" href="http://m.hztianpu.com/yun/tag/jscaozuodomduixiang/">js操作dom對象</a>
<a style="width:120px;" title="js中dom刷新頁面" href="http://m.hztianpu.com/yun/tag/jszhongdomshuaxinyemian/">js中dom刷新頁面</a>
<a style="width:120px;" title="Dom操作" href="http://m.hztianpu.com/yun/tag/Domcaozuo/">Dom操作</a>
</div>
</div>
<div id="6a22guqa" class="entry-copyright mb-30">
<p class="mb-15"> 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。</p>
<p>轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/49816.html</p>
</div>
<ul class="pre-next-page">
<li id="6a22guqa" class="ellipsis"><a class="hpf" href="http://m.hztianpu.com/yun/49815.html">上一篇：《每周一點canvas動畫》——三角函數(shù)</a></li>
<li id="6a22guqa" class="ellipsis"><a class="hpf" href="http://m.hztianpu.com/yun/49817.html">下一篇：Angularjs學習筆記指令</a></li>
</ul>
</div>
<div id="6a22guqa" class="about_topicone-mid">
<h3 class="top-com-title mb-0"><span data-id="0">相關(guān)文章</span></h3>
<ul class="com_white-left-mid atricle-list-box">
<li>
<div id="6a22guqa" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://m.hztianpu.com/yun/106918.html"><b>javascript高級學習<em>總結(jié)</em>（二）</b></a></h2>
<p class="ellipsis2 good">摘要：那個率先改變的實例的返回值，就會傳遞給的回調(diào)函數(shù)。函數(shù)對函數(shù)的改進，體現(xiàn)在以下四點內(nèi)置執(zhí)行器。進一步說，函數(shù)完全可以看作多個異步操作，包裝成的一個對象，而命令就是內(nèi)部命令的語法糖。中的本質(zhì)就是沒有的隱藏的組件。
1、原型 - jquery使用showImg(https://segmentfault.com/img/bVbwNcY?w=692&h=442);注釋 : 實例雖然不同，但是構(gòu)...</p>
<div id="6a22guqa" class="com_white-left-info">
<div id="6a22guqa" class="com_white-left-infol">
<a href="http://m.hztianpu.com/yun/u-217.html"><img src="http://m.hztianpu.com/yun/data/avatar/000/00/02/small_000000217.jpg" alt=""><span id="6a22guqa" class="layui-hide64">Songlcy</span></a>
<time datetime="">2019-08-26 10:58</time>
<span><i class="fa fa-commenting"></i>評論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="6a22guqa" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://m.hztianpu.com/yun/79159.html"><b><em>JS</em><em>中</em><em>DOM</em><em>操作</em><em>總結(jié)</em></b></a></h2>
<p class="ellipsis2 good">摘要：最近在找春季實習生工作，為了準備實習面試筆試，開通屬于自己的專欄來記錄自己的學習過程，同時也是為了檢驗自己是否真正的理解了學習的知識點。一概念今天學習的是中的操作。二節(jié)點在中節(jié)點包括以下幾種元素節(jié)點文本節(jié)點屬性節(jié)點。
最近在找春季實習生工作，為了準備實習面試筆試，開通屬于自己的專欄來記錄自己的學習過程，同時也是為了檢驗自己是否真正的理解了學習的知識點。
一、DOM概念
今天學習的是Ja...</p>
<div id="6a22guqa" class="com_white-left-info">
<div id="6a22guqa" class="com_white-left-infol">
<a href="http://m.hztianpu.com/yun/u-351.html"><img src="http://m.hztianpu.com/yun/data/avatar/000/00/03/small_000000351.jpg" alt=""><span id="6a22guqa" class="layui-hide64">Jacendfeng</span></a>
<time datetime="">2019-08-19 18:04</time>
<span><i class="fa fa-commenting"></i>評論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="6a22guqa" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://m.hztianpu.com/yun/94918.html"><b>vue常用知識點<em>總結(jié)</em></b></a></h2>
<p class="ellipsis2 good">摘要：這里借鑒了一下的處理方式，我們把單獨模塊的包裝成一個函數(shù)，提供一個全局的回調(diào)方法，加載完成時候再調(diào)用回調(diào)函數(shù)。
感謝本文引用鏈接的各位大佬們，小菜鳥我只是個搬運工
1.談一談你理解的vue是什么樣子的？
vue是數(shù)據(jù)、視圖分離的一個框架，讓數(shù)據(jù)與視圖間不會發(fā)生直接聯(lián)系。MVVM
組件化：把整體拆分為各個可以復用的個體
數(shù)據(jù)驅(qū)動：通過數(shù)據(jù)變化直接影響bom展示，避免dom操作。
可以在...</p>
<div id="6a22guqa" class="com_white-left-info">
<div id="6a22guqa" class="com_white-left-infol">
<a href="http://m.hztianpu.com/yun/u-1177.html"><img src="http://m.hztianpu.com/yun/data/avatar/000/00/11/small_000001177.jpg" alt=""><span id="6a22guqa" class="layui-hide64">xiaokai</span></a>
<time datetime="">2019-08-22 17:10</time>
<span><i class="fa fa-commenting"></i>評論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
<li>
<div id="6a22guqa" class="atricle-list-right">
<h2 class="ellipsis2"><a class="hpf" href="http://m.hztianpu.com/yun/91582.html"><b><em>JS</em>基礎篇--<em>JS</em>的<em>DOM</em><em>操作</em> - 你真的了解嗎?</b></a></h2>
<p class="ellipsis2 good">摘要：摘要想稍微系統(tǒng)的說說對于的操作把和常用操作的內(nèi)容歸納成思維導圖方便閱讀同時加入性能上的一些問題前言在前端開發(fā)的過程中極為重要的一個功能就是對對象的操作無論增刪改查在前端頁面操作這一范圍內(nèi)都是比較消耗性能的如何高效率的便捷的操作這就是本文要講
摘要
想稍微系統(tǒng)的說說對于DOM的操作,把Javascript和jQuery常用操作DOM的內(nèi)容歸納成思維導圖方便閱讀,同時加入性能上的一些問題....</p>
<div id="6a22guqa" class="com_white-left-info">
<div id="6a22guqa" class="com_white-left-infol">
<a href="http://m.hztianpu.com/yun/u-1215.html"><img src="http://m.hztianpu.com/yun/data/avatar/000/00/12/small_000001215.jpg" alt=""><span id="6a22guqa" class="layui-hide64">DirtyMind</span></a>
<time datetime="">2019-08-22 10:59</time>
<span><i class="fa fa-commenting"></i>評論0</span>
<span><i class="fa fa-star"></i>收藏0</span>
</div>
</div>
</div>
</li>
</ul>
</div>
<div id="6a22guqa" class="topicone-box-wangeditor">
<h3 class="top-com-title mb-64"><span>發(fā)表評論</span></h3>
<div id="6a22guqa" class="xcp-publish-main flex_box_zd">
<div id="6a22guqa" class="unlogin-pinglun-box">
<a href="javascript:login()" class="grad">登陸后可評論</a>
</div> </div>
</div>
<div id="6a22guqa" class="site-box-content">
<div id="6a22guqa" class="site-content-title">
<h3 class="top-com-title mb-64"><span>0條評論</span></h3>
</div>
<div id="6a22guqa" class="pages"></ul></div>
</div>
</div>
<div id="6a22guqa" class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right">
<div id="6a22guqa" class="">
<div id="6a22guqa" class="com_layuiright-box user-msgbox">
<a href="http://m.hztianpu.com/yun/u-347.html"><img src="http://m.hztianpu.com/yun/data/avatar/000/00/03/small_000000347.jpg" alt=""></a>
<h3><a href="http://m.hztianpu.com/yun/u-347.html" rel="nofollow">jifei</a></h3>
<h6>男<span>|</span>高級講師</h6>
<div id="6a22guqa" class="flex_box_zd user-msgbox-atten">
<a href="javascript:attentto_user(347)" id="attenttouser_347" class="grad follow-btn notfollow attention">我要關(guān)注</a>
<a href="javascript:login()" title="發(fā)私信" >我要私信</a>
</div>
<div id="6a22guqa" class="user-msgbox-list flex_box_zd">
<h3 class="hpf">TA的文章</h3>
<a href="http://m.hztianpu.com/yun/ut-347.html" class="box_hxjz">閱讀更多</a>
</div>
<ul class="user-msgbox-ul">
<li><h3 class="ellipsis"><a href="http://m.hztianpu.com/yun/124937.html">SSL加密為什么能保證安全</a></h3>
<p>閱讀 3267<span>·</span>2021-11-25 09:43</p></li>
<li><h3 class="ellipsis"><a href="http://m.hztianpu.com/yun/123015.html">ASEMI肖特基二極管SBT40100VDC正向壓降溫度系數(shù)</a></h3>
<p>閱讀 3506<span>·</span>2021-11-11 16:54</p></li>
<li><h3 class="ellipsis"><a href="http://m.hztianpu.com/yun/122823.html">#11.11#RackNerd：美國VPS年付$12起，洛杉磯/紐約等6機房可選</a></h3>
<p>閱讀 913<span>·</span>2021-11-02 14:42</p></li>
<li><h3 class="ellipsis"><a href="http://m.hztianpu.com/yun/121709.html">半月灣vps：美國CN2 GIA方案(DC5)機房,1Gbps帶寬,三網(wǎng)CN2 GIA線路,$109</a></h3>
<p>閱讀 3844<span>·</span>2021-09-30 09:58</p></li>
<li><h3 class="ellipsis"><a href="http://m.hztianpu.com/yun/121574.html">PuTTY – 老牌免費開源Windows SSH遠程客戶端軟件</a></h3>
<p>閱讀 3765<span>·</span>2021-09-29 09:44</p></li>
<li><h3 class="ellipsis"><a href="http://m.hztianpu.com/yun/117518.html">那些很熟卻又不是很熟的知識</a></h3>
<p>閱讀 1360<span>·</span>2019-08-30 15:56</p></li>
<li><h3 class="ellipsis"><a href="http://m.hztianpu.com/yun/117105.html">初級前端開發(fā)面試總結(jié)</a></h3>
<p>閱讀 2164<span>·</span>2019-08-30 15:54</p></li>
<li><h3 class="ellipsis"><a href="http://m.hztianpu.com/yun/116010.html">Vue源碼之目錄結(jié)構(gòu)</a></h3>
<p>閱讀 3049<span>·</span>2019-08-30 15:43</p></li>
</ul>
</div>
<!-- 文章詳情右側(cè)廣告-->
<div id="6a22guqa" class="com_layuiright-box">
<h6 class="top-com-title"><span>最新活動</span></h6>
<div id="6a22guqa" class="com_adbox">
<div id="6a22guqa" class="layui-carousel" id="right-item">
<div carousel-item>
<div>
<a href="http://m.hztianpu.com/site/active/kuaijiesale.html?ytag=seo" rel="nofollow">
<img src="http://m.hztianpu.com/yun/data/attach/240625/2rTjEHmi.png" alt="云服務器">
</a>
</div>
<div>
<a href="http://m.hztianpu.com/site/product/gpu.html" rel="nofollow">
<img src="http://m.hztianpu.com/yun/data/attach/240807/7NjZjdrd.png" alt="GPU云服務器">
</a>
</div>
</div>
</div>
</div> <!-- banner結(jié)束 -->
<div id="6a22guqa" class="adhtml">
</div>
</div> </div>
</div>
</div>
</div>
</section>
<!-- wap拉出按鈕 -->
<div id="6a22guqa" class="site-tree-mobile layui-hide">
<i class="layui-icon layui-icon-spread-left"></i>
</div>
<!-- wap遮罩層 -->
<div id="6a22guqa" class="site-mobile-shade"></div>
<!--付費閱讀 -->
<div class="6a22guqa" id="payread">
<div id="6a22guqa" class="layui-form-item">閱讀需要支付1元查看</div>
<div id="6a22guqa" class="layui-form-item"><button class="btn-right">支付并查看</button></div>
</div>
<link rel="stylesheet" type="text/css" href="http://m.hztianpu.com/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css">
<footer>
<div id="6a22guqa" class="layui-container">
<div id="6a22guqa" class="flex_box_zd">
<div id="6a22guqa" class="left-footer">
<h6><a href="http://m.hztianpu.com/"><img src="http://m.hztianpu.com/yun/static/theme/ukd//images/logo.png" alt="UCloud （優(yōu)刻得科技股份有限公司）"></a></h6>
<p>UCloud （優(yōu)刻得科技股份有限公司）是中立、安全的云計算服務平臺，堅持中立，不涉足客戶業(yè)務領(lǐng)域。公司自主研發(fā)IaaS、PaaS、大數(shù)據(jù)流通平臺、AI服務平臺等一系列云計算產(chǎn)品，并深入了解互聯(lián)網(wǎng)、傳統(tǒng)企業(yè)在不同場景下的業(yè)務需求，提供公有云、混合云、私有云、專有云在內(nèi)的綜合性行業(yè)解決方案。</p>
</div>
<div id="6a22guqa" class="right-footer layui-hidemd">
<ul class="flex_box_zd">
<li>
<h6>UCloud與云服務</h6>
<p><a href="http://m.hztianpu.com/site/about/intro/">公司介紹</a></p>
<p><a >加入我們</a></p>
<p><a href="http://m.hztianpu.com/site/ucan/onlineclass/">UCan線上公開課</a></p>
<p><a href="http://m.hztianpu.com/site/solutions.html" >行業(yè)解決方案</a></p> <p><a href="http://m.hztianpu.com/site/pro-notice/">產(chǎn)品動態(tài)</a></p>
</li>
<li>
<h6>友情鏈接</h6> <p><a >GPU算力平臺</a></p> <p><a >UCloud私有云</a></p>
<p><a >SurferCloud</a></p> <p><a >工廠仿真軟件</a></p> <p><a >AI繪畫</a></p>
<p><a >Wavespeed AI</a></p>
</li>
<li>
<h6>社區(qū)欄目</h6>
<p><a href="http://m.hztianpu.com/yun/column/index.html">專欄文章</a></p>
<p><a href="http://m.hztianpu.com/yun/udata/">專題地圖</a></p> </li>
<li>
<h6>常見問題</h6>
<p><a href="http://m.hztianpu.com/site/ucsafe/notice.html" >安全中心</a></p>
<p><a href="http://m.hztianpu.com/site/about/news/recent/" >新聞動態(tài)</a></p>
<p><a href="http://m.hztianpu.com/site/about/news/report/">媒體動態(tài)</a></p> <p><a href="http://m.hztianpu.com/site/cases.html">客戶案例</a></p>
<p><a href="http://m.hztianpu.com/site/notice/">公告</a></p>
</li>
<li>
<span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="優(yōu)刻得"></span>
<p>掃掃了解更多</p></div>
</div>
<div id="6a22guqa" class="copyright">Copyright ? 2012-2025 UCloud 優(yōu)刻得科技股份有限公司<i>｜</i><a rel="nofollow" >滬公網(wǎng)安備 31011002000058號</a><i>｜</i><a rel="nofollow" ></a> 滬ICP備12020087號-3</a><i>｜</i>
<!-- Global site tag (gtag.js) - Google Analytics -->
</div>
</div>
</footer>
<footer>
<div class="friendship-link">
<p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p>
<h1><a href="http://m.hztianpu.com/">成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码</a></h1>
<div class="friend-links">
</div>
</div>
</footer>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
</body><div id="pljlt" class="pl_css_ganrao" style="display: none;"><sup id="pljlt"><form id="pljlt"><rp id="pljlt"><font id="pljlt"></font></rp></form></sup><output id="pljlt"></output><legend id="pljlt"></legend><legend id="pljlt"><sup id="pljlt"><form id="pljlt"><rp id="pljlt"></rp></form></sup></legend><strike id="pljlt"><strong id="pljlt"></strong></strike><address id="pljlt"><legend id="pljlt"></legend></address><form id="pljlt"><legend id="pljlt"></legend></form><pre id="pljlt"></pre><dfn id="pljlt"><b id="pljlt"></b></dfn><ruby id="pljlt"><thead id="pljlt"></thead></ruby><sup id="pljlt"><form id="pljlt"><mark id="pljlt"><address id="pljlt"></address></mark></form></sup><label id="pljlt"><video id="pljlt"></video></label><dfn id="pljlt"></dfn><div id="pljlt"><ol id="pljlt"><label id="pljlt"><video id="pljlt"></video></label></ol></div><strong id="pljlt"><th id="pljlt"></th></strong><dl id="pljlt"><strong id="pljlt"></strong></dl><small id="pljlt"><meter id="pljlt"></meter></small><video id="pljlt"></video><i id="pljlt"><listing id="pljlt"><small id="pljlt"><menuitem id="pljlt"></menuitem></small></listing></i><video id="pljlt"><em id="pljlt"><meter id="pljlt"><ol id="pljlt"></ol></meter></em></video><big id="pljlt"></big><rp id="pljlt"><font id="pljlt"><div id="pljlt"><ol id="pljlt"></ol></div></font></rp><pre id="pljlt"><th id="pljlt"><b id="pljlt"><progress id="pljlt"></progress></b></th></pre><form id="pljlt"><rp id="pljlt"><font id="pljlt"><legend id="pljlt"></legend></font></rp></form><address id="pljlt"><legend id="pljlt"></legend></address><tt id="pljlt"></tt><address id="pljlt"></address><rp id="pljlt"></rp><em id="pljlt"></em><rp id="pljlt"></rp><strong id="pljlt"><dfn id="pljlt"></dfn></strong><ol id="pljlt"><label id="pljlt"></label></ol><tt id="pljlt"></tt><ruby id="pljlt"><sub id="pljlt"></sub></ruby><ruby id="pljlt"><sub id="pljlt"></sub></ruby><var id="pljlt"><u id="pljlt"></u></var><strike id="pljlt"><label id="pljlt"><optgroup id="pljlt"><ruby id="pljlt"></ruby></optgroup></label></strike><meter id="pljlt"></meter><legend id="pljlt"><dfn id="pljlt"></dfn></legend><progress id="pljlt"><acronym id="pljlt"><legend id="pljlt"><dfn id="pljlt"></dfn></legend></acronym></progress><track id="pljlt"><thead id="pljlt"><big id="pljlt"><dl id="pljlt"></dl></big></thead></track><meter id="pljlt"></meter><strike id="pljlt"><strong id="pljlt"><optgroup id="pljlt"><ruby id="pljlt"></ruby></optgroup></strong></strike><menuitem id="pljlt"><pre id="pljlt"></pre></menuitem><rp id="pljlt"><font id="pljlt"></font></rp><div id="pljlt"></div><ins id="pljlt"><address id="pljlt"><legend id="pljlt"><var id="pljlt"></var></legend></address></ins><output id="pljlt"></output><legend id="pljlt"><sup id="pljlt"><form id="pljlt"><rp id="pljlt"></rp></form></sup></legend><b id="pljlt"><progress id="pljlt"></progress></b></div>
<
</html>