當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript学习笔记（4）

發布時間：2025/3/20 javascript 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript学习笔记（4）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- tab欄切換案例
- 自定義屬性命名規范（前面加data-）
- - 自定義屬性可通過在元素中直接寫，也可通過setArribute函數添加
  - h5新增獲取元素自定義屬性方法（元素.dataset.自定義屬性名）或者（元素.dataset[‘自定義屬性名’]）（兼容性不好，還是用getAttribute比較靠譜）
- 節點操作（讓獲取元素更簡單）
- - nodeType節點類型、nodeName（節點名稱）、nodeValue（節點值）
- 節點層級
- - 父級節點 node.parentNode
  - 子級節點 childNodes（獲取所有子節點，包括元素節點、屬性節點、文本節點） children（只獲得元素節點）
  - - 獲取子級第一個元素和最后一個元素 firstChild、lastChild、firstElementChild、lastElementChild（有兼容性問題ie9👆支持）可以用.children[0])、.children[ol.children.length - 1])
    - 案例：新浪下拉菜單
    - 兄弟節點 nextSibing previousSibling（包括文本節點、元素節點、屬性節點） nextElementSibling previousElementSibling（只包括元素節點，但有兼容性問題，需自行封裝）
- 創建節點（元素）createElement、添加節點（元素）appendChild、插入節點（元素）insertBefore
- 簡單版發布留言案例
- 刪除節點 removeChild
- 不良留言信息刪除案例（留言附加刪除鏈接）阻止鏈接跳轉`刪除`（在子級中添加能夠刪除父級的鏈接，要通過爺級調用removeChild刪除）
- 克隆節點、拷貝節點node.cloneNode()
- 案例：動態生成表格
- 介紹三種動態創建元素方法document.write() element.innerHTML document.createElement()（計算代碼執行時間）用createElement()就可以了

tab欄切換案例

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}</style> </head><body><div class="tab"><div class="tab_list"><ul><li class="current">商品介紹</li><li>規格與包裝</li><li>售后保障</li><li>商品評價（50000）</li><li>手機社區</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介紹模塊內容</div><div class="item">規格與包裝模塊內容</div><div class="item">售后保障模塊內容</div><div class="item">商品評價（50000）模塊內容</div><div class="item">手機社區模塊內容</div></div></div><script>// 獲取元素var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item');// for循環綁定點擊事件for (var i = 0; i < lis.length; i++) {// 開始給5個小li 設置索引號 lis[i].setAttribute('index', i);lis[i].onclick = function() {// 1. 上的模塊選項卡，點擊某一個，當前這一個底色會是紅色，其余不變（排他思想）修改類名的方式// 干掉所有人其余的li清除 class 這個類for (var i = 0; i < lis.length; i++) {lis[i].className = '';}// 留下我自己 this.className = 'current';// 2. 下面的顯示內容模塊var index = this.getAttribute('index');console.log(index);// 干掉所有人讓其余的item 這些div 隱藏for (var i = 0; i < items.length; i++) {items[i].style.display = 'none';}// 留下我自己讓對應的item 顯示出來items[index].style.display = 'block';}}</script> </body></html>

自定義屬性命名規范（前面加data-）

自定義屬性可通過在元素中直接寫，也可通過setArribute函數添加

h5新增獲取元素自定義屬性方法（元素.dataset.自定義屬性名）或者（元素.dataset[‘自定義屬性名’]）（兼容性不好，還是用getAttribute比較靠譜）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div getTime="20" data-index="2" data-list-name="andy"></div><script>var div = document.querySelector('div');// console.log(div.getTime);console.log(div.getAttribute('getTime'));div.setAttribute('data-time', 20);console.log(div.getAttribute('data-index'));console.log(div.getAttribute('data-list-name'));// h5新增的獲取自定義屬性的方法它只能獲取data-開頭的// dataset 是一個集合里面存放了所有以data開頭的自定義屬性console.log(div.dataset);console.log(div.dataset.index);console.log(div.dataset['index']);// 如果自定義屬性里面有多個-鏈接的單詞，我們獲取的時候采取駝峰命名法console.log(div.dataset.listName);console.log(div.dataset['listName']);</script> </body></html>

節點操作（讓獲取元素更簡單）

nodeType節點類型、nodeName（節點名稱）、nodeValue（節點值）

通過dir(元素)能看到nodeType

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div>我是div</div><span>我是span</span><ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><div class="box"><span class="erweima">×</span></div><script>var box = document.querySelector('.box');console.dir(box);</script> </body></html>

節點層級

父級節點 node.parentNode

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div>我是div</div><span>我是span</span><ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><div class="demo"><div class="box"><span class="erweima">×</span></div></div><script>// 1. 父節點 parentNodevar erweima = document.querySelector('.erweima');// var box = document.querySelector('.box');// 得到的是離元素最近的父級節點(親爸爸) 如果找不到父節點就返回為 nullconsole.log(erweima.parentNode);</script> </body></html>

