摘要：返回包含帶有指定標簽名稱的所有元素的節點列表集合節點數組。增加節點創建屬性節點。刪除節點刪除子節點。

掌握JS中的BOM對象

掌握JS中的常用事件

掌握JS中的常用DOM操作

了解JS中的內置對象

上一次內容進行復習:

CSS: 層疊樣式表

主要作用: 美化頁面, 將美化和HTML進行分離,提高代碼復用性

選擇器:

? 元素選擇器: 元素的名稱{}

? 類選擇器: . 開頭

? ID選擇器: #ID選擇器

?

? 后代選擇器: 選擇器1 選擇器2

? 子元素選擇器: 選擇器1 > 選擇器2

? 選擇器分組: 選擇器1,選擇器2,選擇器3{}

? 屬性選擇器: 選擇器[屬性的名稱="屬性的值"]

? 偽類選擇器:

浮動:

? float 屬性: left right

清除浮動:

? clear 屬性: both left right

盒子模型: 上右下左 padding 10px 20px 30px 40px 順時針的方向

? 內邊距: 控制的盒子內距離

? 邊框: 盒子的邊框

? 外邊距: 控制盒子與盒子之間的距離

絕對定位: position : absolute; top: left

JS開發: 是一門腳本語言,由瀏覽器來解釋執行,不需要經過編譯

JS聲明變量: var 變量的名字;

JS聲明函數: function 函數的名稱(參數的名字){}

JS開發的步驟:

1. 確定事件
2. 事件要觸發函數,所以我們是要聲明函數
3. 函數里面通常是去做一些交互才操作,  彈框, 修改頁面內容,動態去添加一些東西

有一組圖片, 每隔3秒鐘,就去切換一張,最終是一直在不停切換

? 切換圖片:

? 每個三秒鐘做一件事:

1. 確定事件: 文檔加載完成的事件 onload
2. 事件要觸發 : init()
3. 函數里面要做一些事情:(通常會去操作元素,提供交互)
     1. 開啟定時器: 執行切換圖片的函數 changeImg()
4.  changeImg()
     1. 獲得要切換圖片的那個元素

? 一般網頁，當我們剛打開的時候，它會5秒之后，顯示一個廣告，讓我們看5秒鐘，然后他的廣告就自動消失了！

定時器

setInterval : 每隔多少毫秒執行一次函數

setTimeout: 多少毫秒之后執行一次函數

clearInterval

clearTimeout

顯示廣告 img.style.display = "block"

隱藏廣告 img.style.display = "none"

確定事件: 頁面加載完成的事件 onload

事件要觸發函數: init()

init函數里面做一件事:

啟動一個定時器 : setTimeout()

顯示一個廣告

再去開啟一個定時5秒鐘之后,關閉廣告

JS的引入方式

? 昨天我們做了一個簡單的表單校驗，每當用戶輸入出錯的時候，我們是彈出了一個對話框，提示用戶去修改。這樣的用戶體驗效果非常不好好。我們今天就是需要來對他進行一個修改，當用戶輸入信息有問題的時候，我們就再輸入框的后面給他一個友好提示。

【HTML中innerHTML屬性】

【JS中的常用事件】

onfocus 事件: 獲得焦點事件

onblur : 失去焦點

onkeyup : 按鍵抬起事件

    
        
        
        
        
        
    
    
        

            用戶名:

            密碼:

            確認密碼:

            郵箱:

            手機號:

            
            
        
    

定時器:

? setInterval("test()",3000) 每隔多少毫秒執行一次函數

? setTimeout("test()",3000) 多少毫秒之后執行一次函數

? timerID 上面定時器調用之后

? clearInterval()

? clearTimeout()

切換圖片

? img.src = "圖片路徑"

事件: 文檔加載完成的事件 onload事件

顯示廣告 : img.style.display = "block"

隱藏廣告: img.style.display ="none"

引入一個外部js文件

