JavaScript WebApi 一（详讲）

基础知识在前面的部分已经讲过了，大家如果没有学习过JavaScript的可以去看一下

1.DOM

引入

在JavaScript中，DOM（文档对象模型）提供了一种表示和操作HTML文档的方式。在DOM中，文档被表示为一个由节点组成的树形结构。DOM对象则是这些节点的抽象表示，它们可以通过JavaScript来访问和操作。

DOM对象可以分为多种类型，每种类型代表了文档中不同类型的节点或元素。以下是DOM中常见的对象类型：

  1. Document对象：代表整个文档，是DOM树的根节点。通过Document对象可以访问文档的各个部分，如HTML元素、头部信息等。

  2. Element对象：代表HTML文档中的元素，如<div>、<p>、<a>等。Element对象提供了访问和操作元素属性和内容的方法。

  3. Text对象：代表文档中的文本内容。每个文本节点都对应一个Text对象，可以通过Text对象来操作和修改文本内容。

  4. Attribute对象：代表HTML元素的属性。通过Attribute对象可以访问和修改元素的属性值。

  5. NodeList对象：代表一组节点的集合，通常用于表示DOM中的多个元素或节点。NodeList对象可以通过索引或迭代方式访问其中的节点。

也就是说JavaScript中的dom对象对应的是html中的标签元素 

获取dom元素

使用 document.querySelector获取html中的元素对象 主要是通过匹配css选择器进行返回。

以下是一些示例用法：

  1. 通过元素标签名选择元素： 
const element = document.querySelector('h1');

上述代码会选中文档中的第一个 <h1> 元素。

     2.通过类名选择元素：
const element = document.querySelector('.my-class');

上述代码会选中文档中具有 my-class 类名的第一个元素。

    3.通过ID选择元素：
const element = document.querySelector('#my-id');

上述代码会选中具有 my-id ID的元素。

   4.通过属性选择元素：
const element = document.querySelector('[data-attr="value"]');

上述代码会选中具有 data-attr 属性且属性值为 value 的元素。

5.获取所有的元素：返回的是一个伪数组
const div = document.querySelectorAll('h1')

