版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
JavaScript程序設計20211課程導入2任務導入3知識講解4任務實施項目5-3節點基礎和操作5任務總結知識回顧任務導入知識講解任務實施任務總結獲取元素的方法有幾種?document.getElementsByTagName()獲取的元素是什么數據類型？提問知識回顧任務導入知識講解任務實施任務總結任務重難點完成下拉菜單完成簡易留言板重點：節點基礎節點操作知識回顧任務導入知識講解任務實施任務總結節點基礎1.節點基礎
1.1
什么是節點HTML文檔可以看作是一個節點樹，網頁中的所有內容都是節點，一般來說，節點至少擁有nodeType（節點類型）、nodeName（節點名稱）和nodeValue（節點值）這3個基本屬性。下面列舉常見的節點類型：元素節點，nodeType為1屬性節點，nodeType為2文本節點，nodeType為3，文本節點包含文字、空格、換行等知識回顧任務導入知識講解任務實施任務總結節點基礎
1.2
節點層級一個HTML文件可以看作是所有元素組成的一個節點樹，各元素節點之間有級別的劃分。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>測試</title></head><body><ahref="#">鏈接</a><p>段落...</p></body></html>知識回顧任務導入知識講解任務實施任務總結節點基礎DOM根據HTML中各節點的不同作用，可將其分別劃分為標簽節點（元素節點）、文本節點和屬性節點。節點之間的層級關系如下：根節點：<html>標簽是整個文檔的根節點，有且僅有一個父節點：指的是某一個節點的上級節點子節點：指的是某一個節點的下級節點兄弟節點：兩個節點同屬于一個父節點知識回顧任務導入知識講解任務實施任務總結節點基礎1.3獲取節點屬性說明firstChild訪問當前節點的首個子節點lastChild訪問當前節點的最后一個子節點nodeName訪問當前節點名稱nodeValue訪問當前節點的值nextSibiling返回同一樹層級中指定節點之后緊跟的節點previousSibling返回同一樹層級中指定節點的前一個節點parentNode訪問當前元素節點的父節點childNodes訪問當前元素節點的所有子節點的集合知識回顧任務導入知識講解任務實施任務總結節點基礎獲取父級節點在JavaScript中，可以使用parentNode屬性來獲得離當前元素的最近的一個父節點，如果找不到父節點就返回為
null，語法格式為：obj.parentNode，obj是一個DOM對象。<body>
<div
class="demo">
<div
class="box"><span
class="child">span元素</span></div>
</div>
<script>
var
child=
document.querySelector('.child');//獲取類名為child的span元素
console.log(child.parentNode);//輸出離child元素最近的父級節點(box)
</script></body>示例代碼案例演示：如何獲取當前元素的父節點。知識回顧任務導入知識講解任務實施任務總結節點基礎獲取子級節點在JavaScript中，可以使用childNodes屬性或者children屬性兩種方式來獲得當前元素的所有子節點的集合，接下來我們就分別介紹這兩種方式的用法。方式1：childNodes屬性獲得的是當前元素的所有子節點的集合，該集合為即時更新的集合。下面通過案例的形式演示如何獲取當前元素子節點。知識回顧任務導入知識講解任務實施任務總結節點基礎<ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><script>
var
ul
=
document.querySelector('ul');
var
lis
=
ul.querySelectorAll('li');console.log(lis)
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);</script>示例代碼案例演示：如何使用childNodes屬性獲取當前元素的子節點。知識回顧任務導入知識講解任務實施任務總結節點基礎注意childNodes屬性返回的是NodeList對象的集合，返回值里面包含了元素節點、文本節點等其他類型的節點。知識回顧任務導入知識講解任務實施任務總結節點基礎方式2：children是一個可讀的屬性，返回所有子元素節點。children只返回子元素節點，其余節點不返回，目前各大瀏覽器都支持該屬性，在實際開發中推薦使用children。接下來，通過案例的形式演示如何獲取當前元素子節點。<ol>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li></ol>HTML代碼案例演示：如何使用children屬性獲取當前元素的子節點。<script>
var
ul
=
document.querySelector('ol');
var
lis
=
ul.querySelectorAll('li');
console.log(ul.children);//結果為：HTMLCollection(4)
[li,li,li,li]</script>JS代碼知識回顧任務導入知識講解任務實施任務總結節點基礎值得一提childNodes屬性與children屬性雖然都可以獲取某元素的子元素，但是兩者之間有一定的區別。前者用于節點操作，返回值是NodeList對象集合，后者用于元素操作，返回的是HTMLCollection對象集合。知識回顧任務導入知識講解任務實施任務總結節點基礎方式3：使用firstChild屬性和lastChild屬性獲取子節點，前者返回第一個子節點，后者返回的是最后一個子節點，如果找不到則返回null。需要注意的是它們的返回值包括文本節點和元素節點等。方式4：使用firstElementChild屬性和lastElementChild屬性獲取子元素節點，前者返回第一個子元素節點，后者返回最后一個子元素節點，如果找不到則返回null。需要注意的是，這兩個屬性有兼容性問題，IE9以上才支持。知識回顧任務導入知識講解任務實施任務總結節點基礎注意實際開發中，firstChild和lastChild包含其他節點，操作不方便，而firstElementChild和lastElementChild又有兼容性問題，為了解決兼容性問題，在實際開發中通常使用“obj.children[索引]”的方式來獲取子元素節點。obj.children[0] //獲取第一個子元素節點obj.children[obj.children.length-1]//獲取最后一個子元素節點示例代碼知識回顧任務導入知識講解任務實施任務總結節點基礎獲取兄弟節點在JavaScript中，可以使用nextSibling屬性獲得下一個兄弟節點，或者使用previousSibling屬性獲得上一個兄弟節點，它們的返回值包含元素節點或者文本節點等。如果找不到，就返回null?？梢允褂胣extElementSibling返回當前元素的下一個兄弟元素節點，previousElementSibling屬性返回當前元素的上一個兄弟元素節點，如果找不到則返回null。需要注意的是，這兩個屬性有兼容性問題，IE9以上才支持。實際開發中，nextSibling和previousSibling屬性返回值都包含其他節點，操作不方便，而nextElementSibling和previousElementSibling又有兼容性問題。為了解決兼容性問題，在實際開發中通常使用封裝函數來處理兼容性。知識回顧任務導入知識講解任務實施任務總結節點基礎function
getNextElementSibling(element){
var
el
=
element;
while
(el
=
el.nextSibling){
if(el.nodeType
===
1){
return
el;}}
return
null;}示例代碼知識回顧任務導入知識講解任務實施任務總結節點基礎
【案例】下拉菜單<body>
<ul
class="nav">
<li><a
href="#">微博</a>
<ul></ul>
</li>...（此處省略3個li）
</ul></body>示例代碼案例需求：鼠標指針經過菜單時，顯示當前下拉框中的內容同時隱藏其他下拉菜單內容編寫HTML結構代碼知識回顧任務導入知識講解任務實施任務總結節點基礎<script>
var
nav
=
document.querySelector('.nav');//
1.
獲取元素
var
lis
=
nav.children;
for
(var
i
=
0;
i
<
lis.length;
i++)
lis[i].onmouseover
=
function()
{{//
2.注冊鼠標指針經過和鼠標指針離開事件
this.children[1].style.display
=
'block';//ul為li的第2個子元素
};
lis[i].onmouseout
=
function()
{this.children[1].style.display
=
'none';};
}</script>示例代碼鼠標經過，展示當前下拉列表內容知識回顧任務導入知識講解任務實施任務總結節點基礎瀏覽器預覽效果圖如下所示：下拉菜單效果知識回顧任務導入知識講解任務實施任務總結節點操作方法說明document.createElement()創建元素節點document.createTextNode()創建文本節點document.createAttribute()創建屬性節點appendChild()在指定元素的子節點列表的末尾添加一個節點insertBefore()為當前節點增加一個子節點（插入到指定子節點之前）getAttributeNode()返回指定名稱的屬性節點setAttributeNode() 設置或者改變指定名稱的屬性節點create系列的方法是由document對象提供的，與Node對象無關。2.節點操作知識回顧任務導入知識講解任務實施任務總結節點操作
2.1
創建節點在DOM中，使用document.createElement('tagName')方法創建由tagName指定的HTML元素，也稱為動態創建元素節點。動態創建元素節點的3種常見方式如下：document.write()創建元素，如果頁面文檔流加載完畢，再調用會導致頁面重繪element.innerHTML將內容寫入某個DOM節點，不會導致頁面全部重繪document.createElement()創建多個元素效率稍微低一點，但是結構更加清晰知識回顧任務導入知識講解任務實施任務總結節點操作
2.2
添加和刪除節點DOM中，提供了node.appendChild()和node.insertBefore()方法用于添加節點，node.removeChild(child)用于刪除節點。下面講解這3種方法的使用。appendChild()方法，將一個節點添加到指定父節點的子節點列表末尾insertBefore(child,指定元素)方法，將一個節點添加到父節點的指定子節點前面removeChild(child)用于刪除節點，該方法從DOM中刪除一個子節點，返回刪除的節點知識回顧任務導入知識講解任務實施任務總結節點操作
【案例】簡易留言板案例分析：利用節點的創建、添加和刪除相關知識完成一個簡易的留言板功能。在頁面中實現單擊“發布”按鈕動態創建一個li元素，添加到ul里面。案例實現步驟如下：編寫HTML結構，完成頁面布局<body>
<textarea
name=""
id=""></textarea>//用戶輸入留言
<button>發布</button>
<ul></ul>//用于展示留言模塊</body>示例代碼知識回顧任務導入知識講解任務實施任務總結節點操作添加留言功能：獲取元素<script>//
1.
獲取元素
var
btn
=
document.querySelector('button');
var
text
=
document.querySelector('textarea');
var
ul
=
document.querySelector('ul');</script>示例代碼知識回顧任務導入知識講解任務實施任務總結節點操作btn.onclick
=
function()
{
if
(text.value
==
'')
{
alert('您沒有輸入內容');
return
false;
}
else
{
//
(1)
創建元素
var
li
=
document.createElement('li');li.innerHTML
=
text.value;
ul.insertBefore(li,
ul.children[0]);//
(2)
添加元素//…(3)此處編寫刪除留言功能
}
};示例代碼添加留言功能：注冊事件，添加留言知識回顧任務導入知識講解任務實施任務總結節點操作瀏覽器預覽效果圖如下所示：添加留言知識回顧任務導入知識講解任務實施任務總結節點操作刪除留言功能：首先在添加li時，給li中增加一個a鏈接，給所有的a鏈接注冊單擊事件，找到a的父節點li，進行刪除即可。修改第（2）步中代碼，找到如下所示代碼li.innerHTML
=
text.value;修改為li.innerHTML
=
text.value
+
'<a
href="javascript:;">刪除</a>';知識回顧任務導入知識講解任務實施任務總結節點操作//在(3)處編寫以下代碼var
as
=
document.querySelectorAll('a');for
(var
i
=
0;
i
<
as.length;
i++)
{
as[i].onclick
=
function()
{
ul.removeChild(this.parentNode);
};}示例代碼刪除留言功能：注冊事件，刪除留言知識回顧任務導入知識講解任務實施任務總結節點操作瀏覽器預覽效果圖如下所示：刪除留言知識回顧任務導入知識講解任務實施任務總結節點操作
2.3
復制節點在DOM中，提供了node.clon
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025員工雇傭合同協議
- 2024年新疆第十二師招聘特崗教師考試真題
- 2024年湖北省住房和城鄉建設廳下屬事業單位真題
- 2024年漯河醫學高等?？茖W校招聘工作人員真題
- 自助售票機定制化服務行業跨境出海項目商業計劃書
- 遠程重癥監護系統行業深度調研及發展項目商業計劃書
- 醫藥包裝材料回收機行業深度調研及發展項目商業計劃書
- 2025年二手電商平臺信用評級與信用修復機制研究報告
- DB1302T 532-2021 農業社會化服務 生產資料供給服務規范
- 2025年動漫產業鏈協同創新與產業品牌建設實施報告
- 《中華人民共和國職業分類大典》（2022年版）各行業職業表格統計版（含數字職業）
- 鎢的冶煉工藝與應用
- 《消防安全技能培訓》課件
- EXCEL函數培訓課件
- 貴州貴州貴安發展集團有限公司招聘真題
- 鹽城市首屆“金聯杯”防范和打擊非法金融活動競賽練習卷含答案（一）
- 老年病人防跌倒護理對策論文
- 糖尿病足課件
- 頂管工作井最小尺寸的確定及頂力計算書
- 早產兒母乳強化劑使用專家共識解讀課件
- 體育營銷策劃方案
評論
0/150
提交評論