JavaScript之DOM操作

news2024/11/15 4:59:06

第一章 API介绍

        ​API是一种事先定义好的函数，用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程，而又无需访问源码，或理解内部工作机制的细节。

        ​Web API接口：浏览器提供的一系列操作浏览器功能和页面元素的API(BOM和DOM)

第二章 DOM(文档对象模型)

2.1基本概念

        DOM:(Document Object Model)文档对象模型。当网页被加载时，浏览器会创建文档对象模型。通过这个对象模型，JavaScript 获得创建动态 HTML 的所有力量：

  • JavaScript 能改变页面中的所有 HTML 元素
  • JavaScript 能改变页面中的所有 HTML 属性
  • JavaScript 能改变页面中的所有 CSS 样式
  • JavaScript 能删除已有的 HTML 元素和属性
  • JavaScript 能添加新的 HTML 元素和属性
  • JavaScript 能对页面中所有已有的 HTML 事件作出反应
  • JavaScript 能在页面中创建新的 HTML

        严格的说，DOM并不是javascript，通常说用javascript来操控DOM。

2.2节点概念

​        节点(Node)是DOM中最小的组成单位，文档的树形结构(DOM树)，就是由各种不同类型的节点组成。

父节点关系(parentNode):直接的那个上级节点 
子节点关系(childNodes):直接的下级节点 
同级节点关系(sibling):拥有同一个父节点的节点

        常用的dom操作概括为：增、删、改、查、绑定事件、标签属性操作。

2.3查找节点(查找HTML元素)

1、通过id属性查找

document.getElementById('id属性值');

2、通过name属性查找

document.getElementBysName('name属性值');  //返回值是一个类数组对象

3、通过标签名查找

document.getElementBysTagName('标签名');   //返回值是一个类数组对象

4、通过class属性查找

document.getElementBysClassName('class属性值');    //返回值是一个类数组对象

5、querySelector()、querySelectorAll()

document.querySelector('.class属性值');
document.querySelectorAll('.class属性值'); //返回值是一个类数组对象

代码示例：

第三章 事件

3.1 什么事件

        事件是一种触发-响应机制，是用户发出一种行为浏览器通过感知用户行为而触发的一种程序机制。

事件三要素：

  • 事件源:(被)触发事件的元素
  • 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
  • 事件处理程序:事件触发后要执行的代码(函数形式)

3.2事件绑定

1、行内绑定：在浏HTML标签中绑定事件

//方法一：
    <标签名 属性=属性值 on事件类型="事件处理程序">
    //在这里"on事件类型"就相当于标签中属性
//方法二：
     <body>
        <标签名 属性=属性值 on事件类型="函数名()">
     </body>
    <script>
        function 函数名(){
            //事件处理程序
        }
    </script>

代码示例：

2、动态绑定：先获取标签，然后绑定事件

//方案一：拆分式
    //函数处理机制
    function 函数名(){
        //函数体
    }
    //获取标签（有很多种方法，这里用id属性查找举例）
    var 变量名=document.getElementById('id属性值');
    //绑定事件
    变量名.on事件类型=函数名();
​
//方案二：合并式
    查找节点(标签).on事件类型=function(){
         //函数处理程序
    }

3、事件监听

//方案一：拆分式
    //查找节点(标签)
    var 变量名=document.getElementById('id属性值');
    //绑定监听事件
    变量名.addEventListener('事件类型',function(){
        //事件处理程序
    })
//方案二：合并式
    查找节点(标签).addEventListener('事件类型',function(){
        //事件处理程序
    })

代码示例：

4、移除事件监听

查找节点(标签).removeEventListener('事件类型',函数名());

3.3 三种事件绑定的区别

        第一种 "HTML标签的on-属性"，违反了HTML与JavaScript代码相分离的原则；处理函数中 this 指向的window对象；第二种 "Element节点的事件属性" 的缺点是，同一元素同一个事件只能定义一个监听函数，也就是说，如果定义两次onclick属性，后一次定义会覆盖前一次。但是处理函数中的 this 指向的选中的对象；第三种：addEventListener方法可以针对同一个元素的同一个事件，添加多个监听处理函数。处理函数中的 this 指向的也是选中的元素；

