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

篇一

本文记录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- 开头

// 示例：
   
'1'> 

或者，使用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”

   
'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 获取节点

'box'>
     'erweima'> × 


// 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 
 我是 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 创建节点 ( 也称动态创建元素节点)

应用场景：文章的评论区评论。

   
 
  // 如果要创建 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）在指定元素之前添加一个元素对象

 

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