js操作DOM物件實例詳解-js教程-PHP中文網

首頁

web前端

js教程

js操作DOM物件實例詳解

零下一度

Jul 02, 2017 am 09:19 AM

javascript js

程式調試，chrome開發人員工具，DOM操作，節點和節點間的關係，節點信息，操作節點，獲取元素

一.單字部分

①alert警告②prompt提示③parentNode父節點④childNode子節點⑤firstChild第一個子節點

⑥lastChild最後一個子節點⑦nextSibling下一個同級⑧previousSibling上一個同級

vert 。先前新增

cloneNode複製節點 removeNode 刪除節點 replaceNode取代節點

二.預習部分

##1.常見的JavaScript程式偵錯

#Chrome偵錯工具和alert()方法

2.簡述DOM的分類與節點間關係

DOM-CORE(核心)，HTML-DOM 和CSS-DOM

有子父關係同級關係

3.簡述如何以層次關係存取節點

透過節點的屬性：

parentNode，childNode，firstChild等......

4.簡述style屬性和className在改變樣式有什麼區別

style透過應用程式樣式的文檔元素存取style對象，classname屬性可設定或傳回元素的class樣式

三.練習部分（原文需要資源或原始碼的可私聊可扣扣）

上傳不了檔案只能上傳js程式碼了

1.存取當購物車頁面節點

//点击结算的时候给下面添加详情
//结算function accounts(){var titleH1=document.createElement("p");var price0=document.getElementById("price0").innerHTML;var price1=document.getElementById("price1").innerHTML;var sum=document.getElementById("totalPrice").innerHTML;
titleH1="您本次购买的商品信息如下："+"<br>"+"白岩松：白说："+price0+"<br>岛上书店:"+price1+"<br>商品总计："+sum;var zon=titleH1;var p=document.getElementById("ins");//这里我给它的p设置了一个id方便拿到p.innerHTML=zon;}total();
2.操作当当网删除节点
//js文件
function del(){var flag=confirm("您确定要删除商品吗?");if(flag==true){var parent=document.getElementById("cartList"); var one=document.getElementById("price0").parentNode;one.parentNode.removeChild(one);total();alert("删除成功!");}}

登入後複製

3.製作課工場論壇發文

 //页面就不发了 发js实现原理
// JavaScript Document
//发帖显示function sub(){var po=document.getElementById("post");po.style.display="block";
}//帖子提交function subTi(){var num=Math.floor(Math.random()*4+1); 　
//输出1～4之间的随机整数var po=document.getElementById("post");po.style.display="none";var img=document.createElement("img");var titleH1=document.createElement("h1");var titMu=document.createElement("span");var qy=document.getElementById("qq");var title=document.getElementById("title").value;var mu=document.getElementById("muk").value;var now = new Date();            var year = now.getFullYear();       //年           var month = now.getMonth() + 1;     //月           var day = now.getDate();  //rivar time=year+"-"+month+"-"+day;titleH1.innerHTML=title;titMu.innerHTML="<br><br>"+"板块："+mu+"     发表时间："+time;if(num==1){img.setAttribute("src","images/tou01.jpg");}else if(num==2){img.setAttribute("src","images/tou02.jpg");}else if(num==3){img.setAttribute("src","images/tou03.jpg");}else if(num==4){img.setAttribute("src","images/tou04.jpg");}var aa=document.getElementById("ull");//添加li　　　　var li = document.createElement("li");　　　　//设置 li 属性　　　　li.setAttribute("id", "newli");li.appendChild(img);　　　　li.appendChild(titleH1);  li.appendChild(titMu);　　 　aa.appendChild(li);//li.insertBefore(qy,li);}

登入後複製

4.製作關閉按鈕的廣告




#################################################################################### ####### ###### 四.總結部分######1.在HTML DOM中找出節點的標準方法是getElement系列方法，也可以使用parentNode，firstChild，nextSibling等.. .######2.在Core DOM中存取和設定節點屬性值的標準方法是getAttribute()和setAttribute()######3.改變樣式的兩種方法style屬性和className屬性 # ## 以上是js操作DOM物件實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！本網站聲明本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn 熱AI工具 Undresser.AI Undress 人工智慧驅動的應用程序，用於創建逼真的裸體照片 AI Clothes Remover 用於從照片中去除衣服的線上人工智慧工具。 Undress AI Tool 免費脫衣圖片 Clothoff.io AI脫衣器 Video Face Swap 使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！顯示更多熱門文章如何修復KB5055612無法在Windows 10中安裝？ 4 週前 By DDD <🎜>：種植花園 - 完整的突變指南 3 週前 By DDD <🎜>：泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙 3 週前 By 尊渡假赌尊渡假赌尊渡假赌北端：融合系統，解釋 4 週前 By 尊渡假赌尊渡假赌尊渡假赌 Mandragora：巫婆樹的耳語 - 如何解鎖抓鉤 3 週前 By 尊渡假赌尊渡假赌尊渡假赌顯示更多熱工具記事本++7.3.1 好用且免費的程式碼編輯器 SublimeText3漢化版中文版，非常好用禪工作室 13.0.1 強大的PHP整合開發環境 Dreamweaver CS6 視覺化網頁開發工具 SublimeText3 Mac版神級程式碼編輯軟體(SublimeText3) 顯示更多熱門話題 Java教學 1670 14 CakePHP 教程 1428 52 Laravel 教程 1329 25 PHP教程 1273 29 C# 教程 1256 24 顯示更多 Related knowledge 建議：優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM 人臉偵測辨識技術已經是一個比較成熟且應用廣泛的技術。而目前最廣泛的網路應用語言非JS莫屬，在Web前端實現人臉偵測辨識相比後端的人臉辨識有優勢也有弱勢。優點包括減少網路互動、即時識別，大大縮短了使用者等待時間，提高了使用者體驗；弱勢是：受到模型大小限制，其中準確率也有限。如何在web端使用js實現人臉偵測呢？為了實現Web端人臉識別，需要熟悉相關的程式語言和技術，如JavaScript、HTML、CSS、WebRTC等。同時也需要掌握相關的電腦視覺和人工智慧技術。值得注意的是，由於Web端的計如何使用WebSocket和JavaScript實現線上語音辨識系統 Dec 17, 2023 pm 02:54 PM 如何使用WebSocket和JavaScript實現線上語音辨識系統引言：隨著科技的不斷發展，語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統，具備了低延遲、即時性和跨平台的特點，成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系 WebSocket與JavaScript：實現即時監控系統的關鍵技術 Dec 17, 2023 pm 05:30 PM WebSocket與JavaScript：實現即時監控系統的關鍵技術引言：隨著互聯網技術的快速發展，即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用，並給出程式碼範例，詳細解釋其實作原理。一、WebSocket技股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM 股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的如何利用JavaScript和WebSocket實現即時線上點餐系統 Dec 17, 2023 pm 12:09 PM 如何利用JavaScript和WebSocket實現即時線上點餐系統介紹：隨著網路的普及和技術的進步，越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統，我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議，可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中，當使用者選擇菜餚並下訂單如何使用WebSocket和JavaScript實現線上預約系統 Dec 17, 2023 am 09:39 AM 如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代，越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統，並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工 JavaScript與WebSocket：打造高效率的即時天氣預報系統 Dec 17, 2023 pm 05:13 PM JavaScript和WebSocket：打造高效的即時天氣預報系統引言：如今，天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展，我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中，我們將學習如何使用JavaScript和WebSocket技術，來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM 隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人 See all articles 公益線上PHP培訓，幫助PHP學習者快速成長！關於我們免責聲明 Sitemap © php.cn All rights reserved