当前位置：首页 > news >正文

JS Web

news 2025/2/25 9:42:42

Web API

浏览器内置window对象，是最顶层的对象；

它代表的是整个浏览器js运行环境，所以这个对象的属性方法可以直接在js代码中使用，无需加 window. 作为前缀；

所有其他对象都是它的属性，通过它我们可以访问到其他重要的内置对象，例如history、location、document。

prompt、alert、confirm

prompt()；//输入框

alert()；//警告框

confirm()； //确认框

history、location

history：当前浏览器的浏览历史对象

history.back()； //返回上次浏览地址（等于点击浏览器的返回按钮）

history.go(-1)；//同上

history.forward()；//前进一页（等于点击浏览器的前进按钮）

location：当前浏览器的地址对象

location.href = 'main.html'；//设置当前浏览地址

location.reload()；//重新加载网页（刷新网页）

localStorage、sessionStorage

localStorage：相当于本地键值对数据库，用于存储浏览器中的一些数据，以键值对的形式存储；关闭浏览器窗口后，不会丢失数据

localStorage.setItem('myCat' , 'Tom')； //存入/修改数据

const cat = localStorage.getItem('myCat')；//获取数据

localStorage.clear()；//清除localStorage数据

sessionStorage：同样的，就是关闭浏览器窗口后，会丢失数据

close、open

close()；//关闭当前窗口

open()；//打开一个新的窗口

open('https://www.byhy.net')；//打开新窗口，访问指定url

open('https://www.byhy.net' , '_self')；//直接在本窗口打开访问指定urls

document

是window对象内置的属性，也可以说是js内置对象window.document；

其对应的是浏览器窗口内置的整个DOM对象；

DOM文档对象模型：

浏览器加载网页后，会在浏览器内部（内存）中创建一个文档对象模型DOM对象，对应树状的文档结构。

document对象的一些内置方法可以获取到DOM对象中的每个节点对象

获取元素对象 —— querySelector、querySelectorAll

querySelector ：返回的是HTML中第一个符合选择表达式的元素

querySelectorAll：返回的是所有符合选择表达式的元素（一个类似数组的对象里面存放了所有符合条件的 DOM 对象）

// 数组里面的第2个元素

document.querySelectorAll('p')[1]

// 遍历

ps = document.querySelectorAll('p')

for (let p of ps) {

console.log(p)

}

通过css选择器获取

document.querySelector('a');

根据id属性获取

document.querySelector('#result');

document.getElementByTagName("")

documrnt.getElementByClassName("")

document.getElementById("")

创建元素对象

document.createElement('span');

添加元素对象

document.append(span);

// 返回 body元素对象

document.body

// 返回 head元素对象

document.head

// 返回当前窗口的标题

document.title

// 返回当前窗口的url地址

document.URL

元素通用属性

EventTarget类型所提供的方法

addEventListener(); //用来注册处理该对象的事件的处理函数

removeEventListener(); //用于取消注册处理该对象的事件的处理函数

再触发事件，不会执行它的回调函数

Node类型所提供的属性和方法

childNodes ：获取元素的所有子节点对象（不仅返回html元素对象，还有文本和注释）

textContent ：获取元素内部的所有文本内容，包括隐藏部分（style="display:none"）

该属性也可用来设置元素内部的文本内容

parentElement：返回这个Node的父HTML元素

Element类型所提供的属性和方法

id：获取或设置该元素的id属性

children：获取该元素的所有子元素（只返回html元素对象）

innerHTML、outerHTML：innerHTML用于获取一个元素对象内部HTML文本；outerHTML用于获取一个元素对象的全部HTML文本

当然除了获取HTML文本，也可以设置HTML文本

获取内部元素

获取上级元素

closet()；//获取符合条件的最接近调用对象的上级元素（包括自身）；其中参数是一个css选择表达式

添加元素

after()；//给当前元素节点添加一些后续弟弟节点

before()；//给当前元素节点添加一些前置哥哥节点

