day02 - Web APIs
學習目标：
能夠說出排他操作的一般實作步驟
能夠使用html5中的dataset方式操作自定義屬性
能夠根據提示完成百度換膚的案例
能夠根據提示完成全選案例
能夠根據提示完成tab欄切換案例
能夠區分元素節點、文本節點、屬性節點
能夠擷取指定元素的父元素
能夠擷取指定元素的所有子元素
能夠說出childNodes和children的差別
能夠使用createElement建立頁面元素
1.1. 排他操作
1.1.1 排他思想
如果有同一組元素，我們想要某一個元素實作某種樣式， 需要用到循環的排他思想算法：
- 所有元素全部清除樣式（幹掉其他人）
- 給目前元素設定樣式 （留下我自己）
- 注意順序不能颠倒，首先幹掉其他人，再設定自己
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
// 1. 擷取所有按鈕元素
var btns = document.getElementsByTagName('button');
// btns得到的是僞數組 裡面的每一個元素 btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// (1) 我們先把所有的按鈕背景顔色去掉 幹掉所有人
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) 然後才讓目前的元素背景顔色為pink 留下我自己
this.style.backgroundColor = 'pink';
}
}
</script>
1.2 案例：百度換膚
<body>
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
// 1. 擷取元素
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2. 循環注冊事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// this.src 就是我們點選圖檔的路徑 images/2.jpg
// console.log(this.src);
// 把這個路徑 this.src 給body 就可以了
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>
1.3 案例：表格隔行變色
<script>
// 1.擷取元素 擷取的是 tbody 裡面所有的行
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. 利用循環綁定注冊事件
for (var i = 0; i < trs.length; i++) {
// 3. 滑鼠經過事件 onmouseover
trs[i].onmouseover = function() {
// console.log(11);
this.className = 'bg';
}
// 4. 滑鼠離開事件 onmouseout
trs[i].onmouseout = function() {
this.className = '';
}
}
</script>
1.4 案例：全選
<script>
// 1. 全選和取消全選做法： 讓下面所有複選框的checked屬性（選中狀态） 跟随 全選按鈕即可
// 擷取元素
var j_cbAll = document.getElementById('j_cbAll');
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
// 全選按鈕注冊事件
j_cbAll.onclick = function() {
// this.checked 目前複選框的選中狀态
console.log(this.checked);
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].checked = this.checked;
}
}
// 給所有的子複選框注冊單擊事件
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
// flag 控制全選按鈕是否選中
var flag = true;
// 每次點選下面的複選框都要循環檢查者4個小按鈕是否全被選中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break;
}
}
// 設定全選按鈕的狀态
j_cbAll.checked = flag;
}
}
</script>
1.5. 自定義屬性操作
1.5.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.5.2. 設定屬性值
// 2. 設定元素屬性值
// (1) element.屬性= '值'
div.id = 'test';
div.className = 'navs';
// (2) element.setAttribute('屬性', '值'); 主要針對于自定義屬性
div.setAttribute('index', 2);
div.setAttribute('class', 'footer'); // class 特殊 這裡面寫的就是
1.5.3. 移出屬性
// class 不是className
// 3 移除屬性 removeAttribute(屬性)
div.removeAttribute('index');
1.5.4. 案例：tab欄
<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>
1.5.5. H5自定義屬性
自定義屬性目的：是為了儲存并使用資料。有些資料可以儲存到頁面中而不用儲存到資料庫中。
自定義屬性擷取是通過getAttribute(‘屬性’) 擷取。
但是有些自定義屬性很容易引起歧義，不容易判斷是元素的内置屬性還是自定義屬性。
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 是一個集合裡面存放了所有以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>
1.6. 節點操作
1.6.1. 節點概述
網頁中的所有内容都是節點（标簽、屬性、文本、注釋等），在DOM 中，節點使用 node 來表示。
HTML DOM 樹中的所有節點均可通過 JavaScript 進行通路，所有 HTML 元素（節點）均可被修改，也可以建立或删除。
一般地，節點至少擁有nodeType（節點類型）、nodeName（節點名稱）和nodeValue（節點值）這三個基本屬性。
1.6.2. 節點層級
利用 DOM 樹可以把節點劃分為不同的層級關系，常見的是父子兄層級關系。
1.6.3. 父級節點
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父節點 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是離元素最近的父級節點(親爸爸) 如果找不到父節點就傳回為 null
console.log(erweima.parentNode);
</script>
1.6.4. 子節點
所有子節點
子元素節點
<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. 子節點 childNodes 所有的子節點 包含 元素節點 文本節點等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 擷取所有的子元素節點 也是我們實際開發常用的
console.log(ul.children);
</script>
第1個子節點
最後1個子節點
第1個子元素節點
最後1個子元素節點
實際開發中，firstChild 和 lastChild 包含其他節點，操作不友善，而 firstElementChild 和 lastElementChild 又有相容性問題，那麼我們如何擷取第一個子元素節點或最後一個子元素節點呢？
<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>
1.6.5. 案例：新浪下拉菜單
<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>
1.6.6. 兄弟節點
下一個兄弟節點
上一個兄弟節點
<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);
</script>
下一個兄弟元素節點（有相容性問題）
上一個兄弟元素節點（有相容性問題）
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
1.6.7. 建立節點
1.6.8. 添加節點
<ul>
<li>123</li>
</ul>
<script>
// 1. 建立節點元素節點
var li = document.createElement('li');
// 2. 添加節點 node.appendChild(child) node 父級 child 是子級 後面追加元素
var 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>
1.6.9. 案例：簡單版釋出留言
<body>
<textarea name="" id=""></textarea>
<button>釋出</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('您沒有輸入内容');
return false;
} else {
// console.log(text.value);
// (1) 建立元素
var li = document.createElement('li');
// 先有li 才能指派
li.innerHTML = text.value;
// (2) 添加元素
// ul.appendChild(li);
ul.insertBefore(li, ul.children[0]);
}
}
</script>
</body>