3.4事件类型

1、页面加载事件

  • load : 一个资源及其相关资源已完成加载。
<body onload="f1()" >
</body>
<script>
    function f1(){
        alert('f1');
    }
</script>

2、焦点事件

  • focus：元素获得焦点
  • blur：元素失去焦点

3、鼠标事件

  • mouseenter：指针移动到有事件监听的元素内
  • mouseover：指针移动到有事件监听的元素或者他的子元素内
  • mousemove：指针在元素内移动式持续触发
  • mousedown：在元素上按下任意鼠标按钮
  • mouseup：在元素上释放任意鼠标按键
  • click：在元素上任意按下释放鼠标键
  • dbclick：在元素上双击鼠标
  • contextmenu：右键点击
  • mouseout：指针移除元素，或者移到子元素上
  • select：文本被选中
  • copy：元素内容被拷贝时

4、键盘事件

  • keydown：按下任意按键
  • keypress：除shift、fn、capslock外任意键按住（连续触发）
  • keyup：释放任意按键

5、from表单事件

  • reset：点击重置按扭时
  • submit：点击提交按钮时

6、内容改变事件

  • change： 当内容改变且失去焦点时触发 （存储事件）input ： 当内容改变时触发 （值变化事件）

3.5 事件传播

        当触发c方块的事件时，b和a的事件也随之触发，这种现象称为事件冒泡

        当一个事件发生以后，它会在不同的DOM节点之间传播，而这种传播可以分为三个阶段：第一阶段：从window对象传导到目标节点，称为 捕获阶段。第二阶段：在目标节点上触发，称为 目标阶段。第三阶段：从目标节点传导回window对象，称为 冒泡阶段。

3.6改变事件传播方法：addEventListener

案例：

第四章 节点操作

4.1 节点操作

  • 创建网页元素节点，参数为网页元素标签名：document.createElement('标签名')
  • 生成网页节点的文本内容，参数为网页节点文本内容：document.createTextNode('内容')
  • 插入一个子节点，将其作为该节点的最后一个子节点：node.appendChild()
  • 判断当前节点是否有子节点，结果返回一个布尔值：node.hasChildNodes()
  • 接受一个子节点作为参数，用于从当前节点移除该子节点：node.removeChild()
  • 用于克隆一个选中的节点。node.cloneNode()
  • node.innerHTML返回该元素包含的 HTML 代码。该属性可读写，常用来设置某个节点的内容；（不属于W3C DOM规范）
  • node.innerText
  • 返回该元素包含的内容。该属性可读写

4.2节点属性

原生属性：HTML元素节点的标准属性

属性操作：

  • node.getAttribute()：返回当前元素节点的指定属性。如果指定属性不存在，则返回null；
  • node.setAttribute()：为当前元素节点新增属性。如果同名属性已存在node.hasAttribute()
  • ​ 返回一个布尔值，表示当前元素节点是否包含指定属性
  • node.removeAttribute()：从当前元素节点移除属性

4.3 节点操作-层级关系

  • node.nextElementSibling：返回紧跟在当前节点后面的第一个同级Element节点，如果当前节点后面没有同级节点，则返回null；
  • node.previousElementSibling：返回紧跟在当前节点前面的第一个同级Element节点，如果当前节点前面没有同级节点，则返回null；
  • node.parentElement：返回当前节点的父级Element节点；
  • node.childNodes：返回一个NodeList集合，成员包括当前节点的所有子节点(注意空格回车也算)。
  • node.firstChild：返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。
  • node.lastChild：返回该节点的最后一个子节点，如果该节点没有子节点则返回null。

4.4 css样式设定

