Web前端技術(shù)(JavaScript+jQuery) 課件 任務(wù)11 驗證用戶注冊頁面信息_第1頁
Web前端技術(shù)(JavaScript+jQuery) 課件 任務(wù)11 驗證用戶注冊頁面信息_第2頁
Web前端技術(shù)(JavaScript+jQuery) 課件 任務(wù)11 驗證用戶注冊頁面信息_第3頁
Web前端技術(shù)(JavaScript+jQuery) 課件 任務(wù)11 驗證用戶注冊頁面信息_第4頁
Web前端技術(shù)(JavaScript+jQuery) 課件 任務(wù)11 驗證用戶注冊頁面信息_第5頁
已閱讀5頁，還剩30頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

Web前端技術(shù)主講人：XXX

XXX學(xué)院任務(wù)11驗證用戶注冊頁面信息【知識目標(biāo)】

理解DOM的概念；

了解什么是DOM樹；

掌握獲取DOM元素的方法；

掌握操作DOM元素內(nèi)容的方法；

掌握操作DOM元素屬性的方法；

掌握操作DOM元素樣式的方法?！炯寄苣繕?biāo)】

能夠根據(jù)實際需求選擇合適的方法獲取DOM元素；

能夠根據(jù)需求操作DOM元素的內(nèi)容；

能夠根據(jù)需求操作DOM元素的屬性；

能夠根據(jù)需求操作DOM元素的樣式?！舅刭|(zhì)目標(biāo)】

培養(yǎng)學(xué)生分析問題、解決問題能力；

培養(yǎng)學(xué)生無私奉獻(xiàn)、創(chuàng)新發(fā)展、吃苦耐勞的“三?！本?；

樹立學(xué)生社會主義核心價值觀。教學(xué)目標(biāo)知識導(dǎo)圖DOM概述DOM（DocumentObjectModel）,即文檔對象模型，它是W3C（WorldWideWebConsortium，萬維網(wǎng)聯(lián)盟）

