JavaScript之DOM操作

第一章 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.mzph.cn/news/166620.shtml

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

相关文章

【Linux】Linux的常用基本指令

【Linux】Linux的常用基本指令

Linux常用基本指令 Linux指令的历史背景前言说明一、 ls 列出文件中的所有内容常用选项 二、pwd 显示当前所在目录进程三、cd 将当前工作目录改变到指定的目录下常用样例 四、touch 1. 更改文档或目录的日期时间 2. 新建一个不存在的文件常用选项 四、mkdir 1. 更改文档或目录的…
阅读更多...
TensorFlow实战教程（二十五）-基于BiLSTM-CRF的医学命名实体识别研究（下）模型构建

TensorFlow实战教程（二十五）-基于BiLSTM-CRF的医学命名实体识别研究（下）模型构建

这篇文章写得很冗余，但是我相信你如果真的看完，并且按照我的代码和逻辑进行分析，对您以后的数据预处理和命名实体识别都有帮助，只有真正对这些复杂的文本进行NLP处理后，您才能适应更多的真实环境，坚持！毕竟我写的时候也看了20多小时的视频，又写了20多个小时，别抱怨，加…
阅读更多...
组合不重复的3位数

组合不重复的3位数

编程要求 给出四个不同的数字&#xff0c;能够组成多少个不重复的3位数&#xff0c;按照从小到大的顺序输出&#xff0c;每行一个。 测试用例 测试输入 1 2 3 4 测试输出 123 124 132 134 142 143 213 214 231 234 241 243 312 314 321 324 341 342 412 413 421 423 431 …
阅读更多...
算法：给出指定整数区间、期望值，得到最终结果

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

1&#xff0c;问题&#xff1a; 在游戏中&#xff0c;我们经常会遇到以下情况&#xff1a;打开宝箱&#xff0c;获得x个卡牌碎片。 但通常策划只会给一个既定的数值空间&#xff0c;和一个期望得到的值&#xff0c;然后让我们去随机。比如&#xff1a; 问题A&#xff1a;在1~…
阅读更多...
问卷调查平台选择指南：哪个好用与如何选择的实用指南

问卷调查平台选择指南：哪个好用与如何选择的实用指南

问卷调查由于其成本低、数据可量化的特点&#xff0c;常被用于工作和学习中。网络的发展使得问卷调查的形式也越累越多样化&#xff0c;不少人在做问卷调查的时候可能都会提出这样一个问题——问卷调查平台哪个好用&#xff1f;怎么选择&#xff1f; 选择问卷调查平台&#xf…
阅读更多...
ubuntu22.04 arrch64版在线安装redis

ubuntu22.04 arrch64版在线安装redis

脚本 apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 40976EAF437D05B5 apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 3B4FE6ACC0B21F32 echo "deb http://archive.ubuntu.com/ubuntu/ trusty main universe restricted multiverse" >…
阅读更多...
可以ping通IP但是无法远程连接-‘telnet‘ 不是内部或外部命令，也不是可运行的程序或批处理文件

可以ping通IP但是无法远程连接-‘telnet‘ 不是内部或外部命令，也不是可运行的程序或批处理文件

起因 一开始远程连接IP&#xff0c;报错&#xff0c;怀疑是自己网络原因&#xff0c;但是同事依旧无法连接 怀疑是自己防火墙的原因&#xff0c;查看关闭依旧无法连接 问题 两个地址可以ping通排除防火墙缘故 怀疑端口&#xff0c;测试端口 然 解决方案 winR 输入control…
阅读更多...
App Inventor 2 数字转文本

App Inventor 2 数字转文本

App Inventor 2 是弱语言类型&#xff0c;文本和数字之间不用刻意去转换&#xff0c;之间赋值就可以了。 案例&#xff1a;数字转文本 App Inventor 2 是弱语言类型&#xff0c;同理数字也能直接赋值给文本变量&#xff1a; 更多请参考&#xff1a;App Inventor 2 文本代码块…
阅读更多...
opencv-背景减除

opencv-背景减除

背景减除&#xff08;Background Subtraction&#xff09;是一种用于从视频序列中提取前景对象的计算机视觉技术。该技术的主要思想是通过建模和维护场景的背景&#xff0c;从而检测出在不同时间点出现的前景对象。 OpenCV 提供了一些用于背景减除的函数&#xff0c;其中最常用…
阅读更多...
完善农业农村基础数据资源体系，加速乡村振兴

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

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

opencv-ORB检测