append()；//给当前元素节点添加一些子节点

如果添加的是一个元素的话，需要document.createElement()先创建一个元素对象；然后再调用新对象的方法创建内容，比较麻烦；这里介绍insertAdjacentHTML()方法，可以直接写元素对应的html文本内容。

两个参数：1参指定插入节点的位置；2参指定要插入的节点对应的HTML文本

afterbegin

插入内容作为当前节点的 第一个子节点

beforeend

插入内容作为当前节点的 最后一个子节点

beforebegin

插入内容作为当前节点的 前一个哥哥节点

afterend

插入内容作为当前节点的 下一个弟弟节点

删除元素

remove()；//用于删除元素自身

还可以

<body><p id='target1'>原来的元素1</p><p id='target2'>原来的元素2</p>
</body><script>document.getElementById('target1').outerHTML="";
</script>

替换元素

outerHTML 、 innerHTML 属性：innerHTML只换内部的东西，外部的不换

replaceWith()；//必须先创建一个Element对象

获取元素属性

getAttribute()；//返回值都是字符串的形式

对于元素的标准属性可以通过元素对象.属性的方式获取

设置元素属性

setAttribute()；//两个参数都是字符串的形式

同样的，对于元素的标准属性可以通过元素对象.属性的方式设置

删除元素属性

removeAttribute()；

className

用来获取和设置元素的class属性；但它是对class属性整体进行操作的

classList

只想单独操作class的某个属性，而不改变其它属性

该属性有三个较为常用的方法：

contains：用于判断class属性是否包含某个属性值
remove：删除某个属性，其他属性不动
add：添加某个属性

举个栗子：

<head><style>.hide {display:none}</style>
</head>
<body><button>隐藏/显示</button><div id='div1' class="type1">元素内容
</div><script>// 注册事件回调函数document.querySelector('button').addEventListener("click", function (){const ele = document.getElementById("div1"); if (ele.classList.contains('hide')){ele.classList.remove("hide");}else{ele.classList.add("hide");}});</script>
</body>

HTMLElement类型所提供的属性和方法

innerText、outerText：用于获取/设置元素内部的文本内容

注意：

1.对于innerText，Node类型的textContent属性也可以

区别在于：innterText展示的是该元素对应的可呈现在界面上的文本内容；而textContent展示的是元素内部所有的文本内容，包括不可见部分（style="dispaly = none"）

而且innterText展示的时候有界面呈现，就是说在界面上什么样就输出什么样；textContent没有

2.outerText在设置元素的文本内容的时候，它是把整个元素变成了一个文本节点（原来的节点没有了，变成了一个新的文本节点）

focus()；//在这种元素可以获取输入焦点的前提下，可让该元素获取输入焦点

click()；//模拟鼠标点击该元素

style属性 改变单个属性时很有用，它的属性值是 CSSStyleDeclaration 类型，类似 Object类型，可通过这个对象的属性来获取、设置元素的样式

<a id="link" style='color:green;text-decoration:underline'  href="/" >一个链接</a>let a = document.getElementById('link')
a.style.color = 'red'
a.style['text-decoration'] = 'none'

元素自身属性

a

常用属性：hash、host、hostname、href、origin、port、protocol、search

button

常用属性：disabled

表示该按钮是否被禁用，禁用为true，可用为false

image/img

常用属性：alt、height、width、src

alt：当图片显示失败时（eg.url错误），在图片位置显示的文本内容

height：img元素的高度，数字表示像素

src：对应img元素的url地址

input

通用属性

value：对应输入框里的文本

name

type

disable：表示该按钮是否被禁用，禁用为true，可用为false

类型为text，email，password，number 等这些输入框input的常见属性

maxLength/minLength：最多和最少输入的字符数量

placeholder

readOnly

size

select(); //全部选中输入框里的文本，但在调用该方法前通常需要先调用focus方法

