目錄

• 篇一
• • 一、鼠標(biāo)事件
  • 二、獲取元素的屬性值
  • 三、設(shè)置元素的屬性值
  • 四、移除屬性
  • 五、H5自定義屬性
  • • 1. 設(shè)置自定義屬性
    • 2. 獲取自定義屬性
  • 六、節(jié)點(diǎn)操作
  • • 1.兩種方法的區(qū)別
    • 2.節(jié)點(diǎn)概述
    • 3 節(jié)點(diǎn)層級(jí)
    • • 3.1 獲取節(jié)點(diǎn)
      • 3.2 子節(jié)點(diǎn)
      • 3.3 兄弟節(jié)點(diǎn)
      • 3.4 創(chuàng)建節(jié)點(diǎn) ( 也稱動(dòng)態(tài)創(chuàng)建元素節(jié)點(diǎn))
      • 3.5 添加節(jié)點(diǎn)

篇一

本文記錄JavaScript API學(xué)習(xí)筆記，后續(xù)備查。

一、鼠標(biāo)事件

1、鼠標(biāo)經(jīng)過(guò)：onmouseover
2、鼠標(biāo)離開(kāi)：onmouseout

二、獲取元素的屬性值

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

二者的區(qū)別：
element：獲取的是元素的內(nèi)置屬性；
getAttribute：獲得的是自定義屬性；

三、設(shè)置元素的屬性值

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

示例如下：

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

注：這里元素類型應(yīng)寫(xiě)作“class”，而不能寫(xiě)成“className”。

四、移除屬性

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

五、H5自定義屬性

1. 設(shè)置自定義屬性

H5規(guī)定自定義屬性需以 data- 開(kāi)頭

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

或者，使用JavaScript 設(shè)置：

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

2. 獲取自定義屬性

1)兼容性獲取：

element.getAttribute ('data-index');

2) H5新增的獲取方式：

element.dataset.index // 或者 element.dataset ['index'] // IE 11才開(kāi)始支持

• 注：這里的屬性名就不要加前綴data- ，因?yàn)閐ataset本身就表示了自定義屬性集合。dataset只能獲取“data-”開(kāi)頭的*

3)特殊屬性名稱

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

注：實(shí)際開(kāi)發(fā)中，用 element.getAttribute，兼容性更好

六、節(jié)點(diǎn)操作

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

• 利用DOM提供的方法；
• 利用節(jié)點(diǎn)層級(jí)關(guān)系；

1.兩種方法的區(qū)別

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

2.節(jié)點(diǎn)概述

• 元素節(jié)點(diǎn) nodeType 為1
• 屬性節(jié)點(diǎn) nodeType 為2
• 文本節(jié)點(diǎn) nodeType 為3
  文本節(jié)點(diǎn)包含文字、空格、換行等
  注：實(shí)際開(kāi)發(fā)中，節(jié)點(diǎn)操作主要操作的是元素節(jié)點(diǎn)。

3 節(jié)點(diǎn)層級(jí)

父、子、兄層級(jí)關(guān)系

3.1 獲取節(jié)點(diǎn)

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

• 注：“parentNode”得到的是離元素最近的“父級(jí)節(jié)點(diǎn)”，如果找不到，則返回“null”。

3.2 子節(jié)點(diǎn)

1）parentNode . childNodes（標(biāo)準(zhǔn)）

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

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

2）parentNode . children（非標(biāo)準(zhǔn)——實(shí)際開(kāi)發(fā)中常用）
此獲取方法得到了各瀏覽器的支持，可放心使用。

3) 獲取第1個(gè)子節(jié)點(diǎn)和最后1個(gè)子節(jié)點(diǎn)

parentNode.firstElementChild // 獲取第一個(gè)子節(jié)點(diǎn) parentNode.lastElementChild // 獲取最后一個(gè)子節(jié)點(diǎn)

• 注：以上方法有兼容性問(wèn)題；

  解決兼容性一般采用如下方法：
  先用children獲得元素，利用偽數(shù)組的特點(diǎn)，再取得第一個(gè)或最后一個(gè)子節(jié)點(diǎn)名稱。示例如下：

console.log(ul.children[0]); //取得第1個(gè)子節(jié)點(diǎn)； console.log(ul.children[ul.children.length-1]); // 取得最后一個(gè)子節(jié)點(diǎn)。

3.3 兄弟節(jié)點(diǎn)

1）nextSibling // 獲得下一個(gè)兄弟節(jié)點(diǎn)；
2）previousSibling // 獲得上一個(gè)兄弟節(jié)點(diǎn)，

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

• 注：以上兩種方式均返回所有節(jié)點(diǎn)（含元素、文本等）

3）返回元素兄弟節(jié)點(diǎn)

<div> 我是div </div> <span> 我是 span</span> // 只返回元素節(jié)點(diǎn)： // a、返回當(dāng)前元素下一個(gè)兄弟元素節(jié)點(diǎn)，找不到則返回“null”。node.nextElementSibling;// b、返回當(dāng)前元素下一個(gè)兄弟元素節(jié)點(diǎn)，找不到則返回“null”。node.previousElementSibling ;

• 注：a 和b有兼容性問(wèn)題，目前的解決辦法是封裝函數(shù)：

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

3.4 創(chuàng)建節(jié)點(diǎn) ( 也稱動(dòng)態(tài)創(chuàng)建元素節(jié)點(diǎn))

應(yīng)用場(chǎng)景：文章的評(píng)論區(qū)評(píng)論。

<ul> </ul> // 如果要?jiǎng)?chuàng)建 li 節(jié)點(diǎn)：var li = document.createElement('li')

3.5 添加節(jié)點(diǎn)

1）在指定元素之后加一個(gè)元素；

// 語(yǔ)法規(guī)范：node.appendChild(child);

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

var ul = document . querySelector('ul') // 獲取父級(jí)ul.appendChild（'li'） // 在ul創(chuàng)建一個(gè)li

2）在指定元素之前添加一個(gè)元素對(duì)象

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。