版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領
文檔簡介
JavaScript程序設計20211課程導入2任務導入3知識講解4任務實施項目5-1DOM簡介和獲取5任務總結知識回顧任務導入知識講解任務實施任務總結數組對象怎么實例化？字符串對象怎么實例化？提問知識回顧任務導入知識講解任務實施任務總結任務重難點練習獲取元素重點：WebAPIDOM樹獲取元素知識回顧任務導入知識講解任務實施任務總結WebAPI簡介1.WebAPI簡介WebAPI是瀏覽器提供的一套操作瀏覽器功能和頁面元素的接口。JavaScript語言由3部分組成，分別是ECMAScript、BOM和DOM，其中ECMAScript是JavaScript語言的核心，而WebAPI包括BOM和DOM兩部分。
1.1
初識WebAPIJavaScript的組成部分知識回顧任務導入知識講解任務實施任務總結WebAPI簡介API：應用程序編程接口，是一些預先定義的函數，這些函數是由某個軟件開放給開發人員使用的，幫助開發者實現某種功能，開發人員無須訪問源碼、無須理解其內部工作機制細節，只需知道如何使用即可。例如，調起手機的攝像頭拍攝畫面。1.2
WebAPI與API的關系知識回顧任務導入知識講解任務實施任務總結WebAPI簡介WebAPI：主要針對瀏覽器的API，在JavaScript語言中被封裝成了對象，通過調用對象的屬性和方法就可以使用WebAPI。例如，console對象、document對象、window對象。document.title='設置新標題'; //設置頁面標題console.log(document.title); //獲取頁面標題document.write('<h1>網頁內容</h1>');//將字符串寫入頁面示例代碼知識回顧任務導入知識講解任務實施任務總結DOM簡介2.1
什么是DOMDOM：文檔對象模型，是W3C組織推薦的處理可擴展標記語言（HTML或者XML）的標準編程接口。W3C定義了一系列的DOM接口，利用DOM可完成對HTML文檔內所有元素的獲取、訪問、標簽屬性和樣式的設置等操作。在實際開發中，諸如改變盒子的大小、標簽欄的切換、購物車功能等帶有交互效果的頁面，都離不開DOM。2.DOM簡介知識回顧任務導入知識講解任務實施任務總結DOM簡介2.2DOM樹DOM中將HTML文檔視為樹結構，被稱之為文檔樹模型，把文檔映射成樹形結構，通過節點對象對其處理，處理的結果可以加入到當前的頁面。DOM樹知識回顧任務導入知識講解任務實施任務總結DOM簡介接下來針對DOM中各節點的專有名詞解釋如下：文檔（document）：可以把一個頁面當成一個文檔元素（element）：頁面中的所有標簽都是元素節點（node）：網頁中的所有內容，在文檔樹中都是節點（如：元素節點、屬性節點、文本節點、注釋節點等），在DOM中會把所有的節點都看作是對象，這些對象擁有自己的屬性和方法知識回顧任務導入知識講解任務實施任務總結獲取元素3.1
根據id獲取元素document.getElementById('id')方法，是由document對象提供的用于查找元素的方法，該方法返回的是擁有指定id的元素，如果沒有找到指定id的元素則返回null，如果存在多個指定id的元素則返回undefined。<divid="box">你好</div><script>varObox=document.getElementById('box');console.log(Obox); //結果為：<divid="box">你好</script>示例代碼3.獲取元素知識回顧任務導入知識講解任務實施任務總結獲取元素3.2
根據標簽獲取元素根據標簽名獲取元素的兩種方式：可以通過document對象獲取元素和通過element對象獲取元素。document.getElementsByTagName('標簽名');element.getElementsByTagName('標簽名');語法結構由于相同標簽名的元素可能有多個，上述方法返回的不是單個元素對象，而是一個集合。這個集合是一個類數組對象，或稱為偽數組，它可以像數組一樣用索引來訪問元素，但不能使用push()等方法，使用Array.isArray()也可以證明它不是一個數組。知識回顧任務導入知識講解任務實施任務總結獲取元素注意getElementsByTagName()方法獲取到的集合是動態集合，也就是說，當頁面增加了標簽，這個集合中也會自動增加元素。知識回顧任務導入知識講解任務實施任務總結獲取元素
3.3
根據name獲取元素document.getElementsByName()方法，是通過name屬性來獲取元素，一般用于獲取表單元素。name屬性的值不要求必須是唯一的，多個元素也可以有同樣的名字，如表單中的單選框和復選框。document.getElementsByName('name名');語法結構知識回顧任務導入知識講解任務實施任務總結獲取元素<body><p>請選擇你最喜歡的水果（多選）</p><label><inputtype="checkbox"name="fruit"value="蘋果">蘋果</label><label><inputtype="checkbox"name="fruit"value="香蕉">香蕉</label><label><inputtype="checkbox"name="fruit"value="西瓜">西瓜</label><script>varfruits=document.getElementsByName('fruit');
//返回對象集合fruits[0].checked=true;//將fruits中的第1個元素的checked屬性值設置為true</script></body>示例代碼案例需求：在復選框中選擇最喜歡的水果（多選）。知識回顧任務導入知識講解任務實施任務總結獲取元素根據name獲取元素知識回顧任務導入知識講解任務實施任務總結獲取元素
3.4
HTML5新增的獲取方式HTML5中為document對象新增了querySelector()、querySelectorAll()和getElementsByClassName()方法。注意：這三種方式在使用時需要考慮到瀏覽器的兼容性問題。知識回顧任務導入知識講解任務實施任務總結獲取元素根據類名獲取document.getElementsByClassName()方法，用于通過類名來獲得某些元素集合。<body><spanclass="one">英語</span><spanclass="two">數學</span><spanclass="one">語文</span><spanclass="two">物理</span><script>varOspan1=document.getElementsByClassName('one');varOspan2=document.getElementsByClassName('two');Ospan1[0].style.fontWeight='bold';Ospan2[1].style.background='red';</script></body>示例代碼知識回顧任務導入知識講解任務實施任務總結獲取元素通過類名獲取元素知識回顧任務導入知識講解任務實施任務總結獲取元素querySelector()和querySelectorAll()querySelector()方法用于返回指定選擇器的第一個元素對象。querySelectorAll()方法返回指定選擇器的所有元素對象集合。<body><divclass="box">盒子1</div><divclass="box">盒子2</div><divid="nav"><ul><li>首頁</li><li>產品</li></ul></div></body>結構代碼類名：boxid名：nav知識回顧任務導入知識講解任務實施任務總結獲取元素<script>varfirstBox=document.querySelector('.box');console.log(firstBox);//獲取class為box的第1個divvarnav=document.querySelector('#nav');console.log(nav);//獲取id為nav的第1個divvarli=document.querySelector('li');console.log(li);//獲取匹配到的第一個livarallBox=document.querySelectorAll('.box');console.log(allBox);//獲取class為box的所有divvarlis=document.querySelectorAll('li');console.log(lis);//獲取匹配到的所有li</script>JS代碼通過CSS選擇器獲取元素知識回顧任務導入知識講解任務實施任務總結獲取元素
3.5
document對象的屬性document對象提供了一些屬性，可用于獲取文檔中的元素。例如，獲取所有表單標簽、圖片標簽等，document對象的常用屬性如下表：方法作用document.body返回文檔的body元素document.title返回文檔的title元素document.documentElement返回文檔的html元素document.forms返回對文檔中所有Form對象引用document.images返回對文檔中所有Image對象引用知識回顧任務導入知識講解任務實施任務總結練習獲取頁面元素知識回顧任務導入知識講解任務實施任務總結總結：本章主要講解了WebAPI的基本概念，如何利用DOM方式在JavaScript中獲取元素，并實例演示。
作業：完成練習獲取元素。1課程導入2任務導入3知識講解4任務實施項目5-2節點基礎和操作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。可以使用nextElementSibling返回當前元素的下一個兄弟元素節點，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）步中
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
- 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
- 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 服務與溝通考試題及答案
- 內陸養殖循環農業的水資源高效利用研究考核試卷
- 苯板試驗室考試題及答案
- 晉煤面試試題及答案
- 電工復審考試題庫及答案
- 城鄉市場流通一體化推進
- 二級特許合同模板
- 2025-2031年中國汽車商業綜合體行業市場全景調研及發展前景研判報告
- 代維考試試題、題庫（室分題庫）（選擇）網絡知識部分
- DB3411-T 0008-2022 公共圖書館服務外包要求
- 華為員工招聘管理制度
- 天津市四校聯考2023-2024學年高一下學期7月期末考試化學試卷（含答案）
- BIM技術在建筑項目施工工藝優化中的應用報告
- 2025-2031年中國材料預浸料行業市場深度研究及發展趨勢預測報告
- 2025年中級會計考生資源分享及答案
- 2025年全國保密教育線上培訓考試試題庫及參考答案（完整版）附帶答案詳解
- 商場攤位購買合同協議
- 2024年泉州實驗中學初一新生入學考試數學試卷
- 2025年第二屆全國安康杯安全生產知識競賽題庫及答案（共190題）
- 護士法律法規知識培訓課件
- 2025年光伏行業上半年發展回顧與下半年形勢展望
評論
0/150
提交評論