程式調試,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中文網其他相關文章!
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
僅 CSS 方法可在單擊時動態修改圖片 src,無需使用 JavaScript
我需要僅使用css更改滑鼠單擊時圖像的src喜歡img:active{}
來自於 2024-04-06 19:25:49
0
1
505
放大 d3.js 時散佈圖點不會保持值
這是我第一次使用d3.js,所以請耐心等待。我在vue.js檔案中將其作為純JavaScript實作。我正在嘗試製作具有縮放功能的散點圖。到目前為止,我幾乎一切正常,但當我縮放時,...
來自於 2024-04-06 18:16:26
0
1
403
供應商特定偽元素上的 JavaScript 懸停事件
我有以下htmlinput標籤。 $("input[type='range']::-webkit-slider-thumb").on('hover',funct...
來自於 2024-04-06 15:35:24
0
1
274
使用 Javascript / Jquery 提交表單且不含按鈕
我試圖透過呼叫JavaScript函數並使用JQUERY/PHP執行表單來提交沒有按鈕的表單。我希望表單在後端靜默執行,而無需重新載入頁面。不幸的是,它不斷傳回JavaScript...
來自於 2024-04-06 14:54:03
0
2
421
使用「折疊顯示器」類別自訂 Bootstrap 手風琴標題的外觀
我想設定具有類別collapseshow的面板的卡片標題樣式。在此範例中,它是第一個面板。我嘗試使用CSS來使用.accordion.card.card-headerbutton....
來自於 2024-04-06 12:53:11
0
1
376
熱門教學
更多>
|