? 商品分類界面中，當我們點擊全選框的時候，我們希望選中所有的商品，當我們取消掉的時候，我們希望不選中所有的商品

? 事件 : onclick點擊事件

全選和全不選步驟分析:

1.確定事件: onclick 單機事件
2.事件觸發函數: checkAll()
3.函數要去做一些事情:

  獲得當前第一個checkbox的狀態
   獲得所有分類項的checkbox
  修改每一個checkbox的狀態

function checkAll(){
//                獲得當前第一個checkbox的狀態
                var check1 = document.getElementById("check1");
                //得到當前checked狀態
                var checked = check1.checked;
//                     獲得所有分類項的checkbox
//                var checks = document.getElementsByTagName("input");
                var checks = document.getElementsByName("checkone");
//                alert(checks.length);
                for(var i = 0; i < checks.length; i++){
//                     修改每一個checkbox的狀態
                    var checkone = checks[i];
                    checkone.checked = checked;
                }
            }

什么是DOM: Document Object Model : 管理我們的文檔 增刪改查規則

【HTML中的DOM操作】

一些常用的 HTML DOM 方法：
  getElementById(id) - 獲取帶有指定 id 的節點（元素） 
  appendChild(node) - 插入新的子節點（元素） 
  removeChild(node) - 刪除子節點（元素） 

  一些常用的 HTML DOM 屬性：
  innerHTML - 節點（元素）的文本值 
  parentNode - 節點（元素）的父節點 
  childNodes - 節點（元素）的子節點 
  attributes - 節點（元素）的屬性節點 


查找節點：
getElementById() 返回帶有指定 ID 的元素。 
getElementsByTagName() 返回包含帶有指定標簽名稱的所有元素的節點列表（集合/節點數組）。 
getElementsByClassName() 返回包含帶有指定類名的所有元素的節點列表。 

增加節點：
createAttribute() 創建屬性節點。 
createElement() 創建元素節點。 
createTextNode() 創建文本節點。 
insertBefore() 在指定的子節點前面插入新的子節點。 
appendChild() 把新的子節點添加到指定節點。 

刪除節點：
removeChild() 刪除子節點。 
replaceChild() 替換子節點。 

修改節點：
setAttribute()  修改屬性
setAttributeNode()  修改屬性節點

在我們的分類管理中,我們要能夠去修改我們的分類信息,當我們一點修改的時候,跳轉到一個可以編輯的頁面,這里面能夠修改分類的名稱,分類的描述,以及分類的商品

    
        
        
        
        
    
    
        
        

            

                
分類名稱
                

            
            

                
分類描述
                

            
            

                
分類商品
                

                    
                    

                        已有商品

                        
                            華為
                            小米
                            錘子
                            oppo
                        
                        

                         >>  

                         >>> 
                    
                    
                    
 
                        未有商品

                        
                            蘋果6
                            腎7
                            諾基亞
                            波導
                        
                        

                         <<  

                         <<< 
                    
                
            
            

                

                    
                
            
        
    

今天內容簡單回顧:

定時器:

? setInterval

? setTimeout

? clearInterval

? clearTimeout

控制圖片顯示隱藏

? img.style.display = "block"

? img.style.display = "none"

表單中常用的事件:

? onfocus: 獲取焦點事件

? onblur : 失去焦點的事件

? onkeyup: 按鍵抬起的事件

? onclick: 單擊事件

? ondblclick: 雙擊事件

表格隔行換色,鼠標移入和移除要變色:

? onmouseenter: 鼠標移入

? onmouseout: 鼠標移出

? onload: 文檔加載完成事件

? onsubmit: 提交

? onchange: 下拉列表內容改變

checkbox.checked 選中狀態

DOM的文檔操作:

? 添加節點: appendChild

? 創建節點: document.createElement

? 創建文本節點: document.createTextNode()

JS開發步驟:

1. 確認事件
2. 事件觸發函數
3. 函數里面要做一些交互 

?