版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
JavaScript程序設(shè)計(jì)20211課程導(dǎo)入2任務(wù)導(dǎo)入3知識(shí)講解4任務(wù)實(shí)施項(xiàng)目5-3節(jié)點(diǎn)基礎(chǔ)和操作5任務(wù)總結(jié)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)獲取元素的方法有幾種?document.getElementsByTagName()獲取的元素是什么數(shù)據(jù)類型？提問(wèn)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)重難點(diǎn)完成下拉菜單完成簡(jiǎn)易留言板重點(diǎn)：節(jié)點(diǎn)基礎(chǔ)節(jié)點(diǎn)操作知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)1.節(jié)點(diǎn)基礎(chǔ)
1.1
什么是節(jié)點(diǎn)HTML文檔可以看作是一個(gè)節(jié)點(diǎn)樹(shù)，網(wǎng)頁(yè)中的所有內(nèi)容都是節(jié)點(diǎn)，一般來(lái)說(shuō)，節(jié)點(diǎn)至少擁有nodeType（節(jié)點(diǎn)類型）、nodeName（節(jié)點(diǎn)名稱）和nodeValue（節(jié)點(diǎn)值）這3個(gè)基本屬性。下面列舉常見(jiàn)的節(jié)點(diǎn)類型：元素節(jié)點(diǎn)，nodeType為1屬性節(jié)點(diǎn)，nodeType為2文本節(jié)點(diǎn)，nodeType為3，文本節(jié)點(diǎn)包含文字、空格、換行等知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)
1.2
節(jié)點(diǎn)層級(jí)一個(gè)HTML文件可以看作是所有元素組成的一個(gè)節(jié)點(diǎn)樹(shù)，各元素節(jié)點(diǎn)之間有級(jí)別的劃分。<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>測(cè)試</title></head><body><ahref="#">鏈接</a><p>段落...</p></body></html>知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)DOM根據(jù)HTML中各節(jié)點(diǎn)的不同作用，可將其分別劃分為標(biāo)簽節(jié)點(diǎn)（元素節(jié)點(diǎn)）、文本節(jié)點(diǎn)和屬性節(jié)點(diǎn)。節(jié)點(diǎn)之間的層級(jí)關(guān)系如下：根節(jié)點(diǎn)：<html>標(biāo)簽是整個(gè)文檔的根節(jié)點(diǎn)，有且僅有一個(gè)父節(jié)點(diǎn)：指的是某一個(gè)節(jié)點(diǎn)的上級(jí)節(jié)點(diǎn)子節(jié)點(diǎn)：指的是某一個(gè)節(jié)點(diǎn)的下級(jí)節(jié)點(diǎn)兄弟節(jié)點(diǎn)：兩個(gè)節(jié)點(diǎn)同屬于一個(gè)父節(jié)點(diǎn)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)1.3獲取節(jié)點(diǎn)屬性說(shuō)明firstChild訪問(wèn)當(dāng)前節(jié)點(diǎn)的首個(gè)子節(jié)點(diǎn)lastChild訪問(wèn)當(dāng)前節(jié)點(diǎn)的最后一個(gè)子節(jié)點(diǎn)nodeName訪問(wèn)當(dāng)前節(jié)點(diǎn)名稱nodeValue訪問(wèn)當(dāng)前節(jié)點(diǎn)的值nextSibiling返回同一樹(shù)層級(jí)中指定節(jié)點(diǎn)之后緊跟的節(jié)點(diǎn)previousSibling返回同一樹(shù)層級(jí)中指定節(jié)點(diǎn)的前一個(gè)節(jié)點(diǎn)parentNode訪問(wèn)當(dāng)前元素節(jié)點(diǎn)的父節(jié)點(diǎn)childNodes訪問(wèn)當(dāng)前元素節(jié)點(diǎn)的所有子節(jié)點(diǎn)的集合知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)獲取父級(jí)節(jié)點(diǎn)在JavaScript中，可以使用parentNode屬性來(lái)獲得離當(dāng)前元素的最近的一個(gè)父節(jié)點(diǎn)，如果找不到父節(jié)點(diǎn)就返回為
null，語(yǔ)法格式為：obj.parentNode，obj是一個(gè)DOM對(duì)象。<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元素最近的父級(jí)節(jié)點(diǎn)(box)
</script></body>示例代碼案例演示：如何獲取當(dāng)前元素的父節(jié)點(diǎn)。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)獲取子級(jí)節(jié)點(diǎn)在JavaScript中，可以使用childNodes屬性或者children屬性兩種方式來(lái)獲得當(dāng)前元素的所有子節(jié)點(diǎn)的集合，接下來(lái)我們就分別介紹這兩種方式的用法。方式1：childNodes屬性獲得的是當(dāng)前元素的所有子節(jié)點(diǎn)的集合，該集合為即時(shí)更新的集合。下面通過(guò)案例的形式演示如何獲取當(dāng)前元素子節(jié)點(diǎn)。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)<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屬性獲取當(dāng)前元素的子節(jié)點(diǎn)。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)注意childNodes屬性返回的是NodeList對(duì)象的集合，返回值里面包含了元素節(jié)點(diǎn)、文本節(jié)點(diǎn)等其他類型的節(jié)點(diǎn)。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)方式2：children是一個(gè)可讀的屬性，返回所有子元素節(jié)點(diǎn)。children只返回子元素節(jié)點(diǎn)，其余節(jié)點(diǎn)不返回，目前各大瀏覽器都支持該屬性，在實(shí)際開(kāi)發(fā)中推薦使用children。接下來(lái)，通過(guò)案例的形式演示如何獲取當(dāng)前元素子節(jié)點(diǎn)。<ol>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li></ol>HTML代碼案例演示：如何使用children屬性獲取當(dāng)前元素的子節(jié)點(diǎn)。<script>
var
ul
=
document.querySelector('ol');
var
lis
=
ul.querySelectorAll('li');
console.log(ul.children);//結(jié)果為：HTMLCollection(4)
[li,li,li,li]</script>JS代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)值得一提childNodes屬性與children屬性雖然都可以獲取某元素的子元素，但是兩者之間有一定的區(qū)別。前者用于節(jié)點(diǎn)操作，返回值是NodeList對(duì)象集合，后者用于元素操作，返回的是HTMLCollection對(duì)象集合。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)方式3：使用firstChild屬性和lastChild屬性獲取子節(jié)點(diǎn)，前者返回第一個(gè)子節(jié)點(diǎn)，后者返回的是最后一個(gè)子節(jié)點(diǎn)，如果找不到則返回null。需要注意的是它們的返回值包括文本節(jié)點(diǎn)和元素節(jié)點(diǎn)等。方式4：使用firstElementChild屬性和lastElementChild屬性獲取子元素節(jié)點(diǎn)，前者返回第一個(gè)子元素節(jié)點(diǎn)，后者返回最后一個(gè)子元素節(jié)點(diǎn)，如果找不到則返回null。需要注意的是，這兩個(gè)屬性有兼容性問(wèn)題，IE9以上才支持。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)注意實(shí)際開(kāi)發(fā)中，firstChild和lastChild包含其他節(jié)點(diǎn)，操作不方便，而firstElementChild和lastElementChild又有兼容性問(wèn)題，為了解決兼容性問(wèn)題，在實(shí)際開(kāi)發(fā)中通常使用“obj.children[索引]”的方式來(lái)獲取子元素節(jié)點(diǎn)。obj.children[0] //獲取第一個(gè)子元素節(jié)點(diǎn)obj.children[obj.children.length-1]//獲取最后一個(gè)子元素節(jié)點(diǎn)示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)獲取兄弟節(jié)點(diǎn)在JavaScript中，可以使用nextSibling屬性獲得下一個(gè)兄弟節(jié)點(diǎn)，或者使用previousSibling屬性獲得上一個(gè)兄弟節(jié)點(diǎn)，它們的返回值包含元素節(jié)點(diǎn)或者文本節(jié)點(diǎn)等。如果找不到，就返回null?？梢允褂胣extElementSibling返回當(dāng)前元素的下一個(gè)兄弟元素節(jié)點(diǎn)，previousElementSibling屬性返回當(dāng)前元素的上一個(gè)兄弟元素節(jié)點(diǎn)，如果找不到則返回null。需要注意的是，這兩個(gè)屬性有兼容性問(wèn)題，IE9以上才支持。實(shí)際開(kāi)發(fā)中，nextSibling和previousSibling屬性返回值都包含其他節(jié)點(diǎn)，操作不方便，而nextElementSibling和previousElementSibling又有兼容性問(wèn)題。為了解決兼容性問(wèn)題，在實(shí)際開(kāi)發(fā)中通常使用封裝函數(shù)來(lái)處理兼容性。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)function
getNextElementSibling(element){
var
el
=
element;
while
(el
=
el.nextSibling){
if(el.nodeType
===
1){
return
el;}}
return
null;}示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)
【案例】下拉菜單<body>
<ul
class="nav">
<li><a
href="#">微博</a>
<ul></ul>
</li>...（此處省略3個(gè)li）
</ul></body>示例代碼案例需求：鼠標(biāo)指針經(jīng)過(guò)菜單時(shí)，顯示當(dāng)前下拉框中的內(nèi)容同時(shí)隱藏其他下拉菜單內(nèi)容編寫HTML結(jié)構(gòu)代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)<script>
var
nav
=
document.querySelector('.nav');//
1.
獲取元素
var
lis
=
nav.children;
for
(var
i
=
0;
i
<
lis.length;
i++)
lis[i].onmouseover
=
function()
{{//
2.注冊(cè)鼠標(biāo)指針經(jīng)過(guò)和鼠標(biāo)指針離開(kāi)事件
this.children[1].style.display
=
'block';//ul為li的第2個(gè)子元素
};
lis[i].onmouseout
=
function()
{this.children[1].style.display
=
'none';};
}</script>示例代碼鼠標(biāo)經(jīng)過(guò)，展示當(dāng)前下拉列表內(nèi)容知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)基礎(chǔ)瀏覽器預(yù)覽效果圖如下所示：下拉菜單效果知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)操作方法說(shuō)明document.createElement()創(chuàng)建元素節(jié)點(diǎn)document.createTextNode()創(chuàng)建文本節(jié)點(diǎn)document.createAttribute()創(chuàng)建屬性節(jié)點(diǎn)appendChild()在指定元素的子節(jié)點(diǎn)列表的末尾添加一個(gè)節(jié)點(diǎn)insertBefore()為當(dāng)前節(jié)點(diǎn)增加一個(gè)子節(jié)點(diǎn)（插入到指定子節(jié)點(diǎn)之前）getAttributeNode()返回指定名稱的屬性節(jié)點(diǎn)setAttributeNode() 設(shè)置或者改變指定名稱的屬性節(jié)點(diǎn)create系列的方法是由document對(duì)象提供的，與Node對(duì)象無(wú)關(guān)。2.節(jié)點(diǎn)操作知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)操作
2.1
創(chuàng)建節(jié)點(diǎn)在DOM中，使用document.createElement('tagName')方法創(chuàng)建由tagName指定的HTML元素，也稱為動(dòng)態(tài)創(chuàng)建元素節(jié)點(diǎn)。動(dòng)態(tài)創(chuàng)建元素節(jié)點(diǎn)的3種常見(jiàn)方式如下：document.write()創(chuàng)建元素，如果頁(yè)面文檔流加載完畢，再調(diào)用會(huì)導(dǎo)致頁(yè)面重繪element.innerHTML將內(nèi)容寫入某個(gè)DOM節(jié)點(diǎn)，不會(huì)導(dǎo)致頁(yè)面全部重繪document.createElement()創(chuàng)建多個(gè)元素效率稍微低一點(diǎn)，但是結(jié)構(gòu)更加清晰知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)操作
2.2
添加和刪除節(jié)點(diǎn)DOM中，提供了node.appendChild()和node.insertBefore()方法用于添加節(jié)點(diǎn)，node.removeChild(child)用于刪除節(jié)點(diǎn)。下面講解這3種方法的使用。appendChild()方法，將一個(gè)節(jié)點(diǎn)添加到指定父節(jié)點(diǎn)的子節(jié)點(diǎn)列表末尾insertBefore(child,指定元素)方法，將一個(gè)節(jié)點(diǎn)添加到父節(jié)點(diǎn)的指定子節(jié)點(diǎn)前面removeChild(child)用于刪除節(jié)點(diǎn)，該方法從DOM中刪除一個(gè)子節(jié)點(diǎn)，返回刪除的節(jié)點(diǎn)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)操作
【案例】簡(jiǎn)易留言板案例分析：利用節(jié)點(diǎn)的創(chuàng)建、添加和刪除相關(guān)知識(shí)完成一個(gè)簡(jiǎn)易的留言板功能。在頁(yè)面中實(shí)現(xiàn)單擊“發(fā)布”按鈕動(dòng)態(tài)創(chuàng)建一個(gè)li元素，添加到ul里面。案例實(shí)現(xiàn)步驟如下：編寫HTML結(jié)構(gòu)，完成頁(yè)面布局<body>
<textarea
name=""
id=""></textarea>//用戶輸入留言
<button>發(fā)布</button>
<ul></ul>//用于展示留言模塊</body>示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)操作添加留言功能：獲取元素<script>//
1.
獲取元素
var
btn
=
document.querySelector('button');
var
text
=
document.querySelector('textarea');
var
ul
=
document.querySelector('ul');</script>示例代碼知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)操作btn.onclick
=
function()
{
if
(text.value
==
'')
{
alert('您沒(méi)有輸入內(nèi)容');
return
false;
}
else
{
//
(1)
創(chuàng)建元素
var
li
=
document.createElement('li');li.innerHTML
=
text.value;
ul.insertBefore(li,
ul.children[0]);//
(2)
添加元素//…(3)此處編寫刪除留言功能
}
};示例代碼添加留言功能：注冊(cè)事件，添加留言知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)操作瀏覽器預(yù)覽效果圖如下所示：添加留言知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)操作刪除留言功能：首先在添加li時(shí)，給li中增加一個(gè)a鏈接，給所有的a鏈接注冊(cè)單擊事件，找到a的父節(jié)點(diǎn)li，進(jìn)行刪除即可。修改第（2）步中代碼，找到如下所示代碼li.innerHTML
=
text.value;修改為li.innerHTML
=
text.value
+
'<a
href="javascript:;">刪除</a>';知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)操作//在(3)處編寫以下代碼var
as
=
document.querySelectorAll('a');for
(var
i
=
0;
i
<
as.length;
i++)
{
as[i].onclick
=
function()
{
ul.removeChild(this.parentNode);
};}示例代碼刪除留言功能：注冊(cè)事件，刪除留言知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)操作瀏覽器預(yù)覽效果圖如下所示：刪除留言知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)節(jié)點(diǎn)操作
2.3
復(fù)制節(jié)點(diǎn)在DOM中，提供了node.clon
溫馨提示
- 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 民宿景區(qū)特色民宿租賃及民宿旅游品牌授權(quán)合同
- 工業(yè)互聯(lián)網(wǎng)平臺(tái)入侵檢測(cè)系統(tǒng)2025年安全防護(hù)技術(shù)創(chuàng)新與挑戰(zhàn)報(bào)告
- 2025會(huì)議場(chǎng)地租賃合同
- 2025年中級(jí)會(huì)計(jì)欺詐審查相關(guān)試題及答案
- 合伙法人撤資協(xié)議書(shū)
- 員工利潤(rùn)提成協(xié)議書(shū)
- 勞動(dòng)關(guān)系解約協(xié)議書(shū)
- 醫(yī)療設(shè)備通訊協(xié)議書(shū)
- 司機(jī)送車合同協(xié)議書(shū)
- 占地施工賠償協(xié)議書(shū)
- 高一上冊(cè)物理壓軸題考卷01（解析版）-2024-2025學(xué)年高中物理《壓軸挑戰(zhàn)》培優(yōu)專題訓(xùn)練（人教版2019必修第一冊(cè)）
- Qt 5 開(kāi)發(fā)及實(shí)例（第5版） 課件 第7章 Qt 5繪圖及實(shí)例
- 《健康評(píng)估技術(shù)》課件-糖尿病評(píng)估
- 安全負(fù)責(zé)人崗位競(jìng)聘
- 《消防安全操作規(guī)程》
- 冰敷在臨床工作應(yīng)用
- T-GXAS 689-2024 重大基礎(chǔ)設(shè)施項(xiàng)目涉及風(fēng)景名勝區(qū)選址論證報(bào)告編制技術(shù)規(guī)范
- 2024下半年四川省中江縣事業(yè)單位招聘30人歷年管理單位遴選500模擬題附帶答案詳解
- 信貸準(zhǔn)入資格考試練習(xí)測(cè)試題附答案
- 2024年山東省德州市中考地理試題卷
- T∕CACE 0118-2024 改性磷石膏混合料道路穩(wěn)定基層應(yīng)用技術(shù)規(guī)程
評(píng)論
0/150
提交評(píng)論