子級節點 childNodes（獲取所有子節點，包括元素節點、屬性節點、文本節點） children（只獲得元素節點）

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div>我是div</div><span>我是span</span><ul><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ul><ol><li>我是li</li><li>我是li</li><li>我是li</li><li>我是li</li></ol><div class="demo"><div class="box"><span class="erweima">×</span></div></div><script>// DOM 提供的方法（API）獲取var ul = document.querySelector('ul');var lis = ul.querySelectorAll('li');// 1. 子節點 childNodes 所有的子節點包含元素節點文本節點等等console.log(ul.childNodes);console.log(ul.childNodes[0].nodeType);console.log(ul.childNodes[1].nodeType);// 2. children 獲取所有的子元素節點也是我們實際開發常用的console.log(ul.children);</script> </body></html>

獲取子級第一個元素和最后一個元素 firstChild、lastChild、firstElementChild、lastElementChild（有兼容性問題ie9👆支持）可以用.children[0])、.children[ol.children.length - 1])

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><ol><li>我是li1</li><li>我是li2</li><li>我是li3</li><li>我是li4</li><li>我是li5</li></ol><script>var ol = document.querySelector('ol');// 1. firstChild 第一個子節點不管是文本節點還是元素節點console.log(ol.firstChild);console.log(ol.lastChild);// 2. firstElementChild 返回第一個子元素節點 ie9才支持console.log(ol.firstElementChild);console.log(ol.lastElementChild);// 3. 實際開發的寫法既沒有兼容性問題又返回第一個子元素console.log(ol.children[0]);console.log(ol.children[ol.children.length - 1]);</script> </body></html>