setSelectionRange(selectionStart，selectionEnd); //选中指定部分内容，其中selectionStart指定了选中的开始字符索引；selectionEnd指定了选中的结尾字符索引 +1 (索引从0开始计数)

setRangeText(replacement，start，end); //用新字符串替换输入框中指定部分内容，其中replacement指定用来替换的字符串；start，end为可选参数，若缺省则会替换用户选中的那部分内容，若用户没有选中内容，就插入到光标的位置

其中类型为number的input输入框还有如下的属性：

max、min：指定了输入框可输入数字的最大最小值，一旦超过了该值就会有错误提示

step：表示输入框数字的增减单位；在指示输入框点击上下箭头时，会按这个step为粒度进行增减

类型为raido(单选按钮)、checkbox(勾选框)的input的常用属性

checked：表示是否选中

defaultChecked：表示页面刚加载完成时是否选中

textarea

value

rows/cols：分别指定输入框的行数和列数

disabled

maxLength/minLength

placeholder

wrap：值为soft，一行文字超宽度后剩余折到下一行显示，但实际内容并没有换行符；值为off，超宽度，不换行，textarea元素出现水平滚动条；值为hard，设置该值时，必须同时指定cols属性，这样一行文字超过文本框宽度，浏览器就会自动插入换行符，剩余内容折到下一行

select()

setSelectionRange(selectionStart, selectionEnd)

setRangeText(replacement, start, end)

select和option

select对应DOM对象类型；HTMLSelectElement 常用属性、方法有

options

value

selectedindex：返回/设置第一个选定 option 元素的索引数字；值为 -1 表示未选择任何元素。

disabled：返回/设置是否禁用选择框，被禁用后，就不能选择了

type：只读属性，返回表示支持多选与否的字符串，当该select有multiple属性时（代表可多选），返回“select-multiple”；否则，返回“select-one”

add(item,before)

remove(index)

option对应HTMLOptionElementDOM对象类型；HTMLOptionElement 常用属性、方法有

value

text

selected

index

事件处理

什么是事件处理：当某个事件发生时所执行的一段代码

定义事件处理的方式

addEventListener

任何一个元素对象都有addEventListener这个方法，因为每个HTML元素前面的继承链都是：EventTarget <- Node <- Element <- HTMLElement；EventTarget提供了addEventListener()方法，而js中子类会自动拥有父类的一切属性和方法。

注册事件回调函数（即当注册事件发生时回调执行我们的代码）

首先先获取DOM对象，看是在哪个元素上发生的事件；然后调用它的addEventListener函数，

document.querySelector('#go').addEventListener("click",() => {alert('执行salaryStats')}
);

也可以写成

function salaryStats(event){
//这里注意，这段代码不需要event为我们传入提供什么东西，可以不写alert('执行salaryStats');
}document.querySelector('#go').addEventListener("click",salaryStats);

//鼠标点击事件

element.addEventListener("click"，handleFunc);

//键盘事件

element.addEventListener("keydown"，handleFunc);

注意两个问题：

1.范围：

针对哪个元素dom对象调用addEventListener方法，就是在这个元素的范围内注册事件处理函数；非这个元素内发生的注册事件，不会触发调用

当然也可以在整个DOM范围内注册事件，对整个网页都有效
document.addEventListener("keydown",salaryStats);
2.如果这段script代码放在了head里，而不是body里就会导致一个问题

找不到document.querySelector('#go')这个对象，因为网页内容还没渲染完呢就先被执行了，DOM里面的内容还没创建都还没有body节点呢。

那这时我们可以指定一个页面加载事件，等页面加载完之后再执行这个注册事件回调函数

