Web APIs简介 Dom

JS的组成

 API

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

简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。

 

 DOM简介

1.1什么是DOM

文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的的内容、结构和样式

 获取元素

如何获取页面元素

DOM在我们万宁实际开发中主要用来操作元素

获取页面中的元素可以使用以下几种方式：

  • 根据id获取
  • 根据标签名获取
  • 通过HTML5新增的方法获取
  • 特殊元素获取
根据ID获取

使用getElementById()方法可以获取带有ID的元素对象

document.getElementById('Id');

使用console.dir()可以打印我们获取的元素对象，更好的查看对象里面的属性和方法。 

根据标签名获取

使用getElementByTagName()方法可以返回带有指定标签名的对象集合。

document.getElementByTagName('标签名');

注意：

  1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
  2. 得到元素对象是动态的
  3. 如果获取不到元素，则返回为空的伪数组（因为获取不到对象）
通过HTML5新增的方法获取

1.document.getElementByClassName('类名');//根据类名返回元素对象集合 

 2.document.querySelector('选择器');//根据选择器返回第一个元素对象

3.document.querySelectorAll('选择器');//根据指定选择器返回 

注意：

querySelect和querySelectorAll里面的选择器需要加符号，比如document,querySelector('#nav'); 

 获取特殊元素（body,html)

获取body元素

1.document.body//返回body元素对象

获取html元素

1.document.documentElement//返回html元素对象 

 事件基础

事件概述

JavaScript使我们有能力创建动态页面，而事件是可以被JavaScript侦测到的行为

网页中的每个元素都可以产生某些可触发JavaScript的事件

事件三要素

  1. 事件源
  2. 事件类型
  3. 事件处理程序

执行事件的步骤

  1. 获取事件源
  2. 注册事件
  3. 添加事件处理程序（采取函数赋值形式） 

常见的鼠标事件

操作元素

JavaScript的DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等

改变元素内容

element.innerText

从起始位置到终止位置的内容，但它去除html标签，同时也会去掉空格和换行

element.innerHTML 

起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行 

常用元素的属性操作

1.innerText、innerHTML改变元素内容

2.src、href

3.id、alt、title 

表单元素的操作属性

利用DOM可以操作如下表单元素的属性：

type,value,checked,selected,disabled 

 样式属性操作

我们可以通过JS修改元素的大小、颜色、位置等样式

1.element.style  行内样式操作

2.element.calssName  类名样式操作

注意：

1.JS里面的样式采取驼峰命名法

2.JS修改style样式操作，产生的是行内样式，css权重比较高 

3.className会直接更改元素的类名，会覆盖原先的类名

排他思想

如果有一组元素，我们想要一个元素实现某种样式，需要用到循环的排他思想算法：

  1. 所有元素全部清除样式
  2. 给当前元素设置样式
  3. 注意顺序不能颠倒 

eg.百度换肤

 

 自定义属性的操作

1.获取属性值

  • element.属性   获取属性值
  • element.getAttribute('属性')

区别

  • element.属性  获取内置属性值（元素本身自带属性）
  • element.getAttribute('属性');主要获得自定义的属性（标准）我们程序员自定义属性 

