系统带你学习 WebAPIs 第二讲
生活随笔
收集整理的這篇文章主要介紹了
系统带你学习 WebAPIs 第二讲
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Web APIs
本篇學習目標：
能夠說出排他操作的一般實現步驟
能夠使用html5中的dataset方式操作自定義屬性
能夠根據提示完成百度換膚的案例
能夠根據提示完成全選案例
能夠根據提示完成tab欄切換案例
能夠區分元素節點、文本節點、屬性節點
能夠獲取指定元素的父元素
能夠獲取指定元素的所有子元素
能夠說出childNodes和children的區別
能夠使用createElement創建頁面元素
1.1. 排他操作
1.1.1 排他思想
如果有同一組元素，我們想要某一個元素實現某種樣式， 需要用到循環的排他思想算法：
所有元素全部清除樣式（干掉其他人）
給當前元素設置樣式 （留下我自己）
注意順序不能顛倒，首先干掉其他人，再設置自己
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. 兄弟節點
下一個兄弟節點
上一個兄弟節點
下一個兄弟元素節點（有兼容性問題）
上一個兄弟元素節點（有兼容性問題）
總結：獲取節點的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>總結
以上是生活随笔為你收集整理的系统带你学习 WebAPIs 第二讲的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 系统带你学习 WebAPIs 第一讲
- 下一篇： 系统带你学习 WebAPIs 第三讲