亚洲精品成人片在线观看精品字幕,亚洲a∨无码男人的天堂,新婚少妇无套内谢国语播放,亚欧免费无码aⅴ在线观看,销魂老女人老熟妇69xx

碼上未來IT培訓(xùn)老師直接接聽

400-029-09** 400-029-0997 轉(zhuǎn) 36015
查看完整號碼
掃碼撥號
微信掃碼撥號

AI大模型全棧開發(fā)|前端基礎(chǔ)：JavaScript基礎(chǔ)-DOM（下）

2025/6/23 0:23:35

前端基礎(chǔ)JavaScript基礎(chǔ)DOM(下）課程前言Cou...

前端基礎(chǔ)JavaScript基礎(chǔ)DOM(下）

課程前言Course Introduction同學(xué)們好，本課程聚焦 DOM 高級操作，將系統(tǒng)講解自定義屬性操作、節(jié)點層級關(guān)系與操作方法，以及事件高級應(yīng)用等核心內(nèi)容。通過豐富案例演示，幫助學(xué)員掌握從基礎(chǔ)屬性獲取到復(fù)雜事件委托的全流程技能，提升前端開發(fā)中 DOM 操作的實戰(zhàn)能力。讓我們開始今天的課程吧！一自定義屬性操作

CodingFuture

1.1獲取屬性值

在 DOM 操作中，獲取元素屬性值有兩種主要方式，它們的應(yīng)用場景有所不同：element.屬性：用于獲取元素的內(nèi)置屬性（如 id、class 等）。element.getAttribute("屬性")：用于獲取自定義屬性，也可獲取內(nèi)置屬性。區(qū)別說明：內(nèi)置屬性是 HTML 標(biāo)簽?zāi)J(rèn)擁有的屬性，如 div 的 id、class。自定義屬性是開發(fā)者自行添加的屬性，如 index="1"，此時必須用 getAttribute 才能獲取。代碼示例：<div id="demo" class="nav" index="1"></div><script>  var div = document.querySelector("div");  console.log(div.id); // demo（內(nèi)置屬性，直接獲?。?nbsp; console.log(div.index); // undefined（自定義屬性，直接獲取失?。?nbsp; console.log(div.getAttribute("index")); // 1（通過 getAttribute 獲取自定義屬性）</script>1.2設(shè)置屬性值

同樣，設(shè)置屬性值也有兩種方式：element.屬性 = "值"：設(shè)置內(nèi)置屬性值。element.setAttribute("屬性", "值")：設(shè)置自定義屬性值，也可設(shè)置內(nèi)置屬性。代碼示例：// 設(shè)置內(nèi)置屬性div.id = "demo1";div.className = "nav1";// 設(shè)置自定義屬性（必須用 setAttribute）div.setAttribute("index", "2");1.3移除屬性值

移除屬性使用 element.removeAttribute("屬性")，可移除內(nèi)置屬性和自定義屬性。代碼示例：div.removeAttribute("class"); // 移除內(nèi)置屬性 classdiv.removeAttribute("index"); // 移除自定義屬性 index1.4案例

Tab 欄切換

需求：點擊選項卡，切換顯示對應(yīng)的內(nèi)容模塊。實現(xiàn)思路：給每個選項卡 li 設(shè)置自定義屬性 index 作為索引。點擊時，先移除所有選項卡的激活狀態(tài)，再激活當(dāng)前選項卡。根據(jù)索引顯示對應(yīng)的內(nèi)容模塊，隱藏其他模塊。核心代碼：var lis = document.querySelectorAll("li");var items = document.querySelectorAll(".item");for (var i = 0; i < lis.length; i++) {  lis[i].setAttribute("index", i); // 設(shè)置索引  lis[i].onclick = function() {    // 移除所有選項卡的激活狀態(tài)    for (var i = 0; i < lis.length; i++) {      lis[i].className = "";    }    // 激活當(dāng)前選項卡    this.className = "current";        // 切換內(nèi)容顯示    var index = this.getAttribute("index");    for (var i = 0; i < items.length; i++) {      items[i].style.display = "none";    }    items[index].style.display = "block";  }}二節(jié)點操作

CodingFuture

2.1節(jié)點概述

定義：網(wǎng)頁中的所有內(nèi)容都是節(jié)點（標(biāo)簽、屬性、文本、注釋等），在 DOM 中用 node 表示。節(jié)點類型：元素節(jié)點：HTML 標(biāo)簽，如 <div>、<p>    屬性節(jié)點：元素的屬性，如 id、class    文本節(jié)點：標(biāo)簽或?qū)傩灾械奈谋緝?nèi)容    注釋節(jié)點：文檔注釋，如 <!-- 注釋 -->    文檔節(jié)點：整個文檔，DOM 樹的根節(jié)點（document）    2.2節(jié)點層級

