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>