语法： 查找节点(标签).style.样式名称=值

 4.5 案例：利用js实现网页评论代码

    <meta charset="utf-8">
    <title></title>
    <style>
        .div1{
            width: 1200px;
            margin:0 auto;
            background: rgba(128,128,128,0.3);
        }
        span{
            color: red;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div2" id="div2">
            昵称：<input type="text" name="" id="name" value="">
            <p>评论内容：<textarea id="content"></textarea></p>
            <p><input type="button" id="btn" value="提交评论"></p>
        </div>
    </div>
</body>
<script type="text/javascript">
    var us=document.getElementById('name');
    var content=document.getElementById('content');
    document.getElementById('btn').onclick=function(){
        var div=document.createElement('div');
        div.innerHTML="<span>"+us.value+":</span>"+content.value+'<hr>';
        document.getElementById('div2').appendChild(div);
        us.value='';
        content.value='';
    }
</script>
</html>

第五章 事件对象

5.1 事件对象属性

  • event.bubbles:属性返回一个布尔值，表示当前事件是否会冒泡;event.eventPhase：返回一个整数值，表示事件流在传播阶段的位置
0:事件目前没有发生。1:事件目前处于捕获阶段。2:事件到达目标节点。3:事件处于冒泡阶段。
  • event.type:返回一个字符串，表示事件类型，大小写敏感;event.timeStamp:返回一个毫秒时间戳，表示事件发生的时间;
  • clientX、clientY :获取鼠标事件触发的坐标

5.2事件代理/委托

  • event.target：对事件起源目标的引用，属性返回触发事件的那个节点。
  • event.currentTarget：属性返回事件当前所在的节点，即正在执行的监听函数所绑定的那个节点。作为比较，target属性返回事件发生的节点。由于事件会在冒泡阶段向上传播到父节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件。这种方法叫做事件的代理也叫 事件委托 也有人称为 事件代理

5.3阻止浏览器默认行为&阻止事件传播

  • event.preventDefault()：方法取消浏览器对当前事件的默认行为，
  • event.stopPropagation()：方法阻止事件在DOM中继续传播，防止再触发定义在别的节点上的监听函数

第六章 浏览器对象模型

6.1对话框

  • window.alert() : 显示一个警告对话框,上面显示有指定的文本内容以及一个"确定"按钮。
  • window.prompt(): 显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字.
  • window.confirm() ：方法显示一个具有一个可选消息和两个按钮(确定和取消)的模态对话框 。

6.2 浏览器控制台

  • window.console : 返回console对象的引用，该对象提供了对浏览器调试控制台的访问。
  • Console.clear() : 清空控制台。
  • Console.error() : 打印一条错误信息
  • Console.table() : 将数组或对象数据在控制台以表格形式打印
  • Console.log()： 打印字符串，使用方法比较类似C的printf、PHP的echo等格式输出

6.3 定时器

setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数，只执行一次

setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数

5.7 location对象

window.location 只读属性，返回一个 Location对象，其中包含有关文档当前位置的信息；

URL

统一资源定位符 (Uniform Resource Locator, URL)

URL的组成:

scheme://host:port/path?query#fragmentscheme:通信协议

常用的http,ftp,maito等

host:主机

服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。

port:端口号

整数，可选，省略时使用方案的默认端口，如http的默认端口为80。

path:路径

由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

query:查询

可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs

fragment:信息片断

字符串，锚点.

5.8 history对象

  • history.back() : 前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法
  • history.forward() ： 在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法
  • history.go() : 通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页.

5.9 navigator对象

  • userAgent : 通过userAgent可以判断用户浏览器的类型
  • platform : 通过platform可以判断浏览器所在的系统平台类型.
  • geolocation : 位置定位对象；

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

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

相关文章

Android开发从0开始（广播）

Android开发从0开始（广播）

应用广播 发送标准广播的三步骤 发送标准广播&#xff1a; //发送标准广播 Intent intent new Intent("com.dongnaoedu.chapter09.standard"); sendBroadcast(intent); 定义广播接受者: public class StanderdReceiver extends BroadcastReceiver { public s…
阅读更多...
连接docker swarm和凌鲨

连接docker swarm和凌鲨

docker swarm相比k8s而言&#xff0c;部署和使用都要简单很多&#xff0c;比较适合中小研发团队。 通过连接docker swarm和凌鲨&#xff0c;可以让研发过程中的常用操作更加方便。 更新容器镜像调整部署规模查看日志运行命令 使用步骤 部署swarm proxy 你可以通过linksaas…
阅读更多...
【2023年APMCM亚太杯C题】完整代码+结果分析+论文框架

【2023年APMCM亚太杯C题】完整代码+结果分析+论文框架

2023年APMCM亚太杯C题 完整代码结果分析论文框架第一问问题分析技术文档1 基于AHP的新能源汽车发展影响因素分析1.1 AHP模型的构建1.2 AHP模型的求解 2 基于自适应ARIMA-非线性回归模型的影响因素预测2.1 ARIMA模型的建立2.2 非线性回归模型的建立2.3 自适应混合ARIMA-非线性回…
阅读更多...
Go 语言中结构体的使用和示例

Go 语言中结构体的使用和示例

结构体&#xff08;简称struct&#xff09;用于创建不同数据类型的成员集合&#xff0c;放入一个单一的变量中。虽然数组用于将相同数据类型的多个值存储在单一变量中&#xff0c;但结构体用于将不同数据类型的多个值存储在单一变量中。结构体对于将数据组合在一起以创建记录非…
阅读更多...
完善农业农村基础数据资源体系，加速乡村振兴

完善农业农村基础数据资源体系，加速乡村振兴

完善农业农村基础数据资源体系&#xff0c;加速乡村振兴 随着乡村振兴战略的实施&#xff0c;农业农村基础设施建设也得到了越来越多的关注。然而&#xff0c;在实施这一战略的过程中&#xff0c;我们也必须认识到&#xff0c;完善农业农村基础数据资源体系同样是十分重要的。 …
阅读更多...
Docker Compose部署微服务项目实战讲解

Docker Compose部署微服务项目实战讲解

一、Docker Compose简介 当需要在多个容器之间协调和管理应用程序时&#xff0c;Docker Compose是一个非常有用的工具。它允许通过一个配置文件来定义、配置和启动多个 Docker 容器&#xff0c;使得整个应用程序的部署变得更加简单和一致。以下是 Docker Compose 的一些重要概…
阅读更多...
猿人学（非常简单三道题）

猿人学（非常简单三道题）

17. 天杀的http2.0 https://blog.csdn.net/weixin_44327634/article/details/123740008?ops_request_misc%257B%2522request%255Fid%2522%253A%2522169949361816800180633940%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id169949361816800…
阅读更多...
机器学习/sklearn 笔记：K-means,kmeans++,MiniBatchKMeans，二分Kmeans

机器学习/sklearn 笔记：K-means,kmeans++,MiniBatchKMeans，二分Kmeans

1 K-means介绍 1.0 方法介绍 KMeans算法通过尝试将样本分成n个方差相等的组来聚类&#xff0c;该算法要求指定群集的数量。它适用于大量样本&#xff0c;并已在许多不同领域的广泛应用领域中使用。KMeans算法将一组样本分成不相交的簇&#xff0c;每个簇由簇中样本的平均值描…
阅读更多...
全志D1芯片 MIPI屏幕TFT08006支持

全志D1芯片 MIPI屏幕TFT08006支持

屏幕简介 TFT08006官方支持的一款MIPI屏幕&#xff0c;8寸&#xff0c;分辨率800*1280。官方套装支持触控。 下载 MIPI屏幕 TFT08006 patch&#xff1a; https://www.aw-ol.com/downloads/resources/27 MIPI屏幕 TFT08006 相关资料见&#xff1a;https://www.aw-ol.com/down…
阅读更多...
OkHttpUrlConnection库编写代码示例

OkHttpUrlConnection库编写代码示例

OkHttpUrlConnection库编写的爬虫程序&#xff0c;该程序使用Kotlin编写的。 kotlin import java.net.HttpURLConnection import java.net.URL import java.net.URLConnection import java.io.BufferedReader import java.io.InputStreamReader fun main() { val url UR…
阅读更多...
java学习part09类的构造器

java学习part09类的构造器

1. 2.默认构造器 如果没有显式定义任何构造器&#xff0c;系统会默认加一个默认构造器。 如果定义了&#xff0c;则不会有默认构造器。 默认构造器的权限和类的权限一样&#xff0c;类是public构造器就是public&#xff0c;类是缺省默认构造器就是缺省 反编译之后添加的构造…
阅读更多...
申请二级域名

申请二级域名

1、登录腾讯云 腾讯云 产业智变云启未来 - 腾讯 (tencent.com) 2、进入我的域名&#xff0c;点击主域名 3、点击前往DNSPod管理 4、点击我的域名&#xff0c;然后点击主域名 5、点击添加记录&#xff0c;进行添加二级域名信息 6、添加相应二级域名信息 7、添加后需要进行验证…
阅读更多...
振弦式土压力计在岩土工程安全监测应用的方案

振弦式土压力计在岩土工程安全监测应用的方案

振弦式土压力计在岩土工程安全监测应用的方案 振弦式土压力计是一种常见的土压力测量仪器&#xff0c;其原理是利用振弦在土中传播的速度与土的应力状态有关的特点测量土压力。在岩土工程安全监测中&#xff0c;振弦式土压力计可以应用于以下方面&#xff1a; 1. 地下连续墙和…
阅读更多...
Redis入门指南学习笔记(3)：Redis高级特性

Redis入门指南学习笔记(3)：Redis高级特性

一.前言 上一篇博客对Redis常用的数据结构进行了详细介绍。Redis除了丰富的数据类型支持&#xff0c;还包含许多高级特性&#xff0c;例如事务、内存驻留策略、排序、消息队列等&#xff0c;本文将对这些进行逐一介绍。 二.事务 Redis同样包含事务&#xff08;transaction&a…
阅读更多...
mysql多表重复数据只保留一行的思路

mysql多表重复数据只保留一行的思路

一、问题描述 假设有3个表&#xff0c;test_a&#xff0c;test_b&#xff0c;test_c&#xff1b; test_a和test_b中有些重复数据&#xff1b; 现在要把这2个表的数据同步到表c&#xff0c;但是重复数据只保留1行。 样例如下&#xff1a; 具体要求如下&#xff1a; 1.tes…
阅读更多...
Unity使用DOTween实现分段进度条

Unity使用DOTween实现分段进度条

文章目录 需求下载安装 DOTween实现实现效果 需求 用组件进度条&#xff08;Slider&#xff09;&#xff0c;利用分段加载进行以假乱真的进度效果&#xff0c;比如说2秒钟到达20%的进度&#xff0c;10秒钟加载20%到50%进度&#xff0c;1分钟加载50%到90%的进度&#xff0c;30秒…
阅读更多...
沉头孔和埋头孔的区别

沉头孔和埋头孔的区别

埋头空和沉头孔的区别在于螺栓孔上部扩孔&#xff1a;沉头孔是直筒结构&#xff1b;埋头孔是四十五度结构&#xff0c;比沉头孔较为平顺。 螺栓孔上部扩孔能容纳螺栓头部&#xff0c;使螺头部不高于周围表面。埋头空和沉头孔只是两种不同的叫法。 沉头孔是 PCB 上的圆柱形凹槽…
阅读更多...
网站定制开发有哪些分类？|企业软件app小程序定制

网站定制开发有哪些分类？|企业软件app小程序定制

网站定制开发有哪些分类&#xff1f;|企业软件app小程序定制 网站定制开发是指根据客户需求&#xff0c;为其量身定制设计和开发的网站服务。目前&#xff0c;网站定制开发主要分为以下几个分类&#xff1a; 1. 静态网站定制开发&#xff1a;静态网站是由HTML、CSS和JavaScrip…
阅读更多...
多模态常见任务介绍

多模态常见任务介绍

视觉问答&#xff08;VQA&#xff0c; Visual Question Answer&#xff09; 目标&#xff1a;给定一个图片以及问题&#xff0c;需要理解图片的内容并基于此用自然语言回答问题。 例如&#xff0c;图像中发生什么事&#xff0c;人物穿的衣服是什么颜色&#xff0c;图像中有多…
阅读更多...
算法：给出指定整数区间、期望值，得到最终结果

算法：给出指定整数区间、期望值，得到最终结果

1&#xff0c;问题&#xff1a; 在游戏中&#xff0c;我们经常会遇到以下情况&#xff1a;打开宝箱&#xff0c;获得x个卡牌碎片。 但通常策划只会给一个既定的数值空间&#xff0c;和一个期望得到的值&#xff0c;然后让我们去随机。比如&#xff1a; 问题A&#xff1a;在1~…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023