DOM 操作之全選反選與排他思想
阿新 • • 發佈：2020-11-27
【1】html5操作自定義屬性
<body> <!-- html5操作自定義屬性 --> <div id="boxId" class="boxClass" a12="10" data-index="yzx666"></div> <script> var idBox = document.querySelector('.boxClass'); //獲取id console.log(typeof (idBox.id)); //string console.log(idBox.id); //boxId console.log(typeof (idBox.className)); //string console.log(idBox.className); //boxClass console.log(typeof (idBox.a12)); //undefined console.log(idBox.a12); //undefined console.log(typeof (idBox.getAttribute('a12'))); //string console.log(idBox.getAttribute('a12')); //10 console.log(typeof (idBox['a12'])); //undefined console.log(idBox['a12']); //undefined box.c = 30; // 給物件動態新增屬性 box.id = 'BOX'; box.setAttribute('id', 'wrap'); // 設定id屬性 box.setAttribute('b', '20'); // 設定自定義屬性 box.removeAttribute('a'); // 刪除屬性 // 對於data-開頭的屬性 console.log(box.getAttribute('data-index')); console.log(box.dataset); console.log(box.dataset['index']); console.log(box.dataset['shPd']); //data-sh-pd="浦東區"，駝峰法 </script> </body>
【1】Document Object Model 文件物件模型，提供介面，開發者通過這個介面可以動態訪問和修改文件的內容、結構和樣式
【2】節點 元素節點、屬性節點、內容節點，DOM 操作(獲取元素、元素層次關係、屬性操作、元素的 CRUD)
【3】事件三要素 事件源、事件型別、事件處理邏輯
【2】全選反選複選框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="checkbox" name="checkAll"/>全選<br> <input type="checkbox" name="fx"/>反選<br> <input type="checkbox" name="cl"/>JS <input type="checkbox" name="cl"/>JAVA <input type="checkbox" name="cl"/>c# <input type="checkbox" name="cl"/>vb <script type="text/javascript"> // 給全選複選框繫結事件 var checkAll = document.getElementsByName("checkAll")[0]; var cls = document.getElementsByName("cl"); var fx = document.getElementsByName("fx")[0]; checkAll.onclick = function() { // 讓四個語言的複選框狀態與點選全選複選框的一致 //alert(this.checked); for(var i=0, len=cls.length; i<len; i++) { cls[i].checked = this.checked; } } // 給反選複選框繫結事件 fx.onclick = function() { // 此時讓四個語言的複選框狀態與它當前的相反 for(var i=0, len=cls.length; i<len; i++) { cls[i].checked = !cls[i].checked; } } // 給每個語言複選框繫結事件 for(var i=0, len=cls.length; i<len; i++) { cls[i].onclick = function() { var countChecked = 0; // 統計多少個語言被選中 for(var j=0, len=cls.length; j<len; j++) { if (cls[j].checked) { countChecked++; } } if (countChecked === cls.length) { checkAll.checked = true; } else { checkAll.checked = false; } } } </script> </body> </html>
【3】排他思想之切換_tab欄
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ float: left; width: 200px; height: 200px; margin: 10px; background-color: red; } .border{ border: 5px solid blue; } </style> </head> <body> <div class="border"></div> <div></div> <div></div> <script> var box = document.querySelectorAll('div'); for (var i = 0; i < box.length; i++) { box[i].onclick = function(){ // 迴圈繫結事件 for(var j = 0; j<box.length ;j++){ box[j].className=''; // 排他思想 先操作所有 再對自己單獨設定 } this.className='border'; } } </script> </body> </html>
javascript 中 click 和onclick有什麼區別呢
1、onclick是繫結事bai件，du告訴瀏覽器在滑鼠點選時候要做什zhi麼。
2、click本身是方法作用是觸發daoonclick事件，只要執行了元素的click()方法，就會觸發onclick事件
3、click可以理解為一次簡單的觸發，只執行一次，找不到以後就不再執行；
4、onclick則是給這個id註冊一種行為，可以重複觸發
5、click 是方法；onclick是事件；執行click就是模擬滑鼠點選，同時會觸發onclick事件。
擴充套件資料：
JavaScript是一種屬於網路的指令碼語言,已經被廣泛用於Web應用開發,常用來為網頁新增各式各樣的動態功能,為使用者提供更流暢美觀的瀏覽效果。通常JavaScript指令碼是通過嵌入在HTML中來實現自身的功能的。
Javascript指令碼語言同其他語言一樣，有它自身的基本資料型別，表示式和算術運算子及程式的基本程式框架。Javascript提供了四種基本的資料型別和兩種特殊資料型別用來處理資料和文字。而變數提供存放資訊的地方，表示式則可以完成較複雜的資訊處理。