JavaScript基本API

前端学习 评论

DOM操作

获取元素

1
2
3
4
5
6
7
8
// 直接获取单个元素
document.getElementById("footer")
document.querySelector("#footer")

// 可以获取到多个元素，因此用数组存储，具体元素通过下标获取
document.querySelectorAll("#footer")[0]
document.getElementsByClassName("main")[0]
document.getElementsByTagName("header")[0]

创建元素

1
2
3
4
// 创建空元素，添加内容，追加至父元素
var pObj = document.createElement("p")
pObj.innerText = "123"
ele.appendChild(pObj)

添加HTML结构效率：innerHTML字符串拼接 < createElement() < innerHTML数组拼接

添加元素

1
2
3
4
5
6
7
8
9
Node.appendChild() // 元素末尾追加子元素

Obj.innerHTML = "标签及代码" // 重写某个元素内部内容

Node.insertBefore(Node1, Node2) // Node为父元素，在Node2前面插入Node1

Node.replaceChild(Node1, Node2) // Node为父元素，用Node1替换Node2

document.write() // 将原页面内容全部替换掉，会造成页面重绘

复制元素

1
2
3
4
5
node.cloneNode(deep? boolean)

// 默认false，浅拷贝，复制当前元素的所有属性，但不复制其子节点

// true为深拷贝，复制所有内容

删除元素

1
2
3
4
5
// 删除当前节点及子节点
Node.remove()
Node.parentNode.removeChild(Node)

Node.removeChild(Node1) // 删除Node节点中的子节点Node1

元素样式操作

Node.style.* = ""

类名操作

1
2
3
4
5
6
7
Node.classList // 以list形式返回元素的class属性

classList.add("className1","className2",...) // 向classList列表中添加类名，若指定类名存在则不添加

classList.remove("className","className",...) // 删除类

classList.toggle("className") // 切换类的有无

属性相关

1
2
3
4
5
6
7
8
9
10
Node.attributes // 获取当前元素的属性数组
Node.attributes[0].nodeValue // 获取当前元素的某属性的具体值

Node.getAttribute("attributeName") // 获取指定属性的值

Node.setAttribute("attributeName","attributeValue") // 设置/重写指定属性的值

Node.removeAttribute("attributeName") // 删除指定的属性

Node.className // 获取元素的class属性值，string格式

事件操作

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 绑定事件
Node.on* = function(){} // 直接绑定，重复绑定会覆盖

Node.addEventListener("",function(){}) // 可以重复使用，为一个动作绑定多个函数

<div on*=Function()></div>
<script>
Function(){}
</script>

// 解绑事件
Node.on* = null // 直接绑定的，直接解绑

Node.removeEventListener("",函数名) // 绑定时不能使用匿名函数
事件对象

event，只有事件发生了才会存在，表示本次事件。常用event.target获取触发该事件的元素

BOM操作

浏览器窗口进行的交互，核心是window

页面加载事件

1
2
3
4
window.onload = function(){}
window.addEventListener("load",function())

document.addEventListener(‘DOMContentLoaded’,function(){})

window.load是在页面的Dom元素，图片，css，flash加载完毕后才调用

⭐DOMContentLoaded是在DOM加载完毕后调用，不需等待图片等加载完，不会影响用户的体验

窗口大小事件

1
2
window.onresize = function(){}
window.addEventListener("resize",function () {})

窗口大小属性

window.innerWidth/Height：当前窗口宽高

页面滚动事件

1
2
3
scroll绑定滚动事件
window.onscroll = function(){}
window.addEventListener("scroll",function () {})

window.scrollX/Y：页面滚动的距离

Location（URL相关）

1
2
3
4
5
6
location.href // 返回完整的URL
location.host // 返回一个URL的主机名和端口
location.port // 返回一个URL服务器使用的端口号
location.pathname // 返回的URL路径名
location.search // URL 的查询部分（问号 ? 之后的部分）
location.hash // URL 的锚部分（从 # 号开始的部分）

location.assign("url")：跳转页面，记录历史，可回退

loaction.replace()：替换当前页面，不记录历史

loaction.reload()：页面重载

history（历史记录相关）

history.back/forward/go()：以当前页面为节点，在历史记录列表中跳转访问

navigator.userAgent结合loaction.href实现设备适配

鼠标操作

鼠标事件

1
2
3
4
5
6
7
8
click // 鼠标点击
mouseover // 鼠标指针进入被选元素或任意子元素时都会被触发
mouseenter // 只有在鼠标指针进入被选元素时被触发
mouseout // 鼠标指针离开被选元素或任意子元素时都会被触发
mouseleave // 只有在鼠标指针离开被选元素时被触发
mousemove // 鼠标在指定元素中移动时触发
mousedown // 鼠标在元素上方按下时触发
mouseup // 鼠标在元素上方松开时触发

鼠标坐标

1
2
3
4
event.offsetX/Y // 鼠标相对点击元素的位置
event.clientX/Y // 鼠标相对浏览器可视区的坐标
event.screen.X/Y // 鼠标相对于电脑屏幕的坐标
event.pageX/Y // 鼠标相对于HTML页面（包括卷去的部分）的坐标

元素位置属性系列

ele.offsetParent：指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的元素

ele.offsetTop/Left：当前元素相对于offsetParent节点上/左边界的偏移像素值

ele.scrollTop/Left：当前元素被滚动卷去的头部/左侧距离

元素尺寸属性系列

ele.clientW/H：元素可视部分包含padding，不包含边框的宽/高

ele.scrollW/H：元素本身包含padding，不包含边框的宽/高

ele.clientTop/Left：元素上/左边框宽度

ele.offsetW/H：元素可视部分包含padding、border，不包含margin的宽/高

存储对象

Web存储API

属性 描述
window.localStorage 在浏览器中存储 key/value 对。没有过期时间。
window.sessionStorage 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。

存储对象属性

length：返回存储对象中包含多少条数据

存储对象方法

方法 描述
key(n) 返回存储对象中第 n 个键的名称
getItem(“keyname”) 返回指定键的值
setItem(“keyname”,“value”) 添加键和值，如果对应的值存在，则更新该键对应的值
removeItem(“keyname”) 移除键值对
clear() 清除存储对象中所有的键

枫与风