JavaScript — DOM API

于 2024-03-29 08:14:11 发布
阅读量759 收藏 21
点赞数 11
分类专栏： 程序员 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_83816794/article/details/137131042
版权

举例:

在这里插入图片描述

JS 代码主要流程

写 JS 代码，主要流程：

1.事件源: 学习如何选择页面元素 (DOM API 中，把这些页面元素也称为 DOM 元素)

2.调用 DOM 元素的 API 来做事情

做什么事情?

2.1 设置属性(比如style属性就是样式，on开头的属性就是事件属性)

2.2 设置标签内容

获取页面元素

这部分工作类似于 CSS 选择器的功能

querySelector & querySelectorAll

querySelector

之前的获取元素的方式都比较麻烦，而使用 querySelector 能够完全复用前面学过的 CSS 选择

器知识，可以更快更精准的获取到元素对象

querySelector 调用的节点元素下，去查找满足选择器条件的元素，最后 element 就是选择到的元素

var element = document.querySelector(selectors);

.

document: 页面顶级节点

selectors: 字符串内容，格式和 CSS 一样(CSS 选择器可以获取到哪些元素，querySelector 就可以获取到哪些元素)

总结:

  • selectors 包含一个或多个要匹配的选择器的 DOM字符串 DOMString，该字符串必须是有效的

CSS选择器字符串；如果不是，则引发 SYNTAX_ERR 异常

  • 表示文档中与指定的一组CSS选择器匹配的第一个元素的 html元素 Element 对象.

  • 如果您需要与指定选择器匹配的所有元素的列表，则应该使用 querySelectorAll()

  • 可以在任何元素上调用，不仅仅是 document；调用这个方法的元素将作为本次查找的根元素

如:

在这里插入图片描述

在这里插入图片描述

querySelectorAll

用法和 querySelector 类似

举例:

若选择器返回多个元素，需要使用querySelectorAll，返回的是一个数组，其中包含多个元素

p1

p2

p3

在这里插入图片描述

操作元素

获取 / 修改元素内容

innerHTML 用的场景比 innerText 更多

innerText

Element.innerText 属性表示一个节点及其后代的"渲染"文本内容

读操作 —— var renderedText = HTMLElement.innerText;

写操作 —— HTMLElement.innerText = string;

举例:

在这里插入图片描述

缺点: 若是修改内容时，带一些 html 的标签作为字符串，此时不会把标签渲染成 html 的元素 (不识别 html 标签)

在这里插入图片描述

由上述例子可以看到，通过 innerText 无法获取到 div 内部的 html 结构，只能得到文本内容； 修改页面的时候也会把 span 标签当成文本进行设置，不会渲染为 html 结构

innerHTML

Element.innerHTML 属性设置或获取HTML语法表示的元素的后代

读操作 —— var content = element.innerHTML;

写操作 —— element.innerHTML = htmlString;

通过 innerHTML 获取到的字符串， 不光能获取到页面的 html 结构，同时也能修改结构；并且获取到的内容保留空格和换行

在这里插入图片描述

获取 / 修改元素属性

可以通过 Element 对象的属性来直接修改，就能影响到页面显示效果

举例:

console.dir() 表示，将一个对象中的属性、方法打印出来

加载失败

在这里插入图片描述

修改 img 的 src 属性:

加载失败

打开网页的时候，最开始是 xiawen2.jpg，还没有等我们反应过来时，就已经变成了 xiawen.jpg，因为执行的速度非常快

在这里插入图片描述

点击图片，切换为另一张图片:

在这里插入图片描述

获取 / 修改样式属性

CSS 中指定给元素的属性，都可以通过 JS 来修改

行内样式操作

element.style.[属性名] = [属性值];

element.style.cssText = [属性名+属性值];

“行内样式”，通过 style 直接在标签上指定的样式，优先级很高；适用于改的样式少的情况

举例:

一朵花花

在这里插入图片描述

点击修改颜色:

// 点击后修改颜色

var div = document.querySelector(‘div’);

div.onclick = function () {

// 获取 div 标签文本颜色

var curColor = div.style.color;

if(curColor == ‘’ || curColor == ‘black’){

div.style.color = “red”;

}

else{

div.style.color = “black”;

}

}

在这里插入图片描述

类名样式操作

element.className = [CSS 类名];

修改元素的 CSS 类名，适用于要修改的样式很多的情况

夜间模式切换

花花呀

由于 class 是 JS 的保留字，所以名字叫做 className

在这里插入图片描述

获取 / 修改表单元素属性

表单 (主要是指 input 标签) 的以下属性都可以通过 DOM 来修改

  • value： input 的值

  • disabled：禁用

  • checked：复选框会使用

  • selected：下拉框会使用

  • type：input 的类型(文本，密码，按钮，文件等)

例1 — 切换按钮的文本

// 选择按钮元素，绑定点击事件，切换显示的文版内容

var btn = document.querySelector(“#bf”);

btn.onclick = function(){

var content = btn.value;

if(content == ‘播放’) {

btn.value = ‘暂停’;

}else{

btn.value = ‘播放’;

}

}

在这里插入图片描述

例2 — 点击按钮，文本值+1

var sum = document.querySelector(“#sum”);

var sumBtn = document.querySelector(“#sum_btn”);

sumBtn.onclick = function(){

var count = +sum.value; //返回字符串

console.log(count); // 转换成数值

sum.value = count + 1;

}

在这里插入图片描述

例3 — 全选 / 取消全选按钮

在 HTML 中，属性值设为 “checked” 为选中；而在 JS 中，需要设置为 true / false

全部选中

艾希

凯特琳

VN

// 全部选择 / 取消

var all = document.querySelector(“#all”);

all.onclick = function(){

//子复选框

var items = document.querySelectorAll(“.item”);

if(all.checked){

for(item of items){

item.checked = true;

}

}

else{

for(item of items){

item.checked = false;

}

}

}

在这里插入图片描述

优化用户体验：

var all = document.querySelector(“#all”);

var items = document.querySelectorAll(“.item”);

all.onclick = function(){

console.log(all.checked);

for(item of items){

item.checked = all.checked;

}

}

for(item of items){

item.onclick = function(){

// all 复选框是否被选中

let allChecked = true;

// 所有子复选框是否被选中

for(it of items){

if(!it.checked){

allChecked = false;

}

}

all.checked = allChecked;

}

}

在这里插入图片描述

操作节点

新增节点

分成两个步骤

  1. 创建元素节点

  2. 把元素节点插入到 DOM 树中

1.创建元素节点

可以直接在最后的元素后创建

内容

var add = document.querySelector(“#add”);

var content = document.querySelector(“#content”);

var container = document.querySelector(“#container”);

add.onclick = function(){

// 点击，获取文本框内容

var text = content.value;

// innerHTML ,先获取 container 中的所有元素，在最后添加元素

var html = container.innerHTML;

html += “

”;

html += text;

html += “

”;

container.innerHTML = html;

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往获取

= container.innerHTML;

html += “

”;

html += text;

html += “

”;

container.innerHTML = html;

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-9klTrrCp-1711671240865)]

[外链图片转存中…(img-2NtPPMM2-1711671240866)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-f8e0yFIh-1711671240866)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）

最后

正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！

资料领取方式：点击这里前往获取

前端资料图.PNG

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值