Web API（二）
1.1. 排他操作
1.1.1 排他思想
如果有同一組元素，我們想要某一個元素實現(xiàn)某種樣式， 需要用到循環(huán)的排他思想算法：
所有元素全部清除樣式（干掉其他人）
給當前元素設置樣式 （留下我自己）
注意順序不能顛倒，首先干掉其他人，再設置自己
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
// 1. 獲取所有按鈕元素
var btns = document.getElementsByTagName('button');
// btns得到的是偽數(shù)組 里面的每一個元素 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. 循環(huán)注冊事件
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. 利用循環(huán)綁定注冊事件
for (var i = 0; i < trs.length; i++) {
// 3. 鼠標經(jīng)過事件 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屬性（選中狀態(tài)） 跟隨 全選按鈕即可
// 獲取元素
var j_cbAll = document.getElementById('j_cbAll');
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
// 全選按鈕注冊事件
j_cbAll.onclick = function() {
// this.checked 當前復選框的選中狀態(tài)
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;
// 每次點擊下面的復選框都要循環(huán)檢查者4個小按鈕是否全被選中
for (var i = 0; i < j_tbs.length; i++) {
if (!j_tbs[i].checked) {
flag = false;
break;
}
}
// 設置全選按鈕的狀態(tài)
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循環(huán)，給選項卡綁定點擊事件
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自定義屬性
自定義屬性目的：是為了保存并使用數(shù)據(jù)。有些數(shù)據(jù)可以保存到頁面中而不用保存到數(shù)據(jù)庫中。
自定義屬性獲取是通過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. 節(jié)點操作
1.6.1. 節(jié)點概述
? 網(wǎng)頁中的所有內容都是節(jié)點（標簽、屬性、文本、注釋等），在DOM 中，節(jié)點使用 node 來表示。
? HTML DOM 樹中的所有節(jié)點均可通過 JavaScript 進行訪問，所有 HTML 元素（節(jié)點）均可被修改，也可以創(chuàng)建或刪除。
? 一般地，節(jié)點至少擁有nodeType（節(jié)點類型）、nodeName（節(jié)點名稱）和nodeValue（節(jié)點值）這三個基本屬性。
1.6.2. 節(jié)點層級
? 利用 DOM 樹可以把節(jié)點劃分為不同的層級關系，常見的是父子兄層級關系。
1.6.3. 父級節(jié)點
<div class="demo">
<div class="box">
<span class="erweima">×</span>
</div>
</div>
<script>
// 1. 父節(jié)點 parentNode
var erweima = document.querySelector('.erweima');
// var box = document.querySelector('.box');
// 得到的是離元素最近的父級節(jié)點(親爸爸) 如果找不到父節(jié)點就返回為 null
console.log(erweima.parentNode);
</script>
1.6.4. 子節(jié)點
所有子節(jié)點
<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é)點 childNodes 所有的子節(jié)點 包含 元素節(jié)點 文本節(jié)點等等
console.log(ul.childNodes);
console.log(ul.childNodes[0].nodeType);
console.log(ul.childNodes[1].nodeType);
// 2. children 獲取所有的子元素節(jié)點 也是我們實際開發(fā)常用的
console.log(ul.children);
</script>
<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 第一個子節(jié)點 不管是文本節(jié)點還是元素節(jié)點
console.log(ol.firstChild);
console.log(ol.lastChild);
// 2. firstElementChild 返回第一個子元素節(jié)點 ie9才支持
console.log(ol.firstElementChild);
console.log(ol.lastElementChild);
// 3. 實際開發(fā)的寫法 既沒有兼容性問題又返回第一個子元素
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.循環(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.6.6. 兄弟節(jié)點
<div>我是div</div>
<span>我是span</span>
<script>
var div = document.querySelector('div');
// 1.nextSibling 下一個兄弟節(jié)點 包含元素節(jié)點或者 文本節(jié)點等等
console.log(div.nextSibling);
console.log(div.previousSibling);
// 2. nextElementSibling 得到下一個兄弟元素節(jié)點
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. 創(chuàng)建節(jié)點
<ul>
<li>123</li>
</ul>
<script>
// 1. 創(chuàng)建節(jié)點元素節(jié)點
var li = document.createElement('li');
// 2. 添加節(jié)點 node.appendChild(child) node 父級 child 是子級 后面追加元素
var ul = document.querySelector('ul');
ul.appendChild(li);
// 3. 添加節(jié)點 node.insertBefore(child, 指定元素);
var lili = document.createElement('li');
ul.insertBefore(lili, ul.children[0]);
// 4. 我們想要頁面添加一個新的元素 ： 1. 創(chuàng)建元素 2. 添加元素
</script>
1.6.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('您沒有輸入內容');
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>