DOM 樹中節(jié)點存在父子、兄弟等層級關(guān)系，例如：document（文檔節(jié)點）  └─ html（根元素節(jié)點）     ├─ head 元素節(jié)點     └─ body 元素節(jié)點        ├─ div 元素節(jié)點        └─ ul 元素節(jié)點           ├─ li 元素節(jié)點           └─ li 元素節(jié)點2.3父級節(jié)點

獲取方式：node.parentNode，返回最近的父節(jié)點，若無則返回 null。代碼示例：<div class="demo">  <div class="box">    <div class="son">×</div>  </div></div><script>  var son = document.querySelector(".son");  console.log(son.parentNode); // 輸出 .box 元素</script>2.4子節(jié)點

獲取所有子節(jié)點：parentNode.childNodes，包含元素節(jié)點和文本節(jié)點（不常用）。獲取子元素節(jié)點：parentNode.children，僅包含元素節(jié)點（常用）。獲取特定子元素：第*個子元素：parentNode.children[0]最后一個子元素：parentNode.children[parentNode.children.length - 1]代碼示例：<ul>  <li>我是li1</li>  <li>我是li2</li></ul><script>  var ul = document.querySelector("ul");  console.log(ul.childNodes); // 包含文本節(jié)點和 li 元素  console.log(ul.children); // 僅包含 li 元素</script>2.5兄弟節(jié)點

下一個兄弟元素：node.nextElementSibling上一個兄弟元素：node.previousElementSibling代碼示例：<div>我是div1</div><span>我是span2</span><div>我是div3</div><script>  var span = document.querySelector("span");  console.log(span.nextElementSibling); // 輸出 div3  console.log(span.previousElementSibling); // 輸出 div1</script>2.6創(chuàng)建節(jié)點

創(chuàng)建元素節(jié)點：document.createElement("標(biāo)簽名")2.7添加節(jié)點

追加到末尾：node.appendChild(child)，類似 CSS 的 :after。插入到指定位置：node.insertBefore(child, 指定元素)，類似 CSS 的 :before。代碼示例：<ul>  <li>我是一個li節(jié)點2</li></ul><script>  var ul = document.querySelector("ul");  var newLi3 = document.createElement("li");  newLi3.innerText = "我是一個li節(jié)點3";  ul.appendChild(newLi3); // 追加到末尾    var newLi1 = document.createElement("li");  newLi1.innerText = "我是一個li節(jié)點1";  ul.insertBefore(newLi1, ul.children[0]); // 插入到第*個 li 前面</script>2.8刪除節(jié)點