推薦的處理可擴(kuò)展標(biāo)記語言（HTML或者XML）的標(biāo)準(zhǔn)編程接口，通過這些接口可以獲取頁面的元素，并能夠?qū)@些元素的內(nèi)容、屬性、樣式等進(jìn)行操作。為了更好地理解并應(yīng)用DOM，需要了解以下這些名詞的意義。文檔（document）：一個頁面就是一個文檔。元素（element）：頁面中的標(biāo)簽。節(jié)點（node）：網(wǎng)頁中的所有內(nèi)容都是節(jié)點，如標(biāo)簽、屬性、文本、注釋等，在DOM中，節(jié)點使用node來表示。（1）什么是DOMDOM樹（DocumentObjectModelTree）是指網(wǎng)頁文檔中所有元素的層次結(jié)構(gòu)。每個HTML標(biāo)簽、屬性、文本都作為一個節(jié)點在DOM樹中表示，它們都是一個對象，可以通過JavaScript或其他腳本語言進(jìn)行訪問和操作。DOM樹從網(wǎng)頁的根節(jié)點開始，逐級向下表示網(wǎng)頁的結(jié)構(gòu)。根節(jié)點對應(yīng)的是HTML文檔的<!DOCTYPEhtml>標(biāo)簽，接著是<html>標(biāo)簽，然后是<head>標(biāo)簽和<body>標(biāo)簽，<body>標(biāo)簽中又可以包括其他的標(biāo)簽，最后是文本節(jié)點。這些節(jié)點可以相互包含和嵌套，形成一個樹狀結(jié)構(gòu)。（2）什么是DOM樹使用document.getElementById()獲取元素document.getElementById()方法是根據(jù)元素的id屬性來獲取DOM元素。該方法返回文檔中與指定id匹配的第一個元素，如果找不到匹配的元素則返回null。使用document.getElementById()獲取元素<body>用戶名：<inputtype="text"id="username"/><script>letusername=document.getElementById('username');console.log(username)</script></body>【案例】獲取頁面上的文本域使用document.querySelector()獲取元素document.querySelector()方法是根據(jù)CSS選擇器來選取DOM元素，它返回文檔中與指定選擇器或選擇器組匹配的第一個元素，如果找不到則返回null，示例代碼如下。<p>第1個段落</p><p>第2個段落</p><pclass="p3">第3個段落</p><pid="p4">第4個段落</p><script>letele1=document.querySelector('p');console.log(ele1);//控制臺輸出結(jié)果：<p>第1個段落</p>letele2=document.querySelector('.p3');console.log(ele2);//控制臺輸出結(jié)果：<pclass="p3">第3個段落</p>letele3=document.querySelector('#p4');console.log(ele3);//控制臺輸出結(jié)果：<pid="p4">第4個段落</p></script>使用document.querySelector()獲取元素使用document.getElementsByTagName()獲取元素document.getElementsByTagName()方法是根據(jù)HTML的標(biāo)簽名來獲取元素，它返回文檔中與指定標(biāo)簽名匹配的HTML元素集合。如果需要獲取集合中的某個元素，需要結(jié)合索引來獲取，示例代碼如下。<p>第1個段落</p><p>第2個段落</p><p>第3個段落</p><p>第4個段落</p><script>letps=document.getElementsByTagName("p")console.log(ps);//輸出HTML集合PSconsole.log(ps[2]);//輸出HTML集合中的第3個元素</script>使用document.getElementsByTagName()獲取元素使用document.getElementsByName()獲取元素document.getElementsByName()是根據(jù)name屬性來獲取元素，它返回文檔中與指定name屬性匹配的節(jié)點列表NodeList，通常用來獲取表單元素。如果需要獲取節(jié)點列表中的某個元素，需要結(jié)合索引來獲取，示例代碼如下。<p>請選擇你的意向崗位（多選）：</p><p><label><inputtype="checkbox"name="work"value="網(wǎng)頁設(shè)計師">網(wǎng)頁設(shè)計師</label><label><inputtype="checkbox"name="work"value="網(wǎng)站程序員">網(wǎng)站程序員</label><label><inputtype="checkbox"name="work"value="網(wǎng)絡(luò)管理員">網(wǎng)絡(luò)管理員</label><label><inputtype="checkbox"name="work"value="網(wǎng)絡(luò)工程師">網(wǎng)絡(luò)工程師</label></p><script>letworks=document.getElementsByName("work");console.log(works);//輸出HTML集合PSconsole.log(works[2]);//輸出HTML集合中的第3個元素</script>使用document.getElementsByName()獲取元素使用document.getElementsByClassName()獲取元素document.getElementsByClassName()方法是通過class屬性（類名）來獲取元素，它返回文檔中與指定類名匹配的HTML元素集合。如果需要獲取集合中的某個元素，需要結(jié)合索引來獲取，示例代碼如下。使用document.getElementsByClassName()獲取元素<p>你的期末成績?nèi)缦拢?lt;/p><p><spanclass="subject">語文：</span><spanclass="score">89</span></p><p><spanclass="subject">數(shù)學(xué)：</span><spanclass="score">55</span></p><p><spanclass="subject">英文：</span><spanclass="score">95</span></p><script>letsubjects=document.getElementsByClassName("subject");letscores=document.getElementsByClassName("score");console.log(subjects);console.log(scores);subjects[1].style.fontWeight='bold';scores[1].style.color='red';</script>使用document.querySelectorAll()獲取元素document.querySelectorAll()方是通過CSS選擇器來獲取元素，它返回與指定CSS選擇器匹配的所有元素節(jié)點列表，如果需要獲取列表中的某個元素，需要結(jié)合索引來獲取，示例代碼如下。<h3>詠柳</h3><p>君不見，黃河之水天上來，奔流到海不復(fù)回。</p><p>君不見，高堂明鏡悲白發(fā)，朝如青絲暮成雪。</p><p>人生得意須盡歡，莫使金樽空對月。</p><p>天生我材必有用，千金散盡還復(fù)來。</p><script>letcontent=document.querySelectorAll("p")console.log(content)content[3].style.color='red'</script>使用document.querySelectorAll()獲取元素操作DOM元素內(nèi)容在JavaScript中，操作元素的內(nèi)容，主要是通過操作DOM元素的innerHTML、innerText和textContent屬性來實現(xiàn)的，具體如表11-1所示?！景咐枯敵鎏崾拘畔?lt;p>商品價格：<spanclass="price"><b>12.5</b></span>元</p><p>

