當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
JavaScript学习笔记（4）
生活随笔
收集整理的這篇文章主要介紹了
JavaScript学习笔记（4）
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
文章目錄
- tab欄切換案例
- 自定義屬性命名規(guī)范（前面加data-）
- 自定義屬性可通過(guò)在元素中直接寫，也可通過(guò)setArribute函數(shù)添加
- h5新增獲取元素自定義屬性方法（元素.dataset.自定義屬性名）或者（元素.dataset[‘自定義屬性名’]）（兼容性不好，還是用getAttribute比較靠譜）
- 節(jié)點(diǎn)操作（讓獲取元素更簡(jiǎn)單）
- nodeType節(jié)點(diǎn)類型、nodeName（節(jié)點(diǎn)名稱）、nodeValue（節(jié)點(diǎn)值）
- 節(jié)點(diǎn)層級(jí)
- 父級(jí)節(jié)點(diǎn) node.parentNode
- 子級(jí)節(jié)點(diǎn) childNodes（獲取所有子節(jié)點(diǎn)，包括元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)） children（只獲得元素節(jié)點(diǎn)）
- 獲取子級(jí)第一個(gè)元素和最后一個(gè)元素 firstChild、lastChild、firstElementChild、lastElementChild（有兼容性問(wèn)題ie9👆支持）可以用.children[0])、.children[ol.children.length - 1])
- 案例：新浪下拉菜單
- 兄弟節(jié)點(diǎn) nextSibing previousSibling（包括文本節(jié)點(diǎn)、元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)） nextElementSibling previousElementSibling（只包括元素節(jié)點(diǎn)，但有兼容性問(wèn)題，需自行封裝）
- 創(chuàng)建節(jié)點(diǎn)（元素）createElement、添加節(jié)點(diǎn)（元素）appendChild、插入節(jié)點(diǎn)（元素）insertBefore
- 簡(jiǎn)單版發(fā)布留言案例
- 刪除節(jié)點(diǎn) removeChild
- 不良留言信息刪除案例（留言附加刪除鏈接）阻止鏈接跳轉(zhuǎn)`刪除`（在子級(jí)中添加能夠刪除父級(jí)的鏈接，要通過(guò)爺級(jí)調(diào)用removeChild刪除）
- 克隆節(jié)點(diǎn)、拷貝節(jié)點(diǎn)node.cloneNode()
- 案例：動(dòng)態(tài)生成表格
- 介紹三種動(dòng)態(tài)創(chuàng)建元素方法document.write() element.innerHTML document.createElement()（計(jì)算代碼執(zhí)行時(shí)間）用createElement()就可以了
tab欄切換案例
自定義屬性命名規(guī)范（前面加data-）
自定義屬性可通過(guò)在元素中直接寫，也可通過(guò)setArribute函數(shù)添加
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-開(kāi)頭的// dataset 是一個(gè)集合里面存放了所有以data開(kāi)頭的自定義屬性console.log(div.dataset);console.log(div.dataset.index);console.log(div.dataset['index']);// 如果自定義屬性里面有多個(gè)-鏈接的單詞，我們獲取的時(shí)候采取 駝峰命名法console.log(div.dataset.listName);console.log(div.dataset['listName']);</script> </body></html>節(jié)點(diǎn)操作（讓獲取元素更簡(jiǎn)單）
nodeType節(jié)點(diǎn)類型、nodeName（節(jié)點(diǎn)名稱）、nodeValue（節(jié)點(diǎn)值）
通過(guò)dir(元素)能看到nodeType
節(jié)點(diǎn)層級(jí)
父級(jí)節(jié)點(diǎn) 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><!-- 節(jié)點(diǎn)的優(yōu)點(diǎn) --><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. 父節(jié)點(diǎn) parentNodevar erweima = document.querySelector('.erweima');// var box = document.querySelector('.box');// 得到的是離元素最近的父級(jí)節(jié)點(diǎn)(親爸爸) 如果找不到父節(jié)點(diǎn)就返回為 nullconsole.log(erweima.parentNode);</script> </body></html>子級(jí)節(jié)點(diǎn) childNodes（獲取所有子節(jié)點(diǎn)，包括元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)、文本節(jié)點(diǎn)） children（只獲得元素節(jié)點(diǎn)）
獲取子級(jí)第一個(gè)元素和最后一個(gè)元素 firstChild、lastChild、firstElementChild、lastElementChild（有兼容性問(wèn)題ie9👆支持）可以用.children[0])、.children[ol.children.length - 1])
案例：新浪下拉菜單
兄弟節(jié)點(diǎn) nextSibing previousSibling（包括文本節(jié)點(diǎn)、元素節(jié)點(diǎn)、屬性節(jié)點(diǎn)） nextElementSibling previousElementSibling（只包括元素節(jié)點(diǎn)，但有兼容性問(wèn)題，需自行封裝）
上面代碼while循環(huán)能執(zhí)行的原因wihle循環(huán)括號(hào)（）內(nèi)只要不為false，比如0之類的，循環(huán)都能進(jìn)行，并且括號(hào)內(nèi)的語(yǔ)句每次循環(huán)都執(zhí)行一次
創(chuàng)建節(jié)點(diǎn)（元素）createElement、添加節(jié)點(diǎn)（元素）appendChild、插入節(jié)點(diǎn)（元素）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. 創(chuàng)建節(jié)點(diǎn)元素節(jié)點(diǎn)var li = document.createElement('li');// 2. 添加節(jié)點(diǎn) node.appendChild(child) node 父級(jí) child 是子級(jí) 后面追加元素 類似于數(shù)組中的pushvar ul = document.querySelector('ul');ul.appendChild(li);// 3. 添加節(jié)點(diǎn) node.insertBefore(child, 指定元素);var lili = document.createElement('li');ul.insertBefore(lili, ul.children[0]);// 4. 我們想要頁(yè)面添加一個(gè)新的元素 ： 1. 創(chuàng)建元素 2. 添加元素</script> </body></html>簡(jiǎn)單版發(fā)布留言案例
<!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;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: red;font-size: 14px;margin: 15px 0;}</style> </head><body><textarea name="" id=""></textarea><button>發(fā)布</button><ul></ul><script>// 1. 獲取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注冊(cè)事件btn.onclick = function() {if (text.value == '') {alert('您沒(méi)有輸入內(nèi)容');return false;} else {// console.log(text.value);// (1) 創(chuàng)建元素var li = document.createElement('li');// 先有l(wèi)i 才能賦值li.innerHTML = text.value;// (2) 添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[0]);}}</script> </body></html>刪除節(jié)點(diǎn) 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>光頭強(qiáng)</li></ul><script>// 1.獲取元素var ul = document.querySelector('ul');var btn = document.querySelector('button');// 2. 刪除元素 node.removeChild(child)// ul.removeChild(ul.children[0]);// 3. 點(diǎn)擊按鈕依次刪除里面的孩子btn.onclick = function () {ul.removeChild(ul.children[0]);if (ul.children.length == 0) {this.disabled = true;}}</script> </body></html>
不良留言信息刪除案例（留言附加刪除鏈接）阻止鏈接跳轉(zhuǎn)<a href='javascript:;'>刪除</a>（在子級(jí)中添加能夠刪除父級(jí)的鏈接，要通過(guò)爺級(jí)調(diào)用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><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: red;font-size: 14px;margin: 15px 0;}li a {float: right;}</style> </head><body><textarea name="" id=""></textarea><button>發(fā)布</button><ul></ul><script>// 1. 獲取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注冊(cè)事件btn.onclick = function() {if (text.value == '') {alert('您沒(méi)有輸入內(nèi)容');return false;} else {// console.log(text.value);// (1) 創(chuàng)建元素var li = document.createElement('li');// 先有l(wèi)i 才能賦值li.innerHTML = text.value + "<a href='javascript:;'>刪除</a>";// (2) 添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[0]);// (3) 刪除元素 刪除的是當(dāng)前鏈接的li 它的父親var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function() {// node.removeChild(child); 刪除的是 li 當(dāng)前a所在的li this.parentNode;ul.removeChild(this.parentNode);}}}}</script> </body></html>克隆節(jié)點(diǎn)、拷貝節(jié)點(diǎn)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(); 括號(hào)為空或者里面是false 淺拷貝 只復(fù)制標(biāo)簽不復(fù)制里面的內(nèi)容// 2. node.cloneNode(true); 括號(hào)為true 深拷貝 復(fù)制標(biāo)簽復(fù)制里面的內(nèi)容var lili = ul.children[0].cloneNode(true);ul.appendChild(lili);</script> </body></html>案例：動(dòng)態(tài)生成表格
介紹三種動(dòng)態(tài)創(chuàng)建元素方法document.write() element.innerHTML document.createElement()（計(jì)算代碼執(zhí)行時(shí)間）用createElement()就可以了
05-三種創(chuàng)建元素方式區(qū)別
06-innerHTML拼接效率測(cè)試
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>效率測(cè)試</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數(shù)組效率測(cè)試
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>效率測(cè)試</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效率測(cè)試
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>效率測(cè)試</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>結(jié)果，用innerHTML不追加字符串的方式創(chuàng)建是最快的（5ms），其次是用createElement（20ms），建議用createElement，結(jié)構(gòu)清晰
總結(jié)
以上是生活随笔為你收集整理的JavaScript学习笔记（4）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： a标签阻止链接跳转（href=‘java
- 下一篇： JavaScript学习笔记（5）