刪除子節(jié)點：node.removeChild(child)，返回刪除的節(jié)點。代碼示例：<button>刪除</button><ul>  <li>熊大</li>  <li>熊二</li></ul><script>  var btn = document.querySelector("button");  var ul = document.querySelector("ul");  btn.onclick = function() {    if (ul.children.length > 0) {      ul.removeChild(ul.children[0]); // 刪除第*個 li    }  }</script>2.9案例

發(fā)布與刪除留言

需求：輸入留言內(nèi)容后發(fā)布，顯示在列表中，并可刪除每條留言。實現(xiàn)思路：創(chuàng)建 li 元素并設(shè)置內(nèi)容（留言文本 + 刪除按鈕）。將 li 插入到列表頭部。為刪除按鈕綁定事件，通過事件委托刪除對應(yīng)的 li。核心代碼：var btn = document.querySelector("button");var textarea = document.querySelector("textarea");var ul = document.querySelector("ul");btn.onclick = function() {  if (textarea.value === "") {    alert("您沒有輸入內(nèi)容");    return;  }    // 創(chuàng)建留言 li  var li = document.createElement("li");  li.innerHTML = textarea.value + "<a href="javascript:;">刪除</a>";    // 插入到列表頭部  ul.insertBefore(li, ul.children[0]);    // 事件委托：為所有刪除按鈕綁定事件  var aTags = ul.querySelectorAll("a");  for (var i = 0; i < aTags.length; i++) {    aTags[i].onclick = function() {      ul.removeChild(this.parentNode); // 刪除當(dāng)前 a 的父節(jié)點（li）    }  }    textarea.value = ""; // 清空輸入框}2.10創(chuàng)建元素的三種方式

document.write()：直接向頁面寫入 HTML 代碼，已淘汰，幾乎不用。element.innerHTML：通過修改元素的 innerHTML 屬性創(chuàng)建元素，適合創(chuàng)建結(jié)構(gòu)復(fù)雜的內(nèi)容，但效率較低。document.createElement()：動態(tài)創(chuàng)建元素節(jié)點，結(jié)構(gòu)清晰，推薦使用。代碼對比：// document.write()document.write("<div style="width:100px; height:100px;background-color:red;"></div>");// element.innerHTMLdocument.body.innerHTML += "<div style="width:100px; height:100px;border:1px solid blue;"></div>";// document.createElement()var div = document.createElement("div");div.style.width = "200px";div.style.height = "200px";div.style.backgroundColor = "green";document.body.appendChild(div);三事件高級

CodingFuture

3.1注冊事件

給元素綁定事件的兩種方式：傳統(tǒng)方式：使用 on 開頭的事件（如 onclick），特點是同一個元素的同一個事件只能綁定一個處理函數(shù)，后綁定的會覆蓋前一個。監(jiān)聽注冊方式：addEventListener()（W3C 推薦），特點是可綁定多個處理函數(shù)，按注冊順序執(zhí)行。代碼示例：<button>傳統(tǒng)注冊</button><button>監(jiān)聽注冊</button><script>  var btns = document.querySelectorAll("button");    // 傳統(tǒng)方式（后綁定的覆蓋前一個）  btns[0].onclick = function() { alert("你好1"); };  btns[0].onclick = function() { alert("你好2"); }; // 只會彈出 "你好2"    // 監(jiān)聽注冊方式（可綁定多個）  btns[1].addEventListener("click", function() { alert("你好"); });  btns[1].addEventListener("click", function() { alert("不好"); }); // 依次彈出</script>3.2刪除事件

傳統(tǒng)方式：eventTarget.onclick = null監(jiān)聽方式：eventTarget.removeEventListener(type, listener, useCapture)（注意：listener 必須是命名函數(shù)）代碼示例：var div1 = document.querySelector("div:nth-child(1)");var div2 = document.querySelector("div:nth-child(2)");// 傳統(tǒng)方式解綁div1.onclick = function() {  alert("點擊我");  div1.onclick = null; // 解綁事件};// 監(jiān)聽方式解綁（需使用命名函數(shù)）function clickHandler(){  alert("你好！");  div2.removeEventListener("click", clickHandler);}div2.addEventListener("click", clickHandler);3.3DOM事件流

定義：事件發(fā)生時在元素節(jié)點間的傳播順序，包括三個階段：捕獲階段：從 document 向目標(biāo)元素傳播。目標(biāo)階段：事件到達(dá)目標(biāo)元素。冒泡階段：從目標(biāo)元素向 document 傳播。事件冒泡：IE 提出，事件從*具體的元素開始，逐級向上傳播到頂層節(jié)點。事件捕獲：網(wǎng)景提出，事件從頂層節(jié)點開始，逐級向下傳播到具體元素。代碼示例（冒泡階段演示）：<div id="father">  <div id="son">son盒子</div></div><script>  var son = document.querySelector("#son");  var father = document.querySelector("#father");    // 冒泡階段（useCapture 默認(rèn) false）  son.addEventListener("click", function() { console.log("son"); }, false);  father.addEventListener("click", function() { console.log("father"); }, false);  document.body.addEventListener("click", function() { console.log("body"); }, false);    // 點擊 son 盒子，輸出順序：son → father → body</script>3.4事件對象

定義：事件發(fā)生后，包含事件相關(guān)信息的對象，如事件類型、觸發(fā)元素、鼠標(biāo)位置等。獲取方式：在事件處理函數(shù)中通過參數(shù)接收（如 function(e) {}）。e.target 與 this 的區(qū)別：this：事件綁定的元素（誰綁定了事件，this 就是誰）。e.target：事件實際觸發(fā)的元素（如點擊子元素時，e.target 是子元素，this 是父元素）。代碼示例：<ul>  <li>a</li>  <li>b</li></ul><script>  var ul = document.querySelector("ul");  ul.addEventListener("click", function(e) {    console.log(e.target); // 輸出點擊的 li 元素    console.log(this); // 輸出 ul 元素    console.log(e.type); // 輸出事件類型（click）  });</script>3.5阻止默認(rèn)行為

作用：阻止 HTML 標(biāo)簽的默認(rèn)行為（如 a 標(biāo)簽點擊跳轉(zhuǎn)、表單提交等）。方法：e.preventDefault()（標(biāo)準(zhǔn)寫法）。代碼示例：<a >百度</a><script>  var a = document.querySelector("a");  a.onclick = function(e) {    alert("點擊了鏈接");    e.preventDefault(); // 阻止跳轉(zhuǎn)  };</script>3.6阻止事件冒泡

作用：阻止事件向父元素傳播。方法：e.stopPropagation()。代碼示例：<div class="father">  <div class="son">son兒子</div></div><script>  var son = document.querySelector(".son");  var father = document.querySelector(".father");    son.addEventListener("click", function(e) {    console.log("son");    e.stopPropagation(); // 阻止冒泡到 father  });    father.addEventListener("click", function(e) {    console.log("father");    e.stopPropagation(); // 阻止冒泡到 body  });    document.body.addEventListener("click", function(e) {    console.log("body");  });    // 點擊 son，僅輸出 "son"，不觸發(fā) father 和 body 的事件</script>3.7事件委托

定義：不直接給子元素綁定事件，而是給父元素綁定事件，通過事件冒泡機制處理子元素的事件。原理：利用事件冒泡，當(dāng)子元素觸發(fā)事件時，事件會冒泡到父元素，父元素可通過 e.target 確定具體觸發(fā)事件的子元素。優(yōu)點：減少 DOM 操作，提高性能。動態(tài)添加的子元素也能響應(yīng)事件。代碼示例：<input type="button" value="增加"><ul>  <li>西施</li>  <li>楊玉環(huán)</li></ul><script>  var btn = document.querySelector("input");  var ul = document.querySelector("ul");    btn.onclick = function() {    var li = document.createElement("li");    li.innerText = "新增人物";    ul.appendChild(li);  };    // 事件委托：給 ul 綁定事件，處理所有 li 的點擊  ul.addEventListener("click", function(e) {    e.target.style.backgroundColor = "red"; // 點擊的 li 變色  });    // 傳統(tǒng)方式（無法處理動態(tài)添加的 li）  // for (var i = 0; i < lis.length; i++) { ... }</script>四常用鼠標(biāo)事件

CodingFuture

4.1鼠標(biāo)事件對象

鼠標(biāo)事件對象 MouseEvent 包含以下常用屬性：e.clientX：鼠標(biāo)相對于瀏覽器窗口可視區(qū)的 X 坐標(biāo)e.clientY：鼠標(biāo)相對于瀏覽器窗口可視區(qū)的 Y 坐標(biāo)e.pageX：鼠標(biāo)相對于文檔頁面的 X 坐標(biāo)（IE9+ 支持）e.pageY：鼠標(biāo)相對于文檔頁面的 Y 坐標(biāo)（IE9+ 支持）e.screenX：鼠標(biāo)相對于電腦屏幕的 X 坐標(biāo)e.screenY：鼠標(biāo)相對于電腦屏幕的 Y 坐標(biāo)4.2獲取鼠標(biāo)在頁面的坐標(biāo)

代碼示例：<div></div><script>  document.addEventListener("click", function(e) {    // 可視區(qū)坐標(biāo)（不隨滾動條移動而變化）    console.log("clientX:", e.clientX, "clientY:", e.clientY);        // 文檔頁面坐標(biāo)（隨滾動條移動而變化）    console.log("pageX:", e.pageX, "pageY:", e.pageY);        // 屏幕坐標(biāo)    console.log("screenX:", e.screenX, "screenY:", e.screenY);  });</script>4.3案例

跟隨鼠標(biāo)移動的圖片需求：鼠標(biāo)移動時，圖片跟隨鼠標(biāo)位置移動。實現(xiàn)思路：監(jiān)聽 mousemove 事件，每次鼠標(biāo)移動時獲取最新坐標(biāo)。將圖片的 left 和 top 設(shè)置為鼠標(biāo)坐標(biāo)減去圖片半寬高（使圖片中心跟隨鼠標(biāo)）。核心代碼：<img src="images/angel.gif" alt=""><script>  var pic = document.querySelector("img");  document.addEventListener("mousemove", function(e) {    // 獲取鼠標(biāo)在頁面中的坐標(biāo)    var x = e.pageX;    var y = e.pageY;        // 計算圖片位置（減去圖片半寬高，使中心跟隨鼠標(biāo)）    pic.style.left = x - pic.offsetWidth / 2 + "px";    pic.style.top = y - pic.offsetHeight / 2 + "px";  });</script>

結(jié)言陳詞Closing statement今天的課程就到這里了，DOM 高級操作課程已結(jié)束。學(xué)員應(yīng)掌握了屬性操作、節(jié)點管理及事件機制等關(guān)鍵知識。建議通過課后練習(xí)鞏固 Tab 欄切換、留言發(fā)布等案例邏輯，將所學(xué)技能應(yīng)用于實際開發(fā)，提升頁面交互效果與性能優(yōu)化能力。下期課程預(yù)告：JavaScript基礎(chǔ)-BOM碼上未來為同學(xué)們安排統(tǒng)一答疑掃碼添加微信領(lǐng)取詳細(xì)課程大綱

微信號:CodingFuture2020

The CodingFuture&The Future is Already Here<<<  END >>>

添加微信咨詢
夏老師 @大連碼上未來IT培訓(xùn)

資深職業(yè)咨詢規(guī)劃師

微信號：155******12

立即咨詢

“大連碼上未來IT培訓(xùn)”是碼上未來科技(大連)有限公司在教育寶平臺開設(shè)的店鋪，若該店鋪內(nèi)信息涉嫌虛假或違法，請點擊這里向教育寶反饋，我們將及時進行處理。

機構(gòu)評分

環(huán)境：5.0師資：5.0服務(wù)：5.0效果：5.0

公示信息

店鋪名稱：大連碼上未來IT培訓(xùn)

單位名稱：碼上未來科技(大連)有限公司

賬號名稱：mswl（158******92）

所屬城市：遼寧大連

入駐時長：6年

在線客服：在線聊

微信咨詢

返回頂部