我们来写一个简单的例子，用来获取一个div对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS</title><style>.head{width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div class="head">1213123</div><script>const div_className_Head = document.querySelector('.head')console.log(div_className_Head) </script>
</body>
</html>

当我获取到这个对象之后，我可以使用一些方法对这个对象进行操作

一旦使用 document.querySelector 获取到 HTML 标签，你就可以对选中的标签进行各种操作。以下是一些你可以做的事情：

1.修改标签内容： 你可以使用 innerHTML 或 innerText 属性来修改标签的内容。

var element = document.querySelector('#myElement'); 
element.innerHTML = '新的内容';

2.修改样式： 你可以使用 style 属性来修改标签的样式。

var element = document.querySelector('#myElement');
element.style.color = 'red';

3.添加事件监听器： 你可以使用 addEventListener 方法来为标签添加事件监听器。

var element = document.querySelector('#myElement'); 
element.addEventListener('click', function() { alert('被点击了！'); });

4.移除标签： 你可以使用 remove 方法来移除选中的标签。

var element = document.querySelector('#myElement'); 
element.remove();

5.查找子元素： 你可以继续使用 querySelector 或 querySelectorAll 在选中的标签下查找子元素。

var subElement = element.querySelector('.subElement');

下面是一个简单的实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS</title><style>.head{width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div class="head">1213123</div><script>const div_className_Head = document.querySelector('.head')console.log(div_className_Head) console.log("这是我修改前的内容",div_className_Head.innerHTML)div_className_Head.innerHTML = "这是我修改后的内容"div_className_Head.style.color = 'white'//注意这里使用的是 backgroundColor 代替background-color 在js中不能使用-可以将后面的字母首元素大写进行拼接div_className_Head.style.backgroundColor = 'blue'</script>
</body>
</html>

注意当我通过JavaScript获取到对象之后，可以直接修改标签的一些属性和值。

操作类样式

1.直接使用className操作css样式格式

元素className = 'css类名' 直接使用会更加方便，如果需要两个样式的话，可以直接将两个样式写在一起。

const div = document.querSelector('h1')
div.className = 'active a'

2.使用classList 进行操作

1.增加类名
const div = document.querSelector('h1')
div.classList.add('类名')
2.删除一个类
const div = document.querSelector('h1')
div.classList.remove('类名')
3.切换一个类:有的话删除没有的话加上
const div = document.querSelector('h1')
div.classList.toggle('类名')

 推荐使用classList 因为使用className修改样式的时候 classList只是追加并不会修改之前的样式，避免出错，并且操作清晰，写的代码也很清楚。

操作表单

表单属性中添加就有效果，删除就没有效果，他的返回值都是布尔值。

操作表单通常指的是对HTML表单元素进行增、删、改等操作。在HTML中，表单元素通过form标签定义，可以使用各种属性来控制表单的行为和样式。

添加属性可以有效地修改表单的行为和样式，而删除属性则会恢复到默认状态。这些属性的返回值通常是布尔值，用于表示操作是否成功或是否满足特定条件。

举例来说，假设我们有一个简单的HTML表单如下：

<form id="myForm"><label for="name">姓名：</label><input type="text" id="name" name="name" required><label for="email">邮箱：</label><input type="email" id="email" name="email" required><button type="submit">提交</button>
</form>

现在我们可以通过JavaScript来操作表单元素的属性。

  1. 添加属性示例：
    let form = document.getElementById('myForm');// 添加属性：autocomplete
form.autocomplete = 'off';
console.log(form.autocomplete); // 输出: "off"// 添加属性：target
form.target = '_blank';
console.log(form.target); // 输出: "_blank"// 添加属性：novalidate
form.novalidate = true;
console.log(form.novalidate); // 输出: true
  2. 删除属性示例：
    var form = document.getElementById('myForm');// 删除属性：autocomplete
form.removeAttribute('autocomplete');
console.log(form.autocomplete); // 输出: ""// 删除属性：target
form.removeAttribute('target');
console.log(form.target); // 输出: ""// 删除属性：novalidate
form.removeAttribute('novalidate');
console.log(form.novalidate); // 输出: false
    3.查看表单属性:
    var form = document.getElementById('myForm');// 使用 getAttribute() 方法获取表单属性值
var formId = form.getAttribute('id');
var formName = form.getAttribute('name');
var formAction = form.getAttribute('action');console.log(formId); // 输出: "myForm"
console.log(formName); // 输出: null（因为在这个示例中表单没有设置name属性）
console.log(formAction); // 输出: ""// 直接访问表单属性
var formMethod = form.method;
var formTarget = form.target;console.log(formMethod); // 输出: "get"（因为表单没有设置method属性，默认值为"get"）
console.log(formTarget); // 输出: ""（因为表单没有设置target属性，默认值为""）

自定义属性 

在HTML中，除了默认属性之外，我们还可以自定义属性来扩展HTML元素的功能。自定义属性是指以data-开头的属性，它们可以存储任意字符串数据，并且不会影响HTML的语义和渲染。

自定义属性的命名规则比较宽松，只要以data-开头即可。例如，我们可以在一个按钮上添加一个自定义属性来标记该按钮的功能：

<button data-action="delete">删除</button>

在上述代码中，我们通过data-action属性来实现了自定义功能，并将其值设置为delete。这样，在JavaScript中可以通过访问该属性来实现对该按钮的特定操作。

在JavaScript中，我们可以使用dataset对象来读写元素的自定义属性。dataset对象是一个DOMStringMap类型的对象，其中包含了元素的所有自定义属性及其对应的值。例如，我们可以使用以下代码来读取上述按钮元素的自定义属性值：

var btn = document.querySelector('button');
var action = btn.dataset.action;console.log(action); // 输出: "delete"

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/185168.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

nodejs最新电商jd m端h5st 4.2签名算法4.2版本逆向，jd API接口，jd商品数据采集

nodejs最新电商jd m端h5st 4.2签名算法4.2版本逆向，jd API接口，jd商品数据采集

前言&#xff1a; jd m端使用最新的h5st 4.2签名算法&#xff0c;与h5st 4.1版本有很大的不同。在这儿分析一下&#xff0c;供大家参考。 一、目标地址(Base64解码) aHR0cHM6Ly9zby5tLmpkLmNvbS93YXJlL3NlYXJjaC5hY3Rpb24/a2V5d29yZD0lRTklOTklQTQlRTYlQjklQkYlRTYlOUMlQkEmc2…
阅读更多...
java编程:给定⼀组正整数数组M，找出M数组中N项和为给定数S。如果有多对N项数字的和都等于 S，则输出N个数的乘积最⼩的哪⼀项，没有则返回空

java编程:给定⼀组正整数数组M，找出M数组中N项和为给定数S。如果有多对N项数字的和都等于 S，则输出N个数的乘积最⼩的哪⼀项，没有则返回空

题目&#xff1a; 编程题&#xff1a;给定⼀组正整数数组M&#xff0c;找出M数组中N项和为给定数S。如果有多对N项数字的和都等于 S&#xff0c;则输出N个数的乘积最⼩的哪⼀项&#xff0c;没有则返回空&#xff1b; 程序如下&#xff1a; 测试主程序&#xff1a; 先看下测试示…
阅读更多...
Linux系统centos7防火墙firewall开放IP及端口命令

Linux系统centos7防火墙firewall开放IP及端口命令

CentOS7使用的是firewall防火墙&#xff0c;不再是原来的iptables 防火墙基础命令 1&#xff1a;查看firewall防火墙状态 firewall-cmd --state //或 systemctl status firewalld2&#xff1a;打开防火墙 systemctl start firewalld3&#xff1a;关闭防火墙 systemctl sto…
阅读更多...
如何利用CHAT 进行扩写？

如何利用CHAT 进行扩写？

问CHAT&#xff1a;开发利用这些矿产资源的同时&#xff0c;我们也不能忽视环境保护的重要性。要以科学、合理、绿色环保的原则为指导&#xff0c;保护好帕米尔高原的生态环境&#xff0c;实现其可持续发展&#xff0c;以取得全局上的真正利益&#xff0c;按照以上文字进行简单…
阅读更多...
esp32-s3部署yolox_nano进行目标检测

esp32-s3部署yolox_nano进行目标检测

ESP32-S3部署yolox_nano进行目标检测 一、生成模型部署项目01 环境02 配置TVM包03 模型量化3.1预处理3.2 量化 04 生成项目 二、烧录程序 手上的是ESP32-S3-WROOM-1 N8R8芯片&#xff0c;整个链路跑通了&#xff0c;但是识别速度太慢了&#xff0c;20秒一张图&#xff0c;所以暂…
阅读更多...
3D数字孪生场景编辑器

3D数字孪生场景编辑器

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 数字孪生的强大功能来自于将真实世界的资产与真实世界的数据联系起来&#xff0c;因此您可以…
阅读更多...
C# WPF上位机开发（开篇）

C# WPF上位机开发（开篇）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 之前很少用到c#语言&#xff0c;大部分时间都用c/c&#xff0c;主要是它可以兼顾上位机qt开发以及嵌入式开发。所以&#xff0c;用c/c是比较合理的…
阅读更多...
Vue3-路由

Vue3-路由

VueRouter4路由语法解析 1.创建路由实例由createRouter实现 2.路由模式 1&#xff09;history模式使用createWebHistory()&#xff1a;地址栏不带# 2&#xff09;hash模式使用createWebHashHistory()&#xff1a;地址栏带# 3&#xff09;参数是基础路径&#xff0c;默认/ …
阅读更多...
latex中算法的几种模板

latex中算法的几种模板

latex中算法的几种模板_latex算法模板-CSDN博客文章浏览阅读6.2k次&#xff0c;点赞3次&#xff0c;收藏45次。latex中几种算法模板_latex算法模板https://blog.csdn.net/weixin_50514171/article/details/125136121?spm1001.2014.3001.5506
阅读更多...
【JavaEE】多线程 (2) --线程安全

【JavaEE】多线程 (2) --线程安全

目录 1. 观察线程不安全 2. 线程安全的概念 3. 线程不安全的原因 4. 解决之前的线程不安全问题 5. synchronized 关键字 - 监视器锁 monitor lock 5.1 synchronized 的特性 5.2 synchronized 使⽤⽰例 1. 观察线程不安全 package thread; public class ThreadDemo19 {p…
阅读更多...
无公网IP下，如何实现公网远程访问MongoDB文件数据库

无公网IP下，如何实现公网远程访问MongoDB文件数据库

文章目录 前言1. 安装数据库2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射2.3 测试随机公网地址远程连接 3. 配置固定TCP端口地址3.1 保留一个固定的公网TCP端口地址3.2 配置固定公网TCP端口地址3.3 测试固定地址公网远程访问 前言 MongoDB是一个基于分布式文件存储的数…
阅读更多...
抖音本地生活服务商申请条件

抖音本地生活服务商申请条件

抖音的本地生活服务商目前有两种&#xff0c;一种是可以做全国的服务商&#xff0c;我们一般叫抖音本地生活服务商&#xff0c;一种是区域优待服务商&#xff0c;也就是后面出来的服务商&#xff0c;这两种服务商的申请方式大同小异。 相同的地方就是都需要给平台交保证金。抖…
阅读更多...
网站监控有什么作用？

网站监控有什么作用？

科技改变生活&#xff0c;科技的发展让我们的生活越来越精彩丰富&#xff0c;数据中心机房监控系统也可以称为“自我监控系统”&#xff0c;主要是针对机房所有的设备及环境进行集中监控和管理的&#xff0c;其监控对象构成机房的各个子系统&#xff1a;动力系统、环境系统、消…
阅读更多...
CV计算机视觉每日开源代码Paper with code速览-2023.11.23

CV计算机视觉每日开源代码Paper with code速览-2023.11.23

点击CV计算机视觉&#xff0c;关注更多CV干货 论文已打包&#xff0c;点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【基础网络架构&#xff1a;Transformer】White-Box Transformers via Sparse Rate Reduction: Compression Is All There Is? 论文地址&am…
阅读更多...
【Java】文件I/O-字节流转换成字符流

【Java】文件I/O-字节流转换成字符流

上文中我们讲了Reader&#xff0c;Writer&#xff0c;InputStream&#xff0c;OutputStream这四种流的基本用法&#x1f522; 【Java】文件I/O-文件内容操作-输入输出流-Reader/Writer/InputStream/OutputStream四种流 其中InputStream和OutputStream两个类涉及到的都是byte&…
阅读更多...
rabbitMQ对消息不可达处理-备份交换机/备份队列

rabbitMQ对消息不可达处理-备份交换机/备份队列

生产者发送消息&#xff0c;在消息不可达指定队列时&#xff0c;可以借助扇出类型交换机&#xff08;之前写过消息回退的处理方案&#xff0c;扇出交换机处理的方案优先级高于消息回退&#xff09;处理不可达消息&#xff0c;然后放置一个备份队列&#xff0c;供消费者处理不可…
阅读更多...
IP地址的地理位置：固定性与动态性的平衡

IP地址的地理位置：固定性与动态性的平衡

IP地址的地理位置是网络通信中一个重要的元素&#xff0c;常被用于定位设备和用户。然而&#xff0c;很多人好奇&#xff0c;IP地址的地理位置是否会发生变化&#xff1f;本文将深入讨论IP地址地理位置的固定性与动态性之间的平衡&#xff0c;以及造成这种变化的因素。 1. IP地…
阅读更多...
DevEco Studio设置每次进入 是否自动进入上一次的项目

DevEco Studio设置每次进入 是否自动进入上一次的项目

首先 我们第一次创建项目 并不是这个界面 如果我们想在这个界面创建项目的话 可以 点击左上角 File 下的 New 下的 Create Project 这里 我们可以点击左上角 File 选择下面的 Settings… 这个界面就有非常多的配置 然后 我们选择到下图操作的位置 这里有一个Reopen projects…
阅读更多...
MySQL进阶知识：锁

MySQL进阶知识：锁

目录 前言 全局锁 表级锁 表锁 元数据锁&#xff08;MDL&#xff09; 意向锁 行级锁 行锁 行锁演示 间隙锁/临界锁 演示 前言 MySQL中的锁&#xff0c;按照锁的粒度分&#xff0c;分为以下三类 全局锁&#xff1a;锁定数据库中的所有表。表级锁&#xff1a;每次操…
阅读更多...
民安智库（第三方市场调查公司）：专业调研引领某月饼生产商企业发展

民安智库（第三方市场调查公司）：专业调研引领某月饼生产商企业发展

在中国的传统佳节中&#xff0c;月饼是一种重要的节日食品&#xff0c;也是送礼的首选。某月饼生产商一直以来以其高品质、独特口味的月饼而备受消费者喜爱。为了更好地了解消费者对产品的满意度&#xff0c;该月饼生产商决定委托民安智库&#xff08;湖北知名满意度测评公司&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023