版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)
文檔簡介
Web前端基礎(chǔ)技術(shù)CSSJSHTML第10章DOMContents目錄DOM事件與事件處理元素查詢元素的添加、修改和刪除綜合實例HTMLDOM是HTMLDocumentObjectModel(文檔對象模型)的縮寫，是HTML的標準對象模型和編程接口。當HTML文檔被加載時，瀏覽器會將其解析為一個樹狀結(jié)構(gòu)的DOM，DOM樹中的每一個節(jié)點都代表一個HTML元素（對象），包括文本、屬性，通過DOM接口，動態(tài)(實時)改變文檔的內(nèi)容。一、
什么是DOM執(zhí)行HTML元素的增、刪、查、改。改變頁面中的所有HTML元素的固有屬性，例如href、src、value等改變頁面中的所有CSS樣式屬性：例如style和class編程思路：獲取對象的屬性；設(shè)置對象的屬性；調(diào)用對象的方法。首先必須獲取對象---對象查詢，這樣，你就可以：獲取對象的屬性，例如表單元素的值，HTML元素的style屬性，例如寬度、高度或者，設(shè)置對象的屬性，從而改變元素的內(nèi)容和樣式或者，調(diào)用對象的方法，添加/修改元素，及其內(nèi)容、樣式等問題：代碼何時執(zhí)行？用戶對某個元素使用鼠標，或鍵盤操作時，將觸發(fā)元素的事件，在觸發(fā)元素事件時，執(zhí)行代碼。關(guān)鍵點：（1）處理常用事件，(2)查詢對象，(3)執(zhí)行操作（函數(shù)）。二、事件事件就是消息，是當用戶在元素(對象)上執(zhí)行了某些操作（鼠標、鍵盤）而觸發(fā)的消息；程序通過捕獲對象的消息來做出響應(yīng)。
(1)鼠標常用事件click：鼠標單擊事件dblclikc:鼠標雙擊事件mousedowm:鼠標按下事件mouseup：鼠標松開事件mouseover：鼠標懸停事件Mouseout：鼠標離開事件(2)文檔加載事件load：文檔加載完畢觸發(fā)的事件。通常代碼在文檔加載完畢后執(zhí)行。(3)表單常用事件change：表單元素輸入或選擇的內(nèi)容發(fā)生變化時觸發(fā)的事件，例如文本框輸入和列表框選擇發(fā)生改變。submit：表單提交時觸發(fā)的事件注意：所有的事件名都是小寫。三、對象查詢方法要對元素進行操作(讀/寫其屬性)，首先必須獲取該元素(對象查詢)。
常用查詢接口方法（document對象的方法）：1.根據(jù)對象的ID查詢：確定唯一的對象： getElementById(id)2.根據(jù)標記名查詢：集合對象；getElementsByTagName(標記名)3.根據(jù)樣式類名class進行查詢：集合對象
getElementsByClassName(類名)4.根據(jù)對象的name查詢：集合對象；getElementsByName(標記name屬性)注意：這里的集合對象可以當做數(shù)組來使用四、事件處理方式：1）內(nèi)聯(lián)方式；2）屬性方式；3）方法方式方式1.內(nèi)聯(lián)方式：直接在元素的標記中捕獲事件，并調(diào)用系統(tǒng)函數(shù)或自定義函數(shù)，或者直接執(zhí)行JS語句。方式2.屬性方式：獲取元素對象，為其事件屬性關(guān)聯(lián)處理函數(shù)，好處：代碼與元素分離方式3.方法方式：使用事件監(jiān)聽器，使用對象的方法來添加事件處理函數(shù)
。示例：以單擊按鈕為例，彈出自定義對話框；結(jié)合getElementById方法為例。<h3>打開對話框</h3><buttonid="bt1"onclick="myAlert()">內(nèi)聯(lián)方式</button><buttonid="bt2">查詢對象，使用對象的屬性方式關(guān)聯(lián)事件</button><buttonid="bt3">查詢對象，使用方法方式，動態(tài)添加事件</button>方式1：內(nèi)聯(lián)方式<script>//自定義彈出對話框函數(shù)
functionmyAlert(){alert("你好！JS!")}
//方法2：查詢對象，使用屬性方式關(guān)聯(lián)事件
varbt2=document.getElementById("bt2")
//bt2對象觸發(fā)click事件時，調(diào)用函數(shù)
bt2.onclick=myAlert//函數(shù)名
//方法3：查詢對象，使用方法方式關(guān)聯(lián)事件//這種方式可移除事件
varbt3=document.getElementById("bt3")bt3.addEventListener("click",myAlert)</script>移除事件：對象.removeEventListener("事件名",已關(guān)聯(lián)的函數(shù)名);方式2：對象事件屬性方式方式3：對象方法方式event：事件對象；包含事件觸發(fā)時的信息，其target屬性代表觸發(fā)事件的對象this：擁有該函數(shù)的對象，與event.target屬性相同，根據(jù)需要使用其中之一；示例：單擊html元素，獲取元素的id屬性；結(jié)合getElementById方法為例。<buttonid="bt1"onclick="getId(event,this,'hello!js!')">單擊我，獲取id屬性值</button><buttonid="bt2">單擊我，獲取id屬性值</button><buttonid="bt3">單擊我，獲取id屬性值</button>討論：關(guān)于事件參數(shù)，event和this<script>//當需要傳遞自定義參數(shù)時，使用;可以傳遞自定義參數(shù)
functiongetId(ev,obj,msg){alert(ev.target.id+","+obj.id+","+msg)}//event代表觸發(fā)的時間對象，this代表調(diào)用該函數(shù)的對象（bt2）varbt2=document.getElementById("bt2")bt2.onclick=function(){alert(event.target.id+","+this.id)}
//event代表觸發(fā)的時間對象，this代表調(diào)用該函數(shù)的對象(bt3)varbt3=document.getElementById("bt3")bt3.addEventListener("click",function(){alert(event.target.id+","+this.id)})</script>使用內(nèi)聯(lián)方式時，當需要獲取觸發(fā)事件的對象時，可以傳遞參數(shù)event，其屬性target代表該對象；也可以傳遞this作為參數(shù)，代表對象本身，相當event.target屬性值---觸發(fā)事件的對象根據(jù)需要決定是否傳遞參數(shù)注意：匿名方式無法移除事件以下以getElementById查詢元素為例，介紹如何獲取或設(shè)置對象的屬性標記及其內(nèi)容樣式屬性樣式類表單元素5.1文本屬性：HTML標記內(nèi)容的常用文本內(nèi)容屬性：innerText/innerHTML/outerHTML1.
innerText；-僅元素內(nèi)所有文本內(nèi)容2.
innerHTML：-標記內(nèi)部所有的HTML子標記及其文本，不包含自身標記；3.
outerHTML：-標記自身及所有的HTML子標記及其文本代碼分析：獲取div標記的內(nèi)容1.純文字內(nèi)容；2.標記包含的HTML內(nèi)容；3.整個標記HTML內(nèi)容五、獲取/設(shè)置HTML屬性-結(jié)合getElementById方法<divstyle="border:1pxsolidred;width:120px;"id="div"><p>段落文本</p><ahref="#">鏈接</a></div><buttononclick="getTag()">獲取div標記內(nèi)容</button><script>functiongetTag(){vardiv=document.getElementById("div")console.log(div.innerText)console.log(div.innerHTML)console.log(div.outerHTML)}</script>5.2樣式屬性style獲取或設(shè)置HTML元素的內(nèi)聯(lián)樣式屬性：對象.style.樣式屬性名示例：改變div樣式，使之成為紅色背景的圓；獲取div的邊框、寬度樣式屬性<body>
<divid="div1"
style="border:1pxsolidblue;"></div>
<buttononclick="changeStyle()">改變樣式，使之成為紅色的圓</button>
<buttononclick="getStyle()">獲取當前的邊框樣式</button>|
<buttononclick="getWH()">獲取當前的寬度和高度</button></body><style>
#div1{
width:60px;height:60px;
background-color:gray;
}</style>functionchangeStyle(){vardiv1=document.getElementById("div1")div1.style.backgroundColor="red"div1.style.borderRadius="50%"}
functiongetStyle(){vardiv1=document.getElementById("div1")alert(div1.style.border)}functiongetWH(){vardiv1=document.getElementById("div1")//元素沒有在style中設(shè)置寬度和高度
//varw=div1.style.width錯誤//varh=div1.style.height錯誤
//使用計算屬性
varstyle=getComputedStyle(div1)varw=style.widthvarh=style.heightalert(w+","+h)}所有元素都有樣式屬性：style；使用規(guī)則：將連字符去掉，后每個單詞首字母大寫：obj.style.backgroundColor="顏色值"如果是使用內(nèi)部樣式表，這種方式無法獲取樣式值，此時需要使用計算樣式方法：window.getComputedStyle(對象，”偽類名”)；只讀；參數(shù)2通常為null。注意，只有內(nèi)聯(lián)樣式的屬性，或動態(tài)添加的樣式，可以使用"style.屬性名"的方式獲??；5.3添加/刪除樣式類1.添加類:對象.classList.add("類名");2.刪除類:對象.classList.remove("類名");3.是否含某個類:對象.classList.contains("類名")示例：使用類屬性，單擊時在正方形和圓之間切換
<divclass="shaperect"id="shape"onclick="toggle()"></div>
<style>
.shape{width:100px;height:100px;border:2pxsolidred;}
.rect{border-radius:0;}
.circle{border-radius:50%;}</style><script>
varshape=document.getElementById("shape")
functiontoggle(){
if(shape.classList.contains("rect")){
shape.classList.remove("rect")
shape.classList.add("circle")
}
else{
shape.classList.remove("circle")
shape.classList.add("rect")
}
}</script>5.4表單元素屬性獲取或設(shè)置表單元素的屬性：對象.屬性名文本框：對象.value屬性示例：以文本框為例，獲取輸入的值請輸入姓名：<inputid="user"/><br/>請輸入密碼：<inputid="pwd"/><br/><buttononclick="getInput()">獲取文本框的值</button>結(jié)果為；<spanid="sp"></span><script>functiongetInput(){varuser=document.getElementById("user")varpwd=document.getElementById("pwd")varsp=document.getElementById("sp")
sp.innerText=user.value+","+pwd.value}</script>5.5獲取/設(shè)置表單元素屬性，結(jié)合getElementsByName方法使用根據(jù)name屬性名查詢,結(jié)果為集合對象，document.getElementsByName("name屬性名")示例判斷復(fù)選框是否被選中，顯示選中元素的值選擇性別：
<inputtype="radio"name="sex"value="男"/>男
<inputtype="radio"name="sex"value="女"/>女
<br/>
選擇愛好：
<inputtype="checkbox"name="hobby"value="運動"/>運動
<inputtype="checkbox"name="hobby"value="看書"/>看書
<inputtype="checkbox"name="hobby"value="美食"/>美食
<br/><buttononclick="getSelect()">查看選擇</button>
你的選擇：<spanid="sp"></span><br/>單選按鈕/復(fù)選框：對象.checked表示是否被選中；
對象.value表示該元素的值。
<script>varsex=document.getElementsByName("sex")varhobby=document.getElementsByName("hobby")varsp=document.getElementById("sp")varresult=""functiongetSelect(){result="性別："http://單選
for(vari=0;i<sex.length;i++){if(sex[i].checked){result+=sex[i].value
break}}//復(fù)選
result+="，興趣："for(vari=0;i<hobby.length;i++){if(hobby[i].checked)result+=hobby[i].value}sp.innerText=result}</script>5.4表單元素屬性下拉框：options[index].selected/options[index].value示例：以文本框和下拉框為例，獲取輸入和選擇的值文本框：<inputname="user"id="user"/>
下拉框:<selectname="city"id="city"multiplesize="1"><option>廣州</option><option>深圳</option><option>東莞</option></select><br/><buttononclick="getResult()">查看選擇</button>
<br/>
選擇結(jié)果是：<spanid="sp"></span><script>varuser=document.getElementById("user")varcity=document.getElementById("city")varsp=document.getElementById("sp")varresult=""
functiongetResult(){result=user.value+","for(vari=0;i<city.options.length;i++){if(city.options[i].selected){result+=city.options[i].value+","}}sp.innerText=result}</script>單選，可以直接使用city.value六、其他元素查詢方法document.getElementsByTagName("標記名")document.getElementsByClassName("類名")結(jié)果為集合對象，
可以使用循環(huán)結(jié)構(gòu)依次取出每一個元素七、通用查詢元素.querySelector("選擇器");//根據(jù)選擇器查詢元素，只找第一個符合條件的元素元素.querySelectorAll("選擇器“)//返回一個節(jié)點列表，可以作為數(shù)組使用例如：分別根據(jù)id、class和標記查詢元素.querySelector("#book")//根據(jù)id查詢
代替getElementById()元素.querySelector(".book")//根據(jù)類名查詢
代替getElementsByClassName()[0]元素.querySelector("div")//根據(jù)標記名查詢
代替getElemnetsByTagName()[0]這里的元素可以使document，也可以是任意已找到的元素示例
單擊列表項，獲取列表項的內(nèi)容（使用通用查詢方法）2八、元素操作：查詢、創(chuàng)建、添加、移除和復(fù)制元素8.1.1常用查詢接口（document對象的方法）1.根據(jù)對象的ID查詢：確定唯一的對象： getElementById(id)2.根據(jù)標記名查詢：集合對象； getElementsByTagName(標記名)3.根據(jù)樣式類名class進行查詢：集合對象
getElementsByClassName(類名)4.根據(jù)對象的name查詢：集合對象；getElementsByName(標記name屬性)5.通用查詢：querySelector|querySelectorAll8.1.2使用屬性查詢元素假定有：vardiv=document.getElementById(“id”)div.parentElement;//獲取父元素；
div.children;//屬性；所有直接子元素，集合對象div.previousElementSibling;//屬性：前一個相鄰的元素div.nextElementSibling；//屬性：下一個相鄰的元素,僅兄弟元素8.1.查詢方法<script>functiongetEle(){varmain=document.getElementById("main")varsps=document.getElementsByTagName("span")
varchild=main.childrenfor(vari=0;i<child.length;i++){sps[0].innerText+=child[i].tagName+","}varp1=document.getElementById('p1')sps[1].innerText=p1.parentElement.tagNamesps[2].innerText=p1.previousElementSibling.tagNamesps[3].innerText=p1.nextElementSibling.tagName
varp2=document.getElementById('p2')sps[4].innerText=p2.nextElementSibling?p2.nextElementSibling:'不存在'}</script><divid="main"style="border:1pxsolid#ccc"><h3id="h3">這是標題3</h3><pid="p1">這是段落1</p><pid="p2">這是段落2</p></div><p>div的子元素有：<spanid="sp1"></span></p><p>段落1的父元素是：<spanid="sp2"></span></p><p>段落1的上一個元素是：<spanid="sp3"></span></p><p>段落1的下一個元素是：<spanid="sp4"></span></p><p>段落2的下一個元素是：<spanid="sp5"></span></p><p><buttononclick="getEle()">獲取</button></p>代碼分析8.2創(chuàng)建元素document.createElement(“標記名”)（1）添加元素：父元素A.appendChild(新元素)//將新元素作為子元素添加到父元素末尾8.3添加/插入元素：新元素作為子元素varp=document.createElement(“p”)//創(chuàng)建p元素p.innerText=”這是一個新段落”//設(shè)置段落的文本varh3=document.createElement(“h3”)//創(chuàng)建h3元素h3.innerText=”這是標題3”//設(shè)置標題文本注意：創(chuàng)建的新元素不會顯示在頁面上，你需要使用以下的方法添加到文檔或插入到其他元素中documnet.body.appendChild(h3)documnet.body.appendChild(p)body表示HTML文檔的body元素示例：假如一個div包含一個
段落P，請創(chuàng)建一個H3，添加到P之前，然后創(chuàng)建一個新段落，添加到P之后。（2）插入新元素：父元素.insertBefore(元素A,元素B)//將元素A，插入到元素B之前注意：如果元素B為null，那么做為最后一個元素添加，這個時候與appendChild方法作用相同。<divid="div1"><pid="p1">這是一個段落</p></div><script>vardiv=document.querySelector("#div1");varp=document.querySelector("#p1");//創(chuàng)建H3元素
varh3_ele=document.createElement("h3");h3_ele.innerText="這是H3"http://h3添加到p之前
div.insertBefore(h3_ele,p)//創(chuàng)建p元素
varp_ele=document.createElement("p")p_ele.innerText="這是新段落文本"http://在p之后插入新段落
div.appendChild(p_ele)</script>8.4元素刪除如果要移除元素，可以使用其父元素對象的removeChild方法，而元素的remove方法用于移除元素自身。示例：使用兩種方法刪除元素<divid="main"><pid="p1">段落1</p><pid="p2">段落2</p><buttononclick="remove(1)">移除段落1</button><buttononclick="remove(2)">移除段落2</button></div><script>functionremove(flag){varp1=document.getElementById("p1");varp2=document.getElementById("p2");if(flag==1){//方法1：使用父元素刪除varparent=p1.parentElement;parent.removeChild(p1);}else{//方法2：自我刪除p2.remove();}}</script>8.5元素替換父元素.replaceChild(新元素,被替換的元素);示例：替換指定的列表項<ulclass="ul"><li>列表項1</li><li>列表項2</li><li>列表項3</li></ul><buttononclick="replace()">替換第二個列表項</button><script>functionreplace(){varul=document.querySelector(".ul")varli2=ul.querySelector(".ul>li:nth-of-type(2)")varnewLi2=document.createElement("li")newLi2.innerText="新列表項“ul.replaceChild(newLi2,li2)}</script>8.6元素克?。◤?fù)制元素）元素.cloneNode(true|false);//true---深度克隆，包含元素和后代子元素的所有內(nèi)聯(lián)屬性（樣式、事件和文本）；false---淺克隆，只包含元素本身及其內(nèi)聯(lián)屬性（樣式、事件），不包含任何子元素和文本。
綜合實例：根據(jù)給定的模擬數(shù)據(jù)，動態(tài)生成商品展示效果vargoods=[{id:1,name:'三國演義',price:20,img:'shyy.jpg'},{id:2,name:'紅樓夢’,price:30,img:'hlm.jpg'},{id:3,name:'水滸傳',price:40,img:'shz.jpg'},{id:4,name:'西游記',price:50,img:'xyj.jpg'}]//該數(shù)據(jù)保存在goods.js文件中思路：1.使用彈性布局,先用固定數(shù)據(jù)制作展示效果。2.以其中一個元素的布局為模板，克隆該元素，包括子元素。3.在克隆的元素中，查找子元素，并根據(jù)給定的數(shù)據(jù)，為子元素賦值。4.添加到容器元素中。5.刪除模板元素。<divclass="container"><!--模板START--><divclass="card"><imgclass="img"/><pclass="name">紅樓夢</p><pclass="price">12.8</p><p> <buttonclass="buy">購買</button></p></div><!--END--></div><style>*{box-sizing:border-box;}.container{width:800px;border:10pxsolidred;margin:auto;/*居中顯示*//*彈性布局：水平，可以換行*/display:flex;flex-wrap:wrap;}.card{box-shadow:0020px#ccc;margin:10px;padding:10px;}</style>1.使用彈性布局,先用固定數(shù)據(jù)制作展示效果。2.以其中一個元素的為模板，克隆該元素，包括子元素,添加中容器中，最后移除模板。
<script>functionshowGoods(){varcontainer=document.querySelector(".container");varcard=document.querySelector(
溫馨提示
- 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)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025的北京市種子繁育收購合同
- 2025總代理商合同書
- 城市排水泵站地錨固定合同
- 客戶索賠管理辦法庫存管理
- 交通運輸服務(wù)優(yōu)化項目管理規(guī)則
- 設(shè)備轉(zhuǎn)讓協(xié)議書糾紛解決途徑
- 能源項目采購備案申請表
- 2025版圖書購銷合同樣本
- 游戲廳財務(wù)收支監(jiān)控
- 電池儲存安全措施
- 國家開放大學(xué)法學(xué)本科《商法》歷年期末考試試題及答案題庫
- 金匱要略知到智慧樹章節(jié)測試課后答案2024年秋浙江中醫(yī)藥大學(xué)
- 【MOOC】有機化學(xué)實驗-南京工業(yè)大學(xué) 中國大學(xué)慕課MOOC答案
- 2024年婦保科工作總結(jié)及計劃
- 北京理工大學(xué)《數(shù)據(jù)結(jié)構(gòu)與算法設(shè)計》2022-2023學(xué)年第一學(xué)期期末試卷
- 錨桿（索）支護工技能理論考試題庫200題（含答案）
- 影視后期制作團隊薪酬激勵方案
- 2024年公安機關(guān)理論考試題庫500道
- 2024年中國主題公園競爭力評價報告-中國主題公園研究院
- 中國慢性冠脈綜合征患者診斷及管理指南2024版解讀
- （正式版）SHT 3551-2024 石油化工儀表工程施工及驗收規(guī)范
評論
0/150
提交評論