2.设置属性值

  • element 属性='值'    设置内置属性值
  • element.setAttribute('属性','值'）； 

区别

  • element.属性   设置内置属性值
  • element.setAttribute('属性');主要设置自定义的属性 

 3.移除属性

 element.removeAttribute（'属性'）；

H5自定义属性

自定义属性目的是为了保存并使用数据 。有些数据可以保存到页面中而不用保存到数据库中。

自定义属性获取是通过getAttribute('属性')获取

但是有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性

h5给我们新增了自定义属性：

1.设置H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

 2.获取H5自定义属性

  1. 兼容性获取    element.getAttribute('data-index');
  2. H5新增element.dataset.index 或者element.dataset['index'] ie11才开始支持

节点操作 

 

 节点概述

网页中的所有内容都是节点（标签、属性、文本、注释等）、在DOM中，节点使用node来表示

HTML  DOM 树中的所有结点均可通过JavaScript进行访问，所有HTML元素（节点）均可倍修改，也可以创建或删除

 节点概述

一般地，节点至少拥有 node Type(节点类型）、nodeName(节点名称） 和nodeValue(节点值）这三个基本属性

  • 元素节点 node Type为1
  • 属性节点 node Type为2
  • 文本节点 node Type为3（包含文字、空格、换行等）

我们在实际开发中，节点操作主要操作的是元素节点

节点层级

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系

 1.父级节点

node.parentNode

  • parentNode属性可返回某节点的父节点，注意的是最近的一个父节点
  • 如果指定的节点没有父节点则返回null 

子节点

1.parentNode.childNodes(标准） 

parentNode.childNodes返回包含指定节点的子节点的集合 ，该集合为即时更新的集合

注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等

如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes

2.parentNode.children(非标准）

parentNode.child是一个只读属性，返回所有子元素节点。他返回子元素节点，其余节点不返回（这个是我们重点掌握的）

虽然children是一个非标准，但是得到了各个浏览器的支持，因此我们可以放心使用 

3.parentNode.firstChild 

 firstChild 返回第一个子节点，找不到则返回null，同样，也是包含所有的节点。

4.parentNode.lastChild

 lastChild返回最后一个子节点，找不到则返回null。同样，也是包含所有的节点

5.parentNode.firstElementChild

 firstElementChild返回第一个子元素节点，找不到则返回null

6.parentNode.lastElementChild

 lastElementChild返回最后一个子节点，找不到则返回null

注意：5.6方法有兼容性问题，IE9以上才支持

 

兄弟节点

1.node.nextSibling 

nextSlibing返回当前元素的下一个兄弟节点，找不到则返回null。同样，也是包含所有的节点。

2.node.previousSling 

previousSling返回当前元素上一个兄弟节点，找不到则返回null，同样，也是包含所有的节点。

3.node.nextElementSbling

nextElementSibling返回当前元素下一个兄弟节点，找不到则返回null。

4.node.previousElementSibling 

previousElementSibling 返回当前元素上一个兄弟节点， 找不到则返回null。

注意：这两个方法都有兼容性问题，IE9以上才支持。

如何解决兼容性问题？

自己封装一个兼容性函数

function getNextElementSibling(element) {var el=element;while (el=el.nextSibling) {if (el.nodeType===1) {return el;}}return null;}

创建节点

document,createElement('tagName')

 document,createElement() 方法创建由tagName指定的HTML元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

添加节点

1.node.appendChild(child)

 node.appendChild(child)方法将一个节点添加到指定父节点的子节点列表末尾。类似于CSS里面的after伪元素。

2.node.insertBefore(child,指定元素）

 node.insertBefore（）方法将一个节点添加到父节点的指定节点前面。类似于CSS里面的before伪元素。

删除节点

node.removeChild(child)

node.removeChild方法从DOM中删除一个子节点，返回删除的节点。 

复制节点（克隆节点）

node.cloneNode()

node.cloneNode()方法返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

注意：

1.如果括号参数为空或者为false,则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。

2.如果括号参数为true，则是深度拷贝，会复制节点本身以及里面所有的子节点。

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 50px;margin: 100px auto;border-collapse: collapse;text-align: center;}td,th {border: 1px solid #333;}thead tr {height: 40px;background-color: #ccc;}</style></head>
<body><table cellspacing="0"><thead><tr><th>姓名</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody></tbody></table><script>//先准备好学生数据var datas=[{name:'ali',subject:'math',score:100},{name:'niki',subject:'math',score:98},{name:'lili',subject:'math',score:98}];//往tbody里面建行，有几个人（通过数组长度）我们就建几行var tbody=document.querySelector('tbody');for(var i=0; i<datas.length;i++){var tr=document.createElement('tr');tbody.appendChild(tr);for(var k in datas[i]){var td=document.createElement('td');td.innerHTML=datas[i][k];tr.appendChild(td);}var td=document.createElement('td');td.innerHTML='<a href="javascript:;">删除</a>';tr.appendChild(td);}var as=document.querySelectorAll('a');for (var i=0;i<as.length;i++){as[i].onclick=function() {tbody.removeChild(this.parentNode.parentNode)}}</script></body></html>

 三种动态创建元素区别
  • document.write()
  • element.innerHTML
  • document.createElement()

区别

  1. document.write 是直接将内容写入页面的内容流，但是文档流执行完毕，则它会导致页面全部重绘 
     1. document.write() //创建元素  如果页面文档流加载完毕，再调用这句话会导致页面重绘var btn = document.querySelector('button');btn.onclick = function() {document.write('<div>123</div>');}

  2.  innerHTML是将内容写入某个DOM节点，不会导致页面全部重绘 
     // 2. innerHTML 创建元素var inner = document.querySelector('.inner');// for (var i = 0; i <= 100; i++) {//     inner.innerHTML += '<a href="#">百度</a>'// }var arr = [];for (var i = 0; i <= 100; i++) {arr.push('<a href="#">百度</a>');}inner.innerHTML = arr.join('');

  3. innerHTML创建多个元素效率更高（不要拼接字母，采取数组形式拼接），结构稍微复杂

  4. createElement()创建多个元素效率稍微低一点，但是结构更清晰 
     // 3. document.createElement() 创建元素var create = document.querySelector('.create');for (var i = 0; i <= 100; i++) {var a = document.createElement('a');create.appendChild(a);}

总结：不同浏览器下，innerHTML效率要比createElement高

文档对象模型（DOM）是W3C组织推荐的处理可扩展标记语言的标准编程接口

W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

  1. 对于Javascript。为了能够使Javascript操作HTML，Javascript就有了一套自己的dom编程接口。
  2. 对于HTML,dom使得html形成一颗dom树，包含文档、元素、节点

 创建

  1. document.write
  2. innerHTML
  3. createElement

增

  1. appendChild
  2. innerHTML

 删

  1. removeChild

 改

主要修改dom的元素属性，dom元素的内容、属性表单的值等

  1. 修改元素属性：src\href\title等
  2. 修改普通元素属性：innnerHTML\innerText
  3. 修改表单元素：value\type\disabled
  4. 修改元素样式： style\className

查

主要获取查询dom的元素

  1. DOM提供的API方法： getelementById\getElementByTagNmae
  2. H5提供的新方法：querySelector\querySelectorAll
  3. 利用节点操作获取元素：parentNode\children\previousElementSibling\nextElementSibling 

属性操作

主要针对于自定义属性

  1. setAttribute:设置dom的属性值
  2. getAttribute:得到dom的属性值
  3. removeAttribute移除属性 

 

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

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

相关文章

旋转验证码v2的加密算法

旋转验证码v2的加密算法

某网站最近更新了旋转验证码v2的加密算法&#xff0c;给爬虫程序带来了新的挑战。本文将通过网络抓包和逆向分析&#xff0c;深入探讨验证码请求和响应的加密机制&#xff0c;并提供详细的代码实现&#xff0c;帮助读者了解并应对新版验证码的加密算法。 网络抓包分析&#xf…
阅读更多...
数据计算_先分组平均再加总平均与直接整体平均的差异

数据计算_先分组平均再加总平均与直接整体平均的差异

数据计算_先分组平均再加总平均与直接整体平均的差异 例如: 现有 A, B, C, D, E, F, G, H 共 8 组数据。 A: 16619 B: 12922 C: 15946 D: 13096 E: 13647 F: 13700 G: 13703 H: 12430其整体平均的值为: Average of ABCDEFGH: (16619 12922 15946 13096 13647 13700 1…
阅读更多...
RecyclerView实现View复用的原理

RecyclerView实现View复用的原理

RecyclerView是Android框架类&#xff0c;用于显示一个持续更新的项列表。它是一个容器&#xff0c;可以利用回收和重用的视图元素来展示数据。 RecyclerView的工作原理&#xff1a; 当RecyclerView需要展示一个新的项时&#xff0c;它会调用Adapter的onCreateViewHolder()方…
阅读更多...
Linux--文件、分区与挂载

Linux--文件、分区与挂载

概述1 **Linux系统中的文件系统是用于管理文件的系统**&#xff0c;它负责数据的存储和管理。在Linux中&#xff0c;一切皆文件&#xff0c;包括普通的文件、目录以及块设备、管道等都通过文件系统来管理。文件系统不仅包含文件中的数据&#xff0c;还包括文件系统的结构&…
阅读更多...
授人以渔 选购EX篇：推荐杂记索引

授人以渔 选购EX篇：推荐杂记索引

文章目录 系列文章生活好物饮食好物其他好物系统软件篇软件推荐杂记娱乐推荐杂记 系列文章 授人以渔 选购篇一&#xff1a;信用卡选购要点 授人以渔 选购篇二&#xff1a;冰箱选购要点 授人以渔 选购篇三&#xff1a;洗衣机&#xff08;烘干机&#xff09;选购要点 授人以渔 选…
阅读更多...
感染了后缀为.jayy勒索病毒如何应对？数据能够恢复吗？

感染了后缀为.jayy勒索病毒如何应对？数据能够恢复吗？

导言&#xff1a; 在当今数字化的世界中&#xff0c;网络安全已经成为了每个人都需要关注的重要议题。而勒索病毒作为网络安全领域中的一大威胁&#xff0c;不断地演变和升级&#xff0c;给个人和组织带来了严重的损失和困扰。近期&#xff0c;一种名为.jayy的勒索病毒引起了广…
阅读更多...
Pointlio 保存每帧的里程计和点云数据用作后处理的自动或者手动回环优化

Pointlio 保存每帧的里程计和点云数据用作后处理的自动或者手动回环优化

修改了laserMapping.cpp 文件，替换源程序的这个文件即可， Pointlio 保存每帧的里程计和点云数据用作后处理的自动或者手动回环优化，需要在设置里面打开保存数据的参数和pub的参数。 // #include <so3_math.h> #include <nav_msgs/Odometry.h> #include <nav…
阅读更多...
（十一）RabbitMQ及SpringAMQP

（十一）RabbitMQ及SpringAMQP

1.初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种方式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要马上回复。 两种方式各有优劣&#xff0c;打电话可以立即得到响应&#xff0c;…
阅读更多...
anaconda 安装Jupyter

anaconda 安装Jupyter

在Anaconda中安装Jupyter Notebook可以通过以下步骤进行&#xff1a; 打开Anaconda命令行界面&#xff08;可以在开始菜单中找到Anaconda3下的Anaconda Prompt&#xff09;。 在命令行中&#xff0c;输入以下命令来更新当前的conda环境&#xff1a; conda update conda 然后…
阅读更多...
接口日志表结构

接口日志表结构

表&#xff1a;ZTALL_IFLOG MANDT MANDT CLNT 3 0 0 客户端 UUID SYSUUID_C32 CHAR 32 0 0 16-byte UID in 32 chars (hexadecimal) IFSNR ZE_IFSNR CHAR 30 0 0 接口编号(系统ID流水号) FUNCNAME RS38L_FNAM CHAR 30 0 0 功能模块的名称 STATUS BAPI_MTYPE CHAR 1 0 0 消息类…
阅读更多...
蚓链为可移动经济打造数据资产

蚓链为可移动经济打造数据资产

​蚓链在为以五菱移动商业为代表的可移动实体经济在数据资产方面带来新的增量和增值&#xff1a; 1. 丰富数据种类和规模&#xff1a;通过数字化手段&#xff0c;可移动实体经济能够收集更多种类和更大规模的数据。 2. 优化运营决策&#xff1a;基于数据分析做出更明智的决策…
阅读更多...
2024年MathorCup妈妈杯数学建模思路D题思路解析+参考成品

2024年MathorCup妈妈杯数学建模思路D题思路解析+参考成品

1 赛题思路 (赛题出来以后第一时间在群内分享&#xff0c;点击下方群名片即可加群) 2 比赛日期和时间 报名截止时间&#xff1a;2024年4月11日&#xff08;周四&#xff09;12:00 比赛开始时间&#xff1a;2024年4月12日&#xff08;周五&#xff09;8:00 比赛结束时间&…
阅读更多...
MySQL-基本SQL语句编写：运算符练习

MySQL-基本SQL语句编写：运算符练习

运算符练习 1.选择工资不在5000到12000的员工的姓名和工资 SELECT last_name,salary FROM employees #where salary not between 5000 and 12000; WHERE salary < 5000 OR salary > 12000;2.选择在20或50号部门工作的员工姓名和部门号 SELECT last_name,department_id…
阅读更多...
Unity与CocosCreator对比学习二

Unity与CocosCreator对比学习二

一、锚点与适配 1.在Creator中 适配通过锚点、位置和Widget达到适配目的&#xff1b;锚点是节点在其父节点坐标系中坐标对其点&#xff0c;其x,y范围在[0, 1]之间&#xff1b; 锚点为(0, 0)时在节点自身的左下角&#xff0c;节点坐标指其左下角在父节点中的坐标&#xff1b;锚…
阅读更多...
【C++ STL】简述

【C++ STL】简述

文章目录 【 1. 容器 】【 2. 迭代器 】【 3. 适配器 】 C 的 STL&#xff08; 全称是 Standard Template Library 标准模板库&#xff0c;也叫 泛型库&#xff09;是一套功能强大的 C 模板类&#xff0c;提供了 通用的模板类和函数&#xff0c;这些模板类和函数可以实现多种流…
阅读更多...
spring之AOP(面向切面编程)之详结

spring之AOP(面向切面编程)之详结

AOP面向切面编程&#xff0c;一种编程范式&#xff0c;指导开发者如何组织程序结构 作用&#xff1a; 在不惊动原始设计的基础上为其进行功能增强 核心概念 代理&#xff1a;SpringAOP的核心本质是采用代理模式实现的连接点&#xff1a;程序执行过程中的任意位置&#xff0…
阅读更多...
Python项目21：一个简单的记账系统（收入+支出+查询）

Python项目21：一个简单的记账系统（收入+支出+查询）

------------★Python练手项目源码★------------ Python项目源码20&#xff1a;银行管理系统&#xff08;开户、查询、取款、存款、转账、锁定、解锁、退出&#xff09; Python项目19&#xff1a;学员信息管理系统&#xff08;简易版&#xff09; Python项目18&#xff1a;…
阅读更多...
【Linux-运维】查看操作系统的指定端口占用情况确定端口是哪个服务占用

【Linux-运维】查看操作系统的指定端口占用情况确定端口是哪个服务占用

不同的查看端口占用的方法&#xff0c;应用场景有所不同 一、查询某个端口是否被占用&#xff1f;lsof -i:端口号lsof -i:协议 查看某个协议的占用情况netstat -tlnp|grep 端口号ss -tlnp|grep 端口号fuser 端口号/协议ls -l /proc/$(lsof -t -i:端口号)|grep exe 二、确认指定…
阅读更多...
统计天数C++

统计天数C++

1.统计天数 问题描述 给定两个年份 n*,*m&#xff0c;问&#xff0c;两个年份之间有多少天&#xff08;包括年份 n 和年份 m&#xff09;&#xff1f; 输入格式 第一行包含两个整数 n*,m&#xff0c;含义与问题描述中相同。 输出格式 输出共一行&#xff0c;包含一个整数…
阅读更多...
Android14系统go版添加微件功能

Android14系统go版添加微件功能

一般normal版软件自带微件功能&#xff0c;但是go版没有这个功能&#xff0c;但是客户有时会要求也要加上这个微件功能&#xff0c;实现的方法修改如下&#xff1a; 1. frameworks/base diff --git a/core/res/res/values/config.xml b/core/res/res/values/config.xml index…
阅读更多...
最新文章

Copyright @ 2022~2023