当页面资源全部加载完成，js引擎会发出load事件，我们可以
window.addEventListener('load',(event) => {//执行代码}
);
也可以
window.onload = () => {//执行代码
};

DOM对象的事件属性

这里的事件属性名以on开头，后面加事件名称

document.querySelector('#salary').onkeydown = () => {alert('执行salaryStats')};

也可以写成

function salaryStats(event){
//这里注意，这段代码不需要event为我们传入提供什么东西，可以不写alert('执行salaryStats');
}document.querySelector('#salary').onkeydown = salaryStats;

//键盘事件

element.onkeydown = handleFunc;

//鼠标事件

element.onclick = handleFunc;

事件对象和类型

事件对象event分别有KeyboardEvent键盘事件对象类型、MouseEvent鼠标事件对象类型；不同类型的对象的属性、方法不同

比如：当传入的是键盘事件对象时，那它含有的属性为：ctrlkey如果事件发生时，ctrl键被按下，event.ctrlkey值为true；同样的还有altkey、shift、key；这个key是返回事件发生时，按下按键的字符串表示

window.onload = () => {document.querySelector('#Salary').onkeydown = (event) => {if(event.ctrlkey && event.key == 'Enter'){document.querySelector('pre').innertext='hahahah';}

事件处理顺序

捕获阶段&非捕获阶段（目标阶段和冒泡阶段）

捕获阶段：从浏览器DOM 顶层的 window 对象一直传递下去，直到 触发事件的对象的父对象 ，这个过程称之为 capture Phase（捕获阶段）

非捕获阶段：

到达触发事件的对象，这个过程称之为 target phase（目标阶段）
从触发事件的对象，一直传递到顶层的window对象，这个过程称之为 bubbling Phase（冒泡阶段）

addEventListener的第3个参数，指定注册的处理函数在哪个阶段处理执行；缺省的话默认为false，也就是在非捕获阶段执行

举个栗子：点击内层元素

1.alert次序：内外 body

<div id='outer' style='width:10rem;height:10rem;border:1px solid black'>  外层<div id='inner' style='width:6rem;height:6rem;border:1px solid black'>内层</div> 
</div> 
<br><br><script>    document.querySelector('#inner').addEventListener("click", e => alert('处理 inner'))document.querySelector('#outer').addEventListener("click", e => alert('处理 outer'))document.querySelector('body').addEventListener("click", e => alert('处理 body'))  
</script>

2.alert次序：body 外内

<div id='outer' style='width:10rem;height:10rem;border:1px solid black'>  外层<div id='inner' style='width:6rem;height:6rem;border:1px solid black'>内层</div> 
</div> 
<br><br><script>    document.querySelector('#inner').addEventListener("click", e => alert('处理 inner'),true)document.querySelector('#outer').addEventListener("click", e => alert('处理 outer'),true)document.querySelector('body').addEventListener("click", e => alert('处理 body'),true)
</script>

3.alert次序：body 内外 (捕获阶段先执行)

<div id='outer' style='width:10rem;height:10rem;border:1px solid black'>  外层<div id='inner' style='width:6rem;height:6rem;border:1px solid black'>内层</div> 
</div> 
<br><br><script>    document.querySelector('#inner').addEventListener("click", e => alert('处理 inner'))document.querySelector('#outer').addEventListener("click", e => alert('处理 outer'))document.querySelector('body').addEventListener("click", e => alert('处理 body'),true)
</script>

事件对象的target、currentTarget属性

e.target ：指代直接触发事件的那个DOM对象

e.currentTarget ：指代当前正在处理事件的DOM对象，也就是当前处理函数注册对应的那个对象

在处理函数中，也可使用this，它等价于e.currentTarget

举个栗子：

<body><div id='outer' style='width:10rem;height:10rem;border:1px solid black'>  外层<div id='inner' style='width:6rem;height:6rem;border:1px solid black'>内层</div>  </div><br><button onclick='location.reload()'>重置</button><script>  function changeColor(e) {e.target.style.backgroundColor  = 'green'e.currentTarget.style.backgroundColor  = 'gray'} 
/*等价于function changeColor(e) {e.target.style.backgroundColor  = 'green'this.style.backgroundColor  = 'gray'} 
*/document.querySelector('#outer').addEventListener("click", changeColor )    </script></body>