案例：新浪下拉菜單

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}a {text-decoration: none;font-size: 14px;}.nav {margin: 100px;}.nav>li {position: relative;float: left;width: 80px;height: 41px;text-align: center;}.nav li a {display: block;width: 100%;height: 100%;line-height: 41px;color: #333;}.nav>li>a:hover {background-color: #eee;}.nav ul {display: none;position: absolute;top: 41px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}.nav ul li a:hover {background-color: #FFF5DA;}</style> </head><body><ul class="nav"><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li></ul><script>// 1. 獲取元素var nav = document.querySelector('.nav');var lis = nav.children; // 得到4個小li// 2.循環注冊事件for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() {this.children[1].style.display = 'block';}lis[i].onmouseout = function() {this.children[1].style.display = 'none';}}</script> </body></html>

兄弟節點 nextSibing previousSibling（包括文本節點、元素節點、屬性節點） nextElementSibling previousElementSibling（只包括元素節點，但有兼容性問題，需自行封裝）

上面代碼while循環能執行的原因wihle循環括號（）內只要不為false，比如0之類的，循環都能進行，并且括號內的語句每次循環都執行一次

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><div>我是div</div><span>我是span</span><script>var div = document.querySelector('div');// 1.nextSibling 下一個兄弟節點包含元素節點或者文本節點等等console.log(div.nextSibling);console.log(div.previousSibling);// 2. nextElementSibling 得到下一個兄弟元素節點console.log(div.nextElementSibling);console.log(div.previousElementSibling);//自己封裝function getNextElementSibling(element) {var el = element;while (true) {if (el.nextSibling.nodeType === 1) {return el.nextSibling;} else {el = el.nextSibling;}}return null;}console.log(getNextElementSibling(div));</script> </body></html>

創建節點（元素）createElement、添加節點（元素）appendChild、插入節點（元素）insertBefore

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><ul><li>123</li></ul><script>// 1. 創建節點元素節點var li = document.createElement('li');// 2. 添加節點 node.appendChild(child) node 父級 child 是子級后面追加元素類似于數組中的pushvar ul = document.querySelector('ul');ul.appendChild(li);// 3. 添加節點 node.insertBefore(child, 指定元素);var lili = document.createElement('li');ul.insertBefore(lili, ul.children[0]);// 4. 我們想要頁面添加一個新的元素： 1. 創建元素 2. 添加元素</script> </body></html>

簡單版發布留言案例

刪除節點 removeChild

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><button>刪除</button><ul><li>熊大</li><li>熊二</li><li>光頭強</li></ul><script>// 1.獲取元素var ul = document.querySelector('ul');var btn = document.querySelector('button');// 2. 刪除元素 node.removeChild(child)// ul.removeChild(ul.children[0]);// 3. 點擊按鈕依次刪除里面的孩子btn.onclick = function () {ul.removeChild(ul.children[0]);if (ul.children.length == 0) {this.disabled = true;}}</script> </body></html>

不良留言信息刪除案例（留言附加刪除鏈接）阻止鏈接跳轉<a href='javascript:;'>刪除</a>（在子級中添加能夠刪除父級的鏈接，要通過爺級調用removeChild刪除）

克隆節點、拷貝節點node.cloneNode()

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><ul><li>1111</li><li>2</li><li>3</li></ul><script>var ul = document.querySelector('ul');// 1. node.cloneNode(); 括號為空或者里面是false 淺拷貝只復制標簽不復制里面的內容// 2. node.cloneNode(true); 括號為true 深拷貝復制標簽復制里面的內容var lili = ul.children[0].cloneNode(true);ul.appendChild(lili);</script> </body></html>

案例：動態生成表格

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>table {width: 500px;margin: 100px auto;border-collapse: collapse;text-align: center;}td,th {border: 1px solid #333;}thead tr {height: 40px;background-color: #ccc;}</style> </head><body><table cellspacing="0"><thead><tr><th>姓名</th><th>科目</th><th>成績</th><th>操作</th></tr></thead><tbody></tbody></table><script>// 1.先去準備好學生的數據var datas = [{name: '魏瓔珞',subject: 'JavaScript',score: 100}, {name: '弘歷',subject: 'JavaScript',score: 98}, {name: '傅恒',subject: 'JavaScript',score: 99}, {name: '明玉',subject: 'JavaScript',score: 88}, {name: '大豬蹄子',subject: 'JavaScript',score: 0}];// 2. 往tbody 里面創建行：有幾個人（通過數組的長度）我們就創建幾行var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) { // 外面的for循環管行 tr// 1. 創建 tr行var tr = document.createElement('tr');tbody.appendChild(tr);// 2. 行里面創建單元格(跟數據有關系的3個單元格) td 單元格的數量取決于每個對象里面的屬性個數 for循環遍歷對象 datas[i]for (var k in datas[i]) { // 里面的for循環管列 td// 創建單元格 var td = document.createElement('td');// 把對象里面的屬性值 datas[i][k] 給 td // console.log(datas[i][k]);td.innerHTML = datas[i][k];tr.appendChild(td);}// 3. 創建有刪除2個字的單元格 var td = document.createElement('td');td.innerHTML = '<a href="javascript:;">刪除 </a>';tr.appendChild(td);}// 4. 刪除操作開始 var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function() {// 點擊a 刪除當前a 所在的行(鏈接的爸爸的爸爸) node.removeChild(child) tbody.removeChild(this.parentNode.parentNode)}}// for(var k in obj) {// k 得到的是屬性名// obj[k] 得到是屬性值// }</script> </body></html>

介紹三種動態創建元素方法document.write() element.innerHTML document.createElement()（計算代碼執行時間）用createElement()就可以了

05-三種創建元素方式區別

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title> </head><body><button>點擊</button><p>abc</p><div class="inner"></div><div class="create"></div><script>// window.onload = function() {// document.write('<div>123</div>');// }// 三種創建元素方式區別 // 1. document.write() 創建元素如果頁面文檔流加載完畢，再調用這句話會導致頁面重繪// var btn = document.querySelector('button');// btn.onclick = function() {// document.write('<div>123</div>');// }// 2. innerHTML 創建元素var inner = document.querySelector('.inner');// for (var i = 0; i <= 100; i++) {// inner.innerHTML += '<a href="#">百度</a>'// }var arr = [];for (var i = 0; i <= 100; i++) {arr.push('<a href="#">百度</a>');}inner.innerHTML = arr.join('');// 3. document.createElement() 創建元素var create = document.querySelector('.create');for (var i = 0; i <= 100; i++) {var a = document.createElement('a');create.appendChild(a);}</script> </body></html>

06-innerHTML拼接效率測試

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>效率測試</title> </head><body> </body> <script>function fn() {var d1 = +new Date();var str = '';for (var i = 0; i < 1000; i++) {document.body.innerHTML += '<div style="width:100px; height:2px; border:1px solid blue;"></div>';}var d2 = +new Date();console.log(d2 - d1);}fn(); </script></html>

07-innerHTML數組效率測試

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>效率測試</title></head><body></body><script>function fn() {var d1 = +new Date();var array = [];for (var i = 0; i < 1000; i++) {array.push('<div style="width:100px; height:2px; border:1px solid blue;"></div>');}document.body.innerHTML = array.join('');var d2 = +new Date();console.log(d2 - d1);}fn(); </script></html>

08-createElement效率測試

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>效率測試</title></head><body></body><script>function fn() {var d1 = +new Date();for (var i = 0; i < 1000; i++) {var div = document.createElement('div');div.style.width = '100px';div.style.height = '2px';div.style.border = '1px solid red';document.body.appendChild(div);}var d2 = +new Date();console.log(d2 - d1);}fn(); </script></html>

結果，用innerHTML不追加字符串的方式創建是最快的（5ms），其次是用createElement（20ms），建議用createElement，結構清晰

總結

以上是生活随笔為你收集整理的JavaScript学习笔记（4）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： a标签阻止链接跳转（href=‘java
下一篇： gradle idea java ssm