商品數(shù)量：<inputtype="text"name="num"><spanid="tip"></span></p>操作DOM元素內(nèi)容獲取DOM元素屬性方法1：元素對象.屬性名稱該種方法只能獲取內(nèi)置屬性的屬性值。方法2：元素對象.getAttribute('屬性名')該種方法既可以獲取內(nèi)置屬性的值，也可以獲取自定義屬性的值，推薦使用此種方法。方法3：元素對象.dataset.屬性名該種方法是HTML5新增的方法，主要針對使用HTML5定義的屬性（屬性名的前綴為“data-”），在使用時需去掉前綴，并使用駝峰命名法。另外在使用時，需要注意兼容性問題，如IE瀏覽器從IE11才開始支持。（1）獲取DOM元素屬性的方法【案例】獲取input元素屬性<inputtype="text"name="user"myid="demo"data-myindex="1"><script>letuser=document.querySelector('input');console.log();//結(jié)果為：userconsole.log(user.getAttribute('name'))//結(jié)果為：userconsole.log(user.myid);//結(jié)果為：undefinedconsole.log(user.getAttribute('myid'))//結(jié)果為：democonsole.log(user.getAttribute('data-myindex'));//結(jié)果為：1console.log(user.dataset.myindex);//結(jié)果為：1</script>（2）獲取DOM元素屬性案例設(shè)置DOM元素屬性方法1：元素對象.屬性名稱='屬性值'該種方法只能設(shè)置內(nèi)置屬性的屬性值。方法2：元素對象.setAttribute('屬性名稱','屬性值')該種方法既可以設(shè)置內(nèi)置屬性的值，也可以設(shè)置自定義屬性的值，推薦使用此種方法。方法3：元素對象.dataset.屬性名='屬性值'該種方法是HTML5新增的使用方法，主要針對使用HTML5定義的屬性，即只能設(shè)置以“data-”作為前綴的自定義屬性。（1）設(shè)置DOM元素的方法案例1：設(shè)置div元素屬性<divclass="box">設(shè)置屬性值</div><script>letbox=document.querySelector('.box');box.id='mybox';//設(shè)置內(nèi)置屬性id的值box.abc='test';//設(shè)置自定義屬性值（無效）box.setAttribute('test','demo');//設(shè)置自定義屬性值box.setAttribute('data-myindex',3)//設(shè)置自定義屬性值box.dataset.yourIndex=4;//設(shè)置自定義屬性值（HTML5新增用法）</script>（2）設(shè)置DOM元素案例案例2：單擊按鈕切換不同圖片，效果如下圖所示。（2）設(shè)置DOM元素案例案例3：操作input元素的disabled屬性實現(xiàn)對input元素的可用性進(jìn)行控制。（2）設(shè)置DOM元素案例移除DOM元素屬性移除元素屬性的語法格式如下。元素對象.removeAttribute('屬性名稱')<divid="test"class="top"index="2"data-subtop="yes">移除屬性</div><script>letdiv=document.querySelector('div’);div.removeAttribute('id’);div.removeAttribute('class’);div.removeAttribute('index’);div.removeAttribute('data-subtop');</script>移除DOM元素的方法操作DOM元素style屬性<imgsrc="images/11-4.jpg"><script>letimg=document.querySelector("img");img.style.borderRadius='50%';img.style.border='1pxsolidlightgray'img.style.padding='20px';img.style.boxShadow='5px6p

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論