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,一经查实,立即删除!

相关文章

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

导言&#xff1a; 在当今数字化的世界中&#xff0c;网络安全已经成为了每个人都需要关注的重要议题。而勒索病毒作为网络安全领域中的一大威胁&#xff0c;不断地演变和升级&#xff0c;给个人和组织带来了严重的损失和困扰。近期&#xff0c;一种名为.jayy的勒索病毒引起了广…

(十一)RabbitMQ及SpringAMQP

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

接口日志表结构

表&#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 消息类…

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

1 赛题思路 (赛题出来以后第一时间在群内分享&#xff0c;点击下方群名片即可加群) 2 比赛日期和时间 报名截止时间&#xff1a;2024年4月11日&#xff08;周四&#xff09;12:00 比赛开始时间&#xff1a;2024年4月12日&#xff08;周五&#xff09;8:00 比赛结束时间&…

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对比学习二

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

Python项目21:一个简单的记账系统(收入+支出+查询)

------------★Python练手项目源码★------------ Python项目源码20&#xff1a;银行管理系统&#xff08;开户、查询、取款、存款、转账、锁定、解锁、退出&#xff09; Python项目19&#xff1a;学员信息管理系统&#xff08;简易版&#xff09; Python项目18&#xff1a;…

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

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

C++ 【原型模式】

简单介绍 原型模式是一种创建型设计模式 | 它使你能够复制已有对象&#xff0c;客户端不需要知道要复制的对象是哪个类的实例&#xff0c;只需通过原型工厂获取该对象的副本。 以后需要更改具体的类或添加新的原型类&#xff0c;客户端代码无需改变&#xff0c;只需修改原型工…

[ 云计算 | AWS ] ChatGPT 竞争对手 Claude 3 上线亚马逊云,实测表现超预期

文章目录 一、前言二、Claude 3 介绍以及相关测试细节三、在亚马逊云科技上体验 Claude 33.1 在 Amazon Bedrock 服务中配置 Claude 33.2 为聊天配置使用 Claude 3 模型3.3 Caude 3 Sonet 聊天体验 四、文末总结五、参考文献 一、前言 3月4号&#xff0c;Anthropic 发布了号称…

第十四届蓝桥杯C/C++大学B组题解(一)

1、日期统计 #include <bits/stdc.h> using namespace std; int main() {int array[100] {5, 6, 8, 6, 9, 1, 6, 1, 2, 4, 9, 1, 9, 8, 2, 3, 6, 4, 7, 7,5, 9, 5, 0, 3, 8, 7, 5, 8, 1, 5, 8, 6, 1, 8, 3, 0, 3, 7, 9,2, 7, 0, 5, 8, 8, 5, 7, 0, 9, 9, 1, 9, 4, 4, 6,…

鸿蒙Lottie动画-实现控制动画的播放、暂停、倍速播放、播放顺序

介绍 本示例展示了lottie对动画的操作功能。引入Lottie模块&#xff0c;实现控制动画的播放、暂停、倍速播放、播放顺序、播放到指定帧停止或从指定帧开始播放、侦听事件等功能&#xff0c;动画资源路径必须是json格式。 效果预览 使用说明&#xff1a; 进入页面默认开始201…

Python人工智能应用---中文分词词频统计

目录 1.中文分词 2.循环分别处理列表 &#xff08;1&#xff09;分析 &#xff08;2&#xff09;代码解决 3.词袋模型的构建 &#xff08;1&#xff09;分析需求 &#xff08;2&#xff09;处理分析 1.先实现字符串的连接 2.字符串放到新的列表里面 4.提取高频词语 &…

一些好玩的东西

这里写目录标题 递归1.递归打印数组和链表?代码实现原理讲解二叉树的 前 中 后 序位置 参考文章 递归 1.递归打印数组和链表? 平常我们打印数组和链表都是 迭代 就好了今天学到一个新思路–>不仅可以轻松正着打印数组和链表 , 还能轻松倒着打印(用的是二叉树的前中后序遍…

Linux基础篇:Linux第三方软件仓库——可以让Linux变得有趣的软件仓库

Linux第三方软件仓库——可以让Linux变得有趣的软件仓库 一、epel源介绍 EPEL&#xff08;Extra Packages for Enterprise Linux&#xff09;源是一个由Fedora项目组维护的第三方软件仓库&#xff0c;为企业级Linux发行版&#xff08;如Red Hat Enterprise Linux&#xff08;…

清明作业 c++

1.封装一个类&#xff0c;实现对一个数求累和阶乘质数 #include <iostream>using namespace std; int mproduct(int a){if(a>1){return a*mproduct((a-1));}else{return 1;} } class number{int a; public:number():a(5){};number(int a):a(a){}void set(int a){thi…

ChatGLM-6B实战微调(P-tuning-v2、LORA)

硬件准备 GPU: NVIDIA Tesla A30 24GB python 3.10 pytorch 1.11 transformers 4.27.1 实验环境 Change your pip source pip config set global.extra-index-url https://pypi.tuna.tsinghua.edu.cn/simple # Writing to /opt/conda/pip.conf pip config set global.inde…

浏览器工作原理与实践--DOM树:JavaScript是如何影响DOM树构建的

在上一篇文章中&#xff0c;我们通过开发者工具中的网络面板&#xff0c;介绍了网络请求过程的几种性能指标以及对页面加载的影响。 而在渲染流水线中&#xff0c;后面的步骤都直接或者间接地依赖于DOM结构&#xff0c;所以本文我们就继续沿着网络数据流路径来介绍DOM树是怎么生…

MATLAB实现数值求解高阶常微分方程组

一、高阶常微分方程组 高阶常微分方程是指包含多个高阶常微分方程的系统。这些方程通常涉及多个未知函数及其高阶导数。解决高阶常微分方程组通常比解决单个高阶常微分方程更为复杂&#xff0c;因为需要同时考虑多个方程和多个未知函数之间的关系。 一般来说&#xff0c;解决…

【PyQt5篇】使用QtDesigner添加控件和槽

文章目录 &#x1f354;使用QtDesigner进行设计&#x1f6f8;在代码中添加信号和槽 &#x1f354;使用QtDesigner进行设计 我们首先使用QtDesigner设计界面 得到代码login.ui <?xml version"1.0" encoding"UTF-8"?> <ui version"4.0&q…