前端学习笔记之 JavaScript WebAPIs（整理）

刺骨的言语ヽ痛彻心扉 2023-02-18 14:10 1阅读 0赞

### 目录 ###

*  篇一
 *   *  一、鼠标事件
     *  二、获取元素的属性值
     *  三、设置元素的属性值
     *  四、移除属性
     *  五、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（'属性', '值'）

*示例如下：*

// 修改类名为footer
       div.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**有**兼容性问题**，目前的解决办法是封装函数：

#### 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]) ;