1. 程式人生 > >js_組成之DOM_dom對象的註冊事件及屬性操作

js_組成之DOM_dom對象的註冊事件及屬性操作

sele select 屬性 split() 反選 com api 9.png inner

1、Web Api的介紹

技術分享圖片

2、DOM相關概念

技術分享圖片

3、DOM常用操作

技術分享圖片

4、如何獲取網頁上(頁面)的元素

  1、易踩雷區

·    技術分享圖片

    2、正確案例

    技術分享圖片

    技術分享圖片

    技術分享圖片

    這2個方法是沒有兼容性的

    3、其他方法

    技術分享圖片

    技術分享圖片

    技術分享圖片

5、事件

  事件的套路:

  可以把每一步寫出來再寫代碼

  技術分享圖片

  ·1、註冊事件(方法: 寫在標簽上行內事件 寫在獲取的標簽上 內部事件 給標簽設置事件 addEvenListen)

   技術分享圖片

   點擊按鈕切換圖片

   技術分享圖片

6、DOM對象的屬性操作

  1、非表單元素(div span img等)的屬性

    技術分享圖片

    案例:1、點擊box 顯示和隱藏

    技術分享圖片

    技術分享圖片

    案例2:

    技術分享圖片

    技術分享圖片

    技術分享圖片

    技術分享圖片

  innerHTML和innerText的區別

  技術分享圖片

  技術分享圖片

  屬性的兼容性處理

  技術分享圖片

  2、表單元素(輸入框 下拉框等能和用戶交互的)的屬性

  技術分享圖片

技術分享圖片

    disabled checked selected 屬性值都是布爾類型

技術分享圖片

字符串變數組 str.split() 數組變字符串 arr.join()

  案例1:檢測用戶名和密碼

  技術分享圖片

  技術分享圖片

  案例2:運用selected

  技術分享圖片

  技術分享圖片

  案例3:搜索文本框---獲取焦點事件 失去焦點事件

    技術分享圖片

    技術分享圖片

    技術分享圖片

    案例4:全選 和 反選

    技術分享圖片

    技術分享圖片

    反選:

    技術分享圖片

    技術分享圖片

  2、自定義屬性操作

  技術分享圖片

js_組成之DOM_dom對象的註冊事件及屬性操作