ORB&#xff08;Oriented FAST and Rotated BRIEF&#xff09;是一种图像特征检测和描述算法&#xff0c;结合了 FAST 关键点检测器和 BRIEF 描述子的优点。ORB 算法具有良好的性能&#xff0c;特别适用于实时应用&#xff0c;如目标追踪、相机定位等。 以下是 ORB 算法的一般…
阅读更多...
【广州华锐互动】利用VR体验环保低碳生活能带来哪些教育意义？

【广州华锐互动】利用VR体验环保低碳生活能带来哪些教育意义？

随着科技的不断发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术已经逐渐走进了我们的生活。从游戏娱乐到教育培训&#xff0c;VR技术的应用范围越来越广泛。而在这个追求绿色、环保的时代&#xff0c;VR技术也为我们带来了一种全新的环保低碳生活方式。让我们一起走进…
阅读更多...
nginx配置相关应用服务

nginx配置相关应用服务

1、无ssl证书的conf文件 server {listen 80;server_name test.domain.com;root html;index index.html index.htm;location / {proxy_http_version 1.1;proxy_set_header Connection "";proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_…
阅读更多...
2022年MathorCup高校数学建模挑战赛—大数据竞赛A题58到家家政服务订单分配问题求解全过程文档及程序

2022年MathorCup高校数学建模挑战赛—大数据竞赛A题58到家家政服务订单分配问题求解全过程文档及程序

2022年MathorCup高校数学建模挑战赛—大数据竞赛 A题 58到家家政服务订单分配问题 原题再现&#xff1a; “58 到家”是“58 同城”旗下高品质、高效率的上门家政服务平台&#xff0c;平台向用户提供家政保洁、保姆、月嫂、搬家、维修等众多生活领域的服务。在家政保洁场景中…
阅读更多...
欲更新浏览器的Mac用户请注意，AMOS又出一招新“骗术”

欲更新浏览器的Mac用户请注意，AMOS又出一招新“骗术”

近日&#xff0c;Malwarebytes发现有一种专门针对Mac操作系统&#xff08;OS&#xff09;的数据窃取程序正通过伪造的网页浏览器更新程序进行分发。Malwarebytes称这与其通常的技术、战术和程序大不相同&#xff0c;该恶意软件可以模仿 Safari 和谷歌 Chrome 浏览器。 网络安全…
阅读更多...
【C++心愿便利店】No.13---C++之探索vector底层原理

【C++心愿便利店】No.13---C++之探索vector底层原理

文章目录 前言一、STL简介1.1 什么是STL1.2 STL的六大组件 二、vector的介绍及使用2.1 vector的介绍2.2 vector的使用2.2.1 vector的定义2.2.2 vector iterator 的使用2.2.3 vector 空间增长问题2.2.4 vector 增删查改 三、vector模拟实现3.1 成员变量3.2 成员函数3.2.1 构造函…
阅读更多...
2、分布式锁实现原理与最佳实践（二）

2、分布式锁实现原理与最佳实践（二）

常见分布式锁的原理 4.1 Redisson Redis 2.6之后才可以执行lua脚本&#xff0c;比起管道而言&#xff0c;这是原子性的&#xff0c;模拟一个商品减库存的原子操作&#xff1a; //lua脚本命令执行方式&#xff1a;redis-cli --eval /tmp/test.lua , 10 jedis.set("produ…
阅读更多...
python opencv 放射变换和图像缩放-实现图像平移旋转缩放

python opencv 放射变换和图像缩放-实现图像平移旋转缩放

python opencv 放射变换和图像缩放-实现图像平移旋转缩放 我们实现这次实验主要用到cv2.resize和cv2.warpAffine cv2.warpAffine主要是传入一个图像矩阵&#xff0c;一个M矩阵&#xff0c;输出一个dst结果矩阵&#xff0c;计算公式如下&#xff1a; cv2.resize则主要使用fx&…
阅读更多...
精益生产中的周转箱优势：提升效率与质量的得力利器

精益生产中的周转箱优势：提升效率与质量的得力利器

在当今竞争激烈的制造业中&#xff0c;企业追求高效生产和卓越质量是至关重要的。精益生产理念提供了一套有效的工具和方法&#xff0c;其中周转箱作为一个关键的组成部分&#xff0c;在优化生产流程、提高效率和质量方面发挥着重要作用。下面谈谈精益生产中的周转箱优势&#…
阅读更多...
C++：内存管理

C++：内存管理

内存分布&#xff1a; 首先我们需要了解的是C/C中内存区域的划分&#xff1a; 1. 栈又叫堆栈--非静态局部变量/函数参数/返回值等等&#xff0c;栈是向下增长的&#xff1a;先调用的地址比后调用的地址大。 2. 内存映射段是高效的I/O映射方式&#xff0c;用于装载一个共享的动…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023