篇一
- 一、鼠标事件
- 二、获取元素的属性值
- 三、设置元素的属性值
- 四、移除属性
- 五、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（整理）相关推荐

【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
web前端学习笔记之JavaScript
文章目录 1 JavaScript简介 2 JS基础 3 JS代码编写位置 3.1 行内式 3.2 内嵌式 3.3 外联式 4 基本语法 5 字面量和变量 5.1 字面量 5.2 变量 6 标识符 7 ...
『前端学习笔记』 JavaScript 事件与对象、DOM与BOM
参考视频:[极客学院]Web前端开发教学 - 第一部分:H5+CSS+JS 参考文档:JavaScript 教程 W3school 文章目录 DOM对象 HTML DOM 操作HTML 操作CSS E ...
前端学习笔记(五)-JavaScript语法基本概念
基本概念语法对大小写敏感采用驼峰命名风格使用C风格的注释 //单行注释 /** 多行注释**/ 复制代码严格模式,一种不同的解析与执行模型启动方式:在顶部添加代码"use str ...
[前端学习笔记] jQuery基础知识整理
一.jQuery基本概念 1. 什么是jQuery jQuery是一个快速简洁的JS库,封装了JS常用的功能代码,优化了DOM操作.事件处理.动画设计.Ajax交互等.我们可以快速查询使用里面的功能函 ...
前端学习笔记：Bootstrap框架入门
前端学习笔记:Bootstrap框架入门一.Bootstrap概述 1.基本信息 Bootstrap,来自 Twitter,是目前很受欢迎的前端框架.Bootstrap 是基于 HTML.CSS. ...
前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...
前端学习笔记：省市区三级联动
前端学习笔记:省市区三级联动一.数据库 sql表是自关联的表. 表名:province_city_district 字段: id:区域自身的id pid:区域的父级id name:区域自身的名字二 ...
前端学习笔记之CSS3基础语法与盒模型（二）
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...

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

目录

篇一