JavaScript知识路径图，含大部分知识点
2022-03-14 18:28:19 10 举报AI智能生成
JavaScript知识路径图，包含大部分知识点
作者其他创作
大纲/内容
DOM
概念
Document Object Model
文档对象模型
作用
改变HTML属性
改变HTML元素
改变CSS样式
对事件作出反应
查找
通过ID
getElementById()
通过标签名
getElementByTagname（‘h1’）
通过类名
getElementByClassName(’box‘)[]
通过选择器
querySelector()
querySelectorAll()[]
通过name属性
getElementByName（）
NodeList元素对象
元素属性
documen.head
document.title
document.body
document.documentElement
documen.URI
documen.documentURI
documen.baseURI
document.write
document.writeln
document.cookie
cookie
seession
localstorage
本地存储
方法
sessionstorage
属性节点
btn.value
文本
innerTEXT
innerHTML
outerHTML
textContent
attributes
parentNode父节点
childNodes
e.target
e.target
点击的元素
e.type
事件
e.view
Window
e.which
e.preventDefault（）阻止默认事件
e.stopPropagation（）阻止事件冒泡
e.cancelBubble=true 阻止冒泡 IE6-8
e.x/y
e.screenX/Y
相对于电脑屏幕
e.pageX/Y
相当于文档页面 IE9+
可用于节点
style
style
element.style
element.currentStyle
getComputedStyle（obj，null/false）[value]
element.className
方法
增
appendChild()
不能直接添加字符串
insertAdjacentHTML（“position”，“text”）
beforebegin
afterbegin
begoreend
afterend
appen（）
createElement（）
createTextNode（）
createAttribute（）
creatComment（）注释
删
removeChild()
改
set/getAttribute()
insertBefore（new，old）
可用此方法创建insertAfter（）
replaChild（new，old）替换
cloneNode（参数）复制节点
true 深拷贝
flase浅拷贝
节点关系
hasChildNodes（）
属性
.childNodes
一行一个
children
firstChild
第一个子节点，包含文本空格
lastChild
firstElementChild
第一个元素节点
lastElementChild
previousSibling
上一个兄弟节点
previousElementSibling
.nextSibling下一个兄弟节点
nextElementSibling
parentNode
parentElement
nodeType
nodeName
nodeValue
节点类型
1
element_node
2
attribute_node
3
text_node
4
cdata_section_node
5
entity_peference_node
6
entity_node
7
processing_instruction_node
8
comment_node
9
document_node
10
document_type_node
11
document_fragment_node
12
notation_node
属性对象
方法
getAttributeNode('class')
getAttribute('class')
setAttribute('class','new')
removeAttribute('class')
hasAttribute('class')
属性
arrtibutes
arrtibutes[]
arrtibutes.class
arrtibutes
attributeNode（）
class
增div.className=“new”
删div.className=‘ ’
改div.className=“new old”
查div.className
类数组.classList
add（）追加
.value替换
remove（）
replace（old，new）
toggle（“ ” ）切换
自定义属性
data-
设置
表单
document.forms
集合HTMLCollection
获取
document.forms.formName.elements
表格
insertRow（num）
insertCell（num）
动画
document.createDocumentFragment()
非行内样式
obj.getComputedStyle（obj,伪类（没有为null））[属性名]
obj0currentStyle[属性名]
事件
事件类型
onclick
鼠标点击触发
ondblclick
双击
onmouseup
鼠标弹起触发
ononmousemove
鼠标移动触发
onmouseover
鼠标经过触发，冒泡
onmouseout
鼠标离开触发 冒泡
onmouseenter
同上的效果，不冒泡
onmouseleave
鼠标离开 不冒泡
onmousedown
鼠标按下触发
contextmenu
右键菜单
onblur
失去鼠标焦点触发
onfocus
获得鼠标焦点触发
load/scroll
UI事件
onmousewheel
滚轮事件
textinput
文本事件
键盘
onkeydown
onkeyoress
onkeyup
组合键 需要码表
e.keyCode
onreadystatechange页面状态改变
document.readyState查看状态
compositionstart
合成事件
输入字符触发
绑定事件
动态绑定事件
add/removeEventListener('click',name,false)
false会冒泡
true捕获
name.事件=function（）{}
静态绑定
javascript：alert（）
执行不返回值
alert（）
test（）
DOM事件流
事件捕获
事件处于目标阶段
事件冒泡
事件委托
利用事件捕获
阻止默认行为
e.preventDefault（）IE11
e.returnValue=false IE10以下
删除事件
eventTarget.onclick=null
eventTarget.detachEvent（on+eventName，callBack，false）
BOM
window
全局变量属于window属性
全局函数属于window方法
对象
window
top
document
事件
onload
onresize
属性
浏览器信息
宽度
高度
screnn屏幕
窗口再屏幕上的位置
location对象
返回对象
href
.search
nabigator对象
.userAgent
histroy对象
foeward（）下一页
back（）上一页
go（num）
方法
alert（）弹窗
scroll（x，y）
confirm
prompt（）
open(url，'','height=200,width=20px,top=20......')
close ()关闭自己
定时器
setTimeout （fn,毫秒数）
clearTimeout（timeID）
setInterval（)
clearInterval（timeID）
动画
window.requestAnimationFrame(fn)
screen
Location
History
Navigator
弹出框
Timing
Cookies
特效
offset偏移量
.offsetParent
.offsetTop
元素element相对带有定位父元素上方的偏移量
.offsetLfeft
.offsetWidth
padding*2 + width +border*2获取自身的宽度
.offsetHeight
padding *2+height+border*2获取自身的高度
和style的区别
style.width带单位，不包含padding和border 可读写可获取和赋值
offset用于获取元素的位置 offsetLeft/Top
client
.clientTop
border
.clientLeft
border
.clientWidth
width+padding*2
clientHeight
width+padding*2
用于获取元素的大小 clientWidth/Height
scroll
.scrollLeft
被卷上去的上测距离
.scrollTop
被卷上去的左测距离
.scrollWidth
自身的实际宽度
.scrollHeight
自身实际高度
获取滚动距离window.pageXOffset/YOffset
移动端特效
事件
touchstart
touchmove
touchend
事件对象
touches
触摸点的列表
targetTouches
正在触摸当前DOM元素的列 表
changedTouches
手指状态发生改变的列表
click延迟300ms解决
禁止用户缩放
meta content=“user-scalable=no”
touch封装函数
fastclick插件
插件
swiper插件
轮播图
flexible
自适应
搭配cssrem插件
data-dpr
font-size
内置对象
Array数组
定义
=[ 1,2,3]
= 【[ ] [ ]】二维数组
=new Arrary（长度）对象表达式
赋值
不要求数据类型严格一致
访问
arr[0]
方法
sort（）排序
拼接
转化为字符串
截取
slice（开始位置，结束位置）[ )
删除
splice（参数1，参数2，参数3）
delete arr[0]
删除和添加
pop（）删除
push（内容）
shift（）
unshift（内容）
判断
Array.isArray（arr）
查找
indexOf（内容）
lastIndexOf（）
find（）
findIndex（）
includes（内容）
属性
length
遍历
for
for...of
for...in
优化的for
forEach
map
去重
1.Array.from（new Set（arr））ES6
2for + .arr.splice()
3.for + sort+push
4.indexof+push
5.递归
6.map
Math
数学运算
pow（2,3）2的3次方
sqrt（）开方
绝对值
Math.random（）随机数
默认 0-1
*10 0-9
*10+1 1-10
判断符号
Math.sign（）
数值
圆周率
Math.PI
取整
向上取整
向下取整
四舍五入
Math.round（）
最大值
Math.max（1,2,3）
最小值
Math.min（1,2,3）
Date日期
方法
getMonth（）从0开始
getFullYear（）
getDay（）
getHour（）
getSeconds（)
getMinutes()
getMIllisecinds()
getTime（）时间戳
格式化
toString
toDateString
toLocaleDateString 年月日
toLocaleTimeString时间
定义
new Date（）
String字符串
转义字符
\'
\"
\n
\\反斜杠
\b退格
换行
+ 拼接
``; es6
\ 转义字符
长度
.length
str[2]取值
方法
查找
indexOf（'',指定位置）指定字符串首次出现的位置
lastIndexOf（'',指定位置）
找不到返回 -1
search（‘内容’）返回位置
取字符
charCodeAt（）Unicode编码
String.fromCharCode（72）
charAt（2）取字符
提取字符串
substring（start，end，长度）
slice（start，end）
substr（start，长度）
替换
replace（‘’，‘’）返回新字符串
大小写
toLowCase（）
toUpperCase（）
连接
concat（）
空格处理
trim（）删除头尾空格
转换为数组
str.split（分隔符）
对象
创建方法
字面量
调用系统构造函数
定义构造函数
工厂方式
方法
删除delete
函数
作用
封装
重用
关键字 function
函数体{}
返回值return
具名函数
匿名函数（函数表达式）
作用域
全局作用域
局部作用域
块级作用域ES6
递归调用
参数
形参
实参
函数内部未var声明变量，则变为全局变量
回调函数
arguments接收参数
js没有重载
注释
/**
* 方法名
*所属类名
*@param 参数类型
*return 返回值类型
*功能描述
**/
语法基础
表达式和语句
表达式会产生值
表达式构成语句
变量
var
可只定义不赋值
多个变量
字符 数字 _ $ 组成 小写驼峰
数据类型
简单类型
分支主题
String 字符串
转为字符串
.length
数字Number
数值类型
数值范围
非数值
数值转换
布尔
Null
Undefined
复杂类型
引用类型（对象）
检测typeof（）
undefined
boolean
string
number
object
function
3个特殊情况
申明 不赋值
不申明 不赋值
不申明 只赋值
变量提升和预解析
运算符（操作符）
算术运算符
+
-
*
/
%取模（求余）
++和--
一元运算符
取幂**
赋值运算符
=
+= -= *= /=
关系运算符
>= <= > <
==
===
！=
！==
？？空值合并操作符
条件运算符
？： 三元运算符
逻辑运算符
&&与
||或
！非
为任意数据类型两次取反，转换为布尔值
，逗号操作符
（）圆括号操作符
Void
type=“Javascript：void（alet（a））”
href=“Javascript：void（0）”
阻止a标签的默认行为
输出
alert
prompt
console.log
confirm
documen.write（）
debugger；调试
分支循环
分支
if else
switch （）case ’ 1‘：
循环
for
while
do while
break和continue
问题
null和undefined区别
null：空值
undefined：未初始化
js精度
toFixed(num) 方法来保留小数 结果不精确
基础知识
历史
是什么
运行在客户端的脚本（script）语言
基于对象
动态性
跨平台性
可以基于Node.js（服务端开发）用作后端
组成
ECMAScript
DOM
BOM
书写位置
行内
内嵌
head中
body中
外部
规范
变量命名规范
大小写驼峰式
函数命名
can
has
is
手风琴形式
注释
函数注释
单行/多行注释
注意且重要
注意
重要 常用
Emmet语法
# id
. class
> 子节点
+ 兄弟节点
^ 父节点
（）分组
[]属性
$ 编号
0 条评论
下一页
