學習WEBAPI(DOM)第二天

• 2019 年 10 月 8 日
• 筆記

第二天學習目標：

一、阻止超鏈接的默認跳轉行為

事件處理函數添加：return false

二、滑鼠進入事件和滑鼠離開事件

滑鼠進入事件：onmouseover  滑鼠離開事件：onmouseout

三、根據name屬性值獲取元素==>表單標籤,返回的是偽數組

document.getelEmentByName("name值");

四、根據類樣式的名字來獲取元素,返回的是偽數組

document.getElementsByClassName("類名");

五、根據選擇器獲取元素

documen.querySelector("選擇器名")

六、總結獲取元素方式

1、根據id屬性的值獲取元素,返回來的是一個元素對象  ​   document.getElementById("id的值");

2、根據標籤名獲取元素,返回來的是一個偽數組,裡面保存了多個DOM對象  ​   document.getelEmentByTagName("標籤名字");   

3、根據name屬性的值獲取元素,反回來的是一個偽數組,裡面保存了多個DOM對象  ​   document.getElementByName("name屬性的值");

4、根據類樣式的名字獲取元素,返回來的是一個偽數組,裡面保存了多個DOM對象  ​   document.getElementsByClassName("類樣式的名字")

5、根據選擇器獲取元素,返回來的是一個元素對象  ​   document.querySelector("選擇器的名字");

    6、根據選擇器獲取元素,返回來的是一個偽數組,裡面保存了多個的DOM對象  ​   document.querySelectorAll("選擇器的名字");

七、獲取焦點事件和離開焦點事件

1、獲取焦點事件：onfocus

2、離開焦點事件：onblur

​

### 八、innerText和textContent區別
>設置標籤中的文本內容,應該使用textContent屬性,Google,火狐支援,IE8不支援
​ 設置標籤中的文本內容,應該使用innerText屬性,Google,火狐,IE8都支援
​ 1、如果這個屬性在瀏覽器不支援,那麼這個屬性的類型是undefied
​ 2、判斷這個屬性的類型,是不是undefined,就知道瀏覽器是否支援

九、innerText和innerHTML區別

>**總結：如果想要(獲取)標籤及內容,使用innerHTML**

​ 如果想要設置標籤,使用innerHTML
​ 想要設置文本,用innerText,或者innerHTML,或者textContent

十、自定義屬性設置和獲取

設置自定義屬性:setAttribute("屬性的名字","屬性的值");

獲取自定義屬性的值:getAttribute("屬性名")

十一、移除自定義屬性或移除元素自帶的屬性

元素.removeAttribute("屬性名")  屬性名不是屬性值******

​