1.1. 自定義屬性操作
1.1.1 獲取屬性值
<div id="demo" index="1" class="nav"></div>
<script>
var div = document.querySelector('div');
// 1. 獲取元素的屬性值
// (1) element.屬性
console.log(div.id);
//(2) element.getAttribute('屬性', '值') get得到獲取 attribute 屬性的意思 我們程序員自己添加的屬性我們稱為自定義屬性 index
console.log(div.getAttribute('id'));
console.log(div.getAttribute('index'));
</script>
1.1.2. 設(shè)置屬性值
// 2. 設(shè)置元素屬性值
// (1) element.屬性= '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('屬性', '值'); 主要針對于自定義屬性
div.setAttribute('index', 2);
div.setAttribute('class', 'footer'); // class 特殊 這里面寫的就是
1.1.3. 移出屬性
// class 不是className
// 3 移除屬性 removeAttribute(屬性)
div.removeAttribute('index');
1.1.4. 案例：tab欄
<script>
// 獲取元素
var tab_list = document.querySelector('.tab_list');
var lis = tab_list.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// for循環(huán)，給選項(xiàng)卡綁定點(diǎn)擊事件
for (var i = 0; i < lis.length; i++) {
// 開始給5個(gè)小li 設(shè)置索引號(hào)
lis[i].setAttribute('index', i);
lis[i].onclick = function() {
// 1. 上的模塊選項(xiàng)卡，當(dāng)前這一個(gè)底色會(huì)是紅色，其余不變（排他思想）
// 干掉所有人 其余的li清除 class 這個(gè)類
for (var i = 0; i < lis.length; i++) {
lis[i].className = '';
}
// 留下我自己
this.className = 'current';
// 2. 下面的顯示內(nèi)容模塊
var index = this.getAttribute('index');
console.log(index);
// 干掉所有人 讓其余的item 這些div 隱藏
for (var i = 0; i < items.length; i++) {
items[i].style.display = 'none';
}
// 留下我自己 讓對應(yīng)的item 顯示出來
items[index].style.display = 'block';
}
}
</script>
1.1.5. H5自定義屬性
自定義屬性目的：是為了保存并使用數(shù)據(jù)。有些數(shù)據(jù)可以保存到頁面中而不用保存到數(shù)據(jù)庫中。
自定義屬性獲取是通過getAttribute(‘屬性’) 獲取。
但是有些自定義屬性很容易引起歧義，不容易判斷是元素的內(nèi)置屬性還是自定義屬性。
H5給我們新增了自定義屬性：
<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 是一個(gè)集合里面存放了所有以data開頭的自定義屬性
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>
1.2. 節(jié)點(diǎn)操作
1.2.1. 節(jié)點(diǎn)概述
? 網(wǎng)頁中的所有內(nèi)容都是節(jié)點(diǎn)（標(biāo)簽、屬性、文本、注釋等），在DOM 中，節(jié)點(diǎn)使用 node 來表示。
? HTML DOM 樹中的所有節(jié)點(diǎn)均可通過 JavaScript 進(jìn)行訪問，所有 HTML 元素（節(jié)點(diǎn)）均可被修改，也可以創(chuàng)建或刪除。
? 一般地，節(jié)點(diǎn)至少擁有nodeType（節(jié)點(diǎn)類型）、nodeName（節(jié)點(diǎn)名稱）和nodeValue（節(jié)點(diǎn)值）這三個(gè)基本屬性。
1.2.2. 節(jié)點(diǎn)層級(jí)
? 利用 DOM 樹可以把節(jié)點(diǎn)劃分為不同的層級(jí)關(guān)系，常見的是父子兄層級(jí)關(guān)系。
1.2.3. 父級(jí)節(jié)點(diǎn)
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父節(jié)點(diǎn) parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是離元素最近的父級(jí)節(jié)點(diǎn)(親爸爸) 如果找不到父節(jié)點(diǎn)就返回為 null
console.log(erweima.parentNode);
</script>
1.2.4. 子節(jié)點(diǎn)
所有子節(jié)點(diǎn)
子元素節(jié)點(diǎn)
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
<script>
// DOM 提供的方法（API）獲取
var ul = document.querySelector('ul');
var lis = ul.querySelectorAll('li');
// 1. 子節(jié)點(diǎn) childNodes 所有的子節(jié)點(diǎn) 包含 元素節(jié)點(diǎn) 文本節(jié)點(diǎn)等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 獲取所有的子元素節(jié)點(diǎn) 也是我們實(shí)際開發(fā)常用的
console.log(ul.children);
</script>
第1個(gè)子節(jié)點(diǎn)
最后1個(gè)子節(jié)點(diǎn)
第1個(gè)子元素節(jié)點(diǎn)
最后1個(gè)子元素節(jié)點(diǎn)
? 實(shí)際開發(fā)中，firstChild 和 lastChild 包含其他節(jié)點(diǎn)，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性問題，那么我們?nèi)绾潍@取第一個(gè)子元素節(jié)點(diǎn)或最后一個(gè)子元素節(jié)點(diǎn)呢？
<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 第一個(gè)子節(jié)點(diǎn) 不管是文本節(jié)點(diǎn)還是元素節(jié)點(diǎn)
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一個(gè)子元素節(jié)點(diǎn) ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 實(shí)際開發(fā)的寫法 既沒有兼容性問題又返回第一個(gè)子元素
console.log(ol.children[0]);
console.log(ol.children[ol.children.length - 1]);
</script>
1.2.5. 案例：新浪下拉菜單
<script>
// 1. 獲取元素
var nav = document.querySelector('.nav');
var lis = nav.children; // 得到4個(gè)小li
// 2.循環(huán)注冊事件
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>
1.2.6. 兄弟節(jié)點(diǎn)
下一個(gè)兄弟節(jié)點(diǎn)
上一個(gè)兄弟節(jié)點(diǎn)
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
// 1.nextSibling 下一個(gè)兄弟節(jié)點(diǎn) 包含元素節(jié)點(diǎn)或者 文本節(jié)點(diǎn)等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nextElementSibling 得到下一個(gè)兄弟元素節(jié)點(diǎn)
console.log(div.nextElementSibling);
console.log(div.previousElementSibling);
</script>
下一個(gè)兄弟元素節(jié)點(diǎn)（有兼容性問題）
上一個(gè)兄弟元素節(jié)點(diǎn)（有兼容性問題）
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
1.2.7. 創(chuàng)建節(jié)點(diǎn)
1.2.8. 添加節(jié)點(diǎn)
<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í) 后面追加元素
var 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. 我們想要頁面添加一個(gè)新的元素 ： 1. 創(chuàng)建元素 2. 添加元素
</script>
替換節(jié)點(diǎn)
node.replaceChild(新節(jié)點(diǎn)，被替換的節(jié)點(diǎn))
1.2.9. 案例：簡單版發(fā)布留言
<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. 注冊事件
btn.onclick = function() {
if (text.value == '') {
alert('您沒有輸入內(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>
1.2.10 刪除節(jié)點(diǎn)
node.removeChild() 方法從 node節(jié)點(diǎn)中刪除一個(gè)子節(jié)點(diǎn)，返回刪除的節(jié)點(diǎn)。
<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() {
if (ul.children.length == 0) {
this.disabled = true;
} else {
ul.removeChild(ul.children[0]);
}
}
</script>
1.2.11 案例：刪除留言
<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. 注冊事件
btn.onclick = function() {
if (text.value == '') {
alert('您沒有輸入內(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() {
// 刪除的是 li 當(dāng)前a所在的li this.parentNode;
ul.removeChild(this.parentNode);
}
}
}
}
</script>
1.2.12復(fù)制（克?。┕?jié)點(diǎn)
<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>
1.2.13 案例：動(dòng)態(tài)生成表格
<script>
// 1.先去準(zhǔn)備好學(xué)生的數(shù)據(jù)
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 里面創(chuàng)建行： 有幾個(gè)人（通過數(shù)組的長度）我們就創(chuàng)建幾行
var tbody = document.querySelector('tbody');
// 遍歷數(shù)組
for (var i = 0; i < datas.length; i++) {
// 1. 創(chuàng)建 tr行
var tr = document.createElement('tr');
tbody.appendChild(tr);
// 2. 行里面創(chuàng)建單元格td 單元格的數(shù)量取決于每個(gè)對象里面的屬性個(gè)數(shù)
// 使用for in遍歷學(xué)生對象
for (var k in datas[i]) {
// 創(chuàng)建單元格
var td = document.createElement('td');
// 把對象里面的屬性值 datas[i][k] 給 td
td.innerHTML = datas[i][k];
tr.appendChild(td);
}
// 3. 創(chuàng)建有刪除2個(gè)字的單元格
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() {
// 點(diǎn)擊a 刪除 當(dāng)前a 所在的行(鏈接的爸爸的爸爸) node.removeChild(child)
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>
1.2.14 創(chuàng)建元素的三種方式
<script>
// 三種創(chuàng)建元素方式區(qū)別
// 1. document.write() 創(chuàng)建元素 如果頁面文檔流加載完畢，再調(diào)用這句話會(huì)導(dǎo)致頁面重繪
var btn = document.querySelector('button');
btn.onclick = function() {
document.write('<div>123</div>');
}
// 2. innerHTML 創(chuàng)建元素
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() 創(chuàng)建元素
var create = document.querySelector('.create');
for (var i = 0; i <= 100; i++) {
var a = document.createElement('a');
create.appendChild(a);
}
</script>
1.2.15 innerTHML和createElement效率對比
innerHTML字符串拼接方式（效率低）
<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>
createElement方式（效率一般）
<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>
innerHTML數(shù)組方式（效率高）
<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>
1.3. DOM的核心總結(jié)
關(guān)于dom操作，我們主要針對于元素的操作。主要有創(chuàng)建、增、刪、改、查、屬性操作、事件操作。
1.3.1. 創(chuàng)建
1.3.2. 增加
1.3.3. 刪
1.3.4. 改
1.3.5. 查
1.3.6. 屬性操作
