JS语法与dom操作（新手小白必看）

月挽星回#

已于 2025-03-21 20:23:33 修改

阅读量1.1k

点赞数 39

文章标签： javascript 前端 html

于 2025-03-21 20:21:59 首次发布

本文链接：https://blog.csdn.net/m0_70395069/article/details/146425250

版权

一、JS语法

1.引用

js引用分为外部、头部和body内部

外部引用

<script src="script.js"></script>

2 .变量

变量的声明let，var，const；

let

可以声明局部变量，只能声明一次，没有变量提升效果。

变量提升效果就是在声明之前就可以使用变量

var

可以声明全局变量，有变量提升效果，可以声明多次，是一种早期的声明方式

const

声明常量，必须赋值，不能修改

3.数据类型

js中数据类型有undefined,number,string,bool,null；

可以使用typeof()对其数据类型进行检测；

undefined

未进行赋值时的数据类型和值都是undefined;

number

包括float和int

string

字符串型

bool

布尔型，分为true和false，注意是小写

null

空值

4.运算符

运算符分为算术运算符、赋值运算符、比较运算符、逻辑运算符、三元运算符

算术运算符

+、-、*、/、%

赋值运算符

= += -= *= /= %= ++a a++

比较运算符

> < >= <= == != ===

值得一提的是===与==

==只是相等，不管你的数据类型，只要值一样就相等

===要值和数据类型都一样才相等

逻辑运算符

&& || ！

三元运算符

a>b?"hello":"hi"

如果符合返回hello，不符合返回hi

5.输入与输出

输入

alert

弹出警告框，没有返回值

confirm

弹出确认框，返回布尔值

prompt

弹出输入框，返回字符串

输出

conlose.log

将内容输出到控制台

6.分支

单分支

if(){}当条件为真，执行语句块

双分支

if(){}else(){}当条件为真，执行语句块，当条件为假，执行其他语句

多分支

if(){}else if(){}else(){}可以出现多个条件，每一个条件逐一进行比较；

switch分支

switch(参数){

case "":

break;

case "":

break;

default:

}

当其他条件都不符合时，default执行

案例：

7.循环

for

for(起始条件；终止条件；步长)

与C语言一样

for of

用于遍历数组

for in

用于遍历对象

for in遍历数组返回的是索引，for of遍历数组返回值，for of遍历对象报错

while

与C语言一样

do while

先执行do里面的，在进行判断

8.函数

参数

js中函数有形参可以不传实参，不会报错，调用形参的地方会显示undefined

js中函数返回多个值，只有最后一个有效

默认参数

取剩余参数

...params,可以输入多个值，类似于python中的*args

案例

解构参数

可以用于传递对象

匿名函数

function(){}

（匿名函数）（）；特殊写法，只能执行一次

匿名函数可以作为实参赋予形参

箭头函数

无参箭头函数

有参箭头函数

箭头函数作为实参赋予形参

this

匿名函数中this有独立作用域；当前所属对象

箭头函数this没有作用域，直接获取到了window

9.字符串

length 返回长度

charAt 返回索引的字符

concat 把多个字符串连接起来

indexof 查找字符在原字符串中最后一次出现的位置，若未出现，返回-1

substring 提取字符串中介于两个指定下标之间的字符

slice 切片

toUpperCase 把字符串转换成大写

trim 去除字符串首尾的空白字符

replace 用于替换字符串指定的子字符串

split 把字符串分割成字符串数组

startsWith 以...开头

endsWith

toLowerCase 转小写

10.数组

push 从尾部插入

pop 从尾部删除

shift 从首部删除

unshift 从首部插入，可以插入多个元素

splice 可以插入，可以删除，如果删除，把第二个参数写成1

forEach 数组的每一个元素执行一次

every 是数组的一个迭代方法，用于测试数组的所有元素是否通过了有函数提供的测试满足返回true

例子：判断是否全大于0

some 满足一个条件

find 从左到右找，找到一个满足条件的就不找了

filter 找到所有满足条件的

reverses 逆序，直接作用于本体

sort 排序，直接作用于本体，数字不能直接进行排序，默认是字符的unicode码

includes 包含返回true或false

slice 切片

11.对象

类似于python中的字典

创建

obj.键名或obj[""键名]

遍历

对象中，如果键和值的名称一样，可以省略一个

方法

keys 返回键数组

values 返回值数组

entries 返回键值对

assign 将两个对象进行拼接，遇到键名相同的，第二个进行覆盖

