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. 鼠標經過事件 onmouseovertrs[i].onmouseover = function() {// console.log(11);this.className = 'bg';}// 4. 鼠標離開事件 onmouseouttrs[i].onmouseout = function() {this.className = '';}}</script>
1.4 案例：全選
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 屬性的意思 我們程序員自己添加的屬性我們稱為自定義屬性 indexconsole.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欄
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. 父節點 parentNodevar erweima = document.querySelector('.erweima');// var box = document.querySelector('.box');// 得到的是離元素最近的父級節點(親爸爸) 如果找不到父節點就返回為 nullconsole.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;}
總結：獲取節點的API
getElementById
getElementsByTagName
getElementsByClassName
queryselector
queryselectorall
document.body
parentNode
childNodes
children
previousSibling、previousElementSliblint
nextSibling、nextElementSibling
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>
 不刷新解決方案(直接調用方法))
)
