目錄

• 篇一
• • 一、鼠標事件
  • 二、獲取元素的屬性值
  • 三、設置元素的屬性值
  • 四、移除屬性
  • 五、H5自定義屬性
  • • 1. 設置自定義屬性
    • 2. 獲取自定義屬性
  • 六、節點操作
  • • 1.兩種方法的區別
    • 2.節點概述
    • 3 節點層級
    • • 3.1 獲取節點
      • 3.2 子節點
      • 3.3 兄弟節點
      • 3.4 創建節點 ( 也稱動態創建元素節點)
      • 3.5 添加節點

篇一

本文記錄JavaScript API學習筆記，后續備查。

一、鼠標事件

1、鼠標經過：onmouseover
2、鼠標離開：onmouseout

二、獲取元素的屬性值

// 語法格式：1. element.屬性;2. element.getAttribute('屬性');

二者的區別：
element：獲取的是元素的內置屬性；
getAttribute：獲得的是自定義屬性；

三、設置元素的屬性值

// 語法格式：1. element.屬性 = '值'；2. setAttribute（'屬性', '值'）

示例如下：

// 修改類名為footerdiv.setAttribute('class', 'footer')

注：這里元素類型應寫作“class”，而不能寫成“className”。

四、移除屬性

// 語法：element.emoveAttribute('屬性'); // 示例： div.removeAttribute('index'); // index,索引號

五、H5自定義屬性

1. 設置自定義屬性

H5規定自定義屬性需以 data- 開頭

// 示例：<div data-index = '1'> </div>

或者，使用JavaScript 設置：

// 示例：element.setAttribute('data-index',2)

2. 獲取自定義屬性

1)兼容性獲取：

element.getAttribute ('data-index');

2) H5新增的獲取方式：

element.dataset.index // 或者 element.dataset ['index'] // IE 11才開始支持

• 注：這里的屬性名就不要加前綴data- ，因為dataset本身就表示了自定義屬性集合。dataset只能獲取“data-”開頭的*

3)特殊屬性名稱

// 示例：獲取自定義屬性的值“andy”<div data-list-name='andy'>// 將帶有“-”短橫線的屬性名稱合起來，按“駝峰命名法”寫成：console.log(div.dataset.listName) // 或者console.log(div.dataset ['listName'])

注：實際開發中，用 element.getAttribute，兼容性更好

六、節點操作

獲取元素通常使用兩種方式：

• 利用DOM提供的方法；
• 利用節點層級關系；

1.兩種方法的區別

1.DOM提供的方法獲取元素：邏輯性不強，而且繁瑣；
2.利用父、子、兄獲取元素：邏輯性強、操作簡單；但兼容性差。

2.節點概述

• 元素節點 nodeType 為1
• 屬性節點 nodeType 為2
• 文本節點 nodeType 為3
  文本節點包含文字、空格、換行等
  注：實際開發中，節點操作主要操作的是元素節點。

3 節點層級

父、子、兄層級關系

3.1 獲取節點

<div class = 'box'><span class = 'erweima'> × <span> </div>// 1）DOM方法獲取：var erweima = document.querySelector('.erweima')var box = document.querySelector('.box')// 2）節點方法獲取（直接用 “對象.parentNode” 即可得到）var erweima = document.querySelector('.erweima')erweima.parentNode

• 注：“parentNode”得到的是離元素最近的“父級節點”，如果找不到，則返回“null”。

3.2 子節點

1）parentNode . childNodes（標準）

返回值包含指定節點的子節點的集合，該集合為即時更新的集合（此集合包含空格、換行等）。
如需指定只獲取元素的子節點：

ul.childNodes[i].nodeType == 1 // (或==2、==3 )

2）parentNode . children（非標準——實際開發中常用）
此獲取方法得到了各瀏覽器的支持，可放心使用。

3) 獲取第1個子節點和最后1個子節點

parentNode.firstElementChild // 獲取第一個子節點 parentNode.lastElementChild // 獲取最后一個子節點

• 注：以上方法有兼容性問題；

  解決兼容性一般采用如下方法：
  先用children獲得元素，利用偽數組的特點，再取得第一個或最后一個子節點名稱。示例如下：

console.log(ul.children[0]); //取得第1個子節點； console.log(ul.children[ul.children.length-1]); // 取得最后一個子節點。

3.3 兄弟節點

1）nextSibling // 獲得下一個兄弟節點；
2）previousSibling // 獲得上一個兄弟節點，

var div = document.querySelector(‘div’)// 得到的是下一個兄弟節點，沒找到返回null；console.log(div.nextSibling);// 得到的是上一個兄弟節點，如果沒找到則返回null console.log(div.previousSibling)

• 注：以上兩種方式均返回所有節點（含元素、文本等）

3）返回元素兄弟節點

<div> 我是div </div> <span> 我是 span</span> // 只返回元素節點： // a、返回當前元素下一個兄弟元素節點，找不到則返回“null”。node.nextElementSibling;// b、返回當前元素下一個兄弟元素節點，找不到則返回“null”。node.previousElementSibling ;

• 注：a 和b有兼容性問題，目前的解決辦法是封裝函數：

function getNextElementSibling(element){var el = element;while(el = el.nextSibling) {if (el.nodeType == 1) {return el;}}return null; }

3.4 創建節點 ( 也稱動態創建元素節點)

應用場景：文章的評論區評論。

<ul> </ul> // 如果要創建 li 節點：var li = document.createElement('li')

3.5 添加節點

1）在指定元素之后加一個元素；

// 語法規范：node.appendChild(child);

【說明】 appendChild：在后面追加元素（類似數組中push的作用）。其中，“node” 是父級，“child” 是子級。

var ul = document . querySelector('ul') // 獲取父級ul.appendChild（'li'） // 在ul創建一個li

2）在指定元素之前添加一個元素對象

<ul><li> 123 </li></ul>node.insertBefore(child,指定元素)var lis = document . createElement('li')ul.insertBefore(lis,ul.children[0]) ;

總結

以上是生活随笔為你收集整理的前端学习笔记之 JavaScript WebAPIs（整理）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。