freeze 冻结对象，让其无法做出行动

seal 封闭一个对象，阻止添加新属性并将所有现有属性标记为不可配置，但属性值仍可修改

返回对象所有属性的名称，并包含在一个数组中

12.原型与原型链

原型 __proto__

本身对象没有的属性可以去原型中去找

通过原型，添加方法

13.常用对象方法

Math

abs 绝对值

ceil 向上取整

floor 向下取整

round 四舍五入

max 最大值

min 最小值

pow 次幂

sqrt 平方根

random 随机数0-1

sin cos tant 三角函数

Json

序列化将对象转换成字符串

反序列化将字符串转换成对象

json 所有语言通用格式

JSON.stringify 序列化

JSON.parse 反序列化

Date

创建对象，获取当前时间

let dat=new Date();

获取年月日时分秒

值得注意的是月份从0开始计算的，我们要+1；

时间戳 getTime

14.异常处理

案例

15.正则表达式

格式

let reg=/正则表达式/

测试是否符合

let result= reg.test(目标段落文字) 返回true或false

案例校验qq密码

二、dom操作

dom 是document object model 文档对象模型用js来操作页面

1.获取元素

获取元素分为两种方式，会其中一种即可

a.get

document.getElementById 根据id获取唯一元素

document.getElementByClassName 通过类名获取多个元素，返回数组

document.getElementByTagName 通过标签名获取多个元素，返回数组

返回发的数组不支持forEach

案例：

b.query

通过选择器来获取元素

document.querySelecter 根据选择器找到第一个匹配的元素，返回单个元素

document.querySelecterAll 返回多个元素，数组存储

支持forEach

案例

2.绑定事件

windows

onload 加载，先写script再写html时

onscroll 滚动事件 scorllY 滚动的位置y

onresize 窗体尺寸发生变化时触发

onclick 点击

案例：

鼠标

onclick 点击

ondblclick 双击

onmouseenter 鼠标进入

onmousemove 鼠标移动

onmouseleave 鼠标离开

onmousedown 鼠标按下

onmouseup 鼠标抬起

document.oncontexmenu 鼠标右键，返回false不触发菜单

键盘

onkeydown 键盘按下

onkeypress 键盘按下

onkeyup 键盘抬起

聚焦与失焦

onfocus 聚焦

onblur 失焦

input

oninput 输入内容改变

onchange 失焦时检测是否改变

form

onsubmit 用于指定当表单提交时要执行的 JavaScript 代码。

e鼠标的事件参数

e.pageX 鼠标的x位置

e.pageY 鼠标的y位置

e.data 按下的是哪个键

e.stopPropagation(); 阻止事件穿透

e.preventDefault() 阻止默认事件

事件注册

普通的事件如果重复对一个元素绑定同一个事件多次，会发生覆盖

事件注册所有事件名不带on

document.addEventListener("click",function) 绑定事件

案例

.removeEventListener("事件名",函数名)) 移除事件

3.获取、设置元素的内容，属性，样式

元素内容

innerText 只关注内容

innerHtml 关注标签

属性

元素属性

getAttribute 获取属性

setAttribute 设置属性

hasAttribute 看看有没有属性

removeAttribute 移除属性

简写

this.属性名获取属性

this.属性名=属性值

案例

类操作

假定元素是div

div.classList 查看类，返回一个数组

div.classList.add 添加类

div.classList.remove 删除类

div.classList.contains 判断是否有这个类名

div.classList.toggle 切换，没有就添加，有就删除

元素样式

通过修改属性的方法修改元素样式，只能获取行内样式style，属性的命名要用小驼峰，设置样式只能这一种方式

这里以获取到的div为例

div.style.backgroundColor=“blue”;

-要删除，字母大写

获取内部样式表或者外部样式表样式

getComputendStyle(obj).样式属性名

案例：颜色改变器

案例：拖曳

案例：页签，标签页

4.相关元素

找到父元素，获取获取子元素

这里以div是父元素为例

div.children 返回子元素数组

div.firstElementChild 返回第一个子元素

div.lastElementChild 返回最后一个子元素

获取父元素

子元素.parentElement

获取兄弟元素

以div为例

div.previousElementSibling 上一个

div.nextElementSibling 下一个

案例：

5.元素的创建与删除

创建元素

元素名=document.createElement("标签名")

插入父结点

document.body.appendChild(元素名)

删除元素

元素.remove()