当前位置: 首页 > news >正文

Web APIs(获取元素+操作元素+节点操作)

目录

1.API 和 Web API

2.DOM导读

DOM树

3.获取元素

getElementById获取元素

getElementsByTagName获取元素

H5新增方法获取

获取特殊元素

4.事件基础

执行事件

操作元素

修改表单属性

修改样式属性

使用className修改样式属性

获取属性的值

设置属性的值

移除属性值

H5自定义属性

5.节点操作

节点概述

节点层级

父级节点 

子级节点

兄弟节点

添加节点

删除节点

复制节点

三种动态元素创建区别


1.API 和 Web API

2.DOM导读

DOM树

3.获取元素

getElementById获取元素

文档页面从上往下加载,先有标签,将script写到标签的下面

var  变量名=document.getElementById('参数')

返回的类型是元素对象,object         <div id=''time''>2019-9-9</div>

使用console.dir(变量名)   可以查看里面的属性和方法

getElementsByTagName获取元素

根据标签名获取

var list=document.getElementsByTagName('标签名')

返回的是一个集合,想要得到里面的元素需要用for循环遍历

得到的元素对象是动态的

获取某个元素(父元素)内部所有指定标签名的子元素

element.getElementsByTagName('标签名')

父元素必须是单个对象

想要得到ol中的li,有两种方法

var ol=document.getElementsByTagName('li')

console.log(ol[0].getElementsByTagName('li'))

或者是 在写ol时直接给ol的标签中命名一个id(下面命名的id是ol)

var ol=document.getElementsByTagName('ol')

console.log(ol.getElementsByTagName('li'))

H5新增方法获取

document.getElementsByClassName('类名')   根据类名返回元素对象集合

document.querySelector('选择器')         根据指定选择器返回第一个元素对象;其中类选择器要加.如.box,而id选择器要加#,如#nav

document.querySelectorAll('选择器')     返回指定选择器的所有元素对象集合

获取特殊元素

获取body元素    document.body

获取html元素     document.documentElement

4.事件基础

执行事件

事件是由三部分组成,事件源、事件类型、事件处理程序,也将它们成为事件三要素

事件源 :事件被触发的对象    如按钮

事件类型  :如何触发,什么事件   如点击鼠标或者鼠标经过等

事件处理程序  :通过一个函数赋值的方法来完成

事件类型,即如何触发

操作元素

这两个方法可以在触发时改变原先的内容

element.innerText   不会注意html标签,它会把空格和换行也去掉

element.innerHTML     注意html标签,会保留空格和换行

修改表单属性

<input type="text" value="输入内容">

想要点击按钮,文本框的内容发生变化用input.value=

想要某个表单被禁用,就是点击过一次后不能再点击用  按钮名.disabled=true  或者  this.disabled=true,这里的this指向的是事件函数的调用者

修改样式属性

采取驼峰命名法,注意第二个单词首字母要大写;它形成的是行内样式,权重高

仿淘宝关闭二维码图

触发时间的开关是点击图片叉号,关闭整个二维码,运用到了隐藏的设置display:none;在设置元素的样式时一般不用写出来,默认是display:block

另外就是要注意this的用法,this指向的是事件函数的调用者,在此处事件函数的调用者是btn,所以不能写this.style.display

使用className修改样式属性

当触发事件时要修改的元素样式太多,可以现在style中写一个新的类,把想要的元素样式写进去,之后在script中利用className=‘新类名’来改变样式

后面的类名会覆盖掉原先的类名

获取属性的值

element.属性   获取属性值                获取的是内置属性值,即元素本身自带的属性

element.getAttribute(’属性‘)              获得的是程序员自定义的属性

设置属性的值

element.属性='值'                     设置内置属性值

element.setAttribute('属性','值')                 设置自定义的属性

div.className='bg'   =======   div.setsetAttribute('class','bg')  这里写的是class而不是className

移除属性值

element.removeAttribute('属性')

H5自定义属性

设置H5自定义属性

H5规定自定义属性以data-开头作为属性名并且赋值        <dic data-index='1'><index>

或者就是使用setAttribute      element.setAttribute('data-index',2)

获取H5自定义属性

第一种就是常用的 element.getAttribute('data-index')

H5新增的获取方法只能获取data-开头的     div,dataset.属性名  或者  div.dataset['属性名']

dataset是一个存放了所有以data开头的自定义属性的集合

当自定义属性中有多个使用‘-’连接的单词,在获取时可以采用驼峰命名法

5.节点操作

节点概述


节点层级

父级节点 

node.parentNode   

该属性可返回某节点的父节点,是离该元素最近的一个父节点,没有的话则返回null

子级节点

使用parentNode.childNodes   返回值中包含了元素节点、文本节点,不精确

使用parentNode.children      值返回子元素节点

第一个和最后一个子元素

firstChild   第一个子节点,会获得文本节点 

firstElementChild        可以返回第一个元素节点,但有兼容性问题

children[]       实用,利用数组的概念,最后一个元素索引是ol.children.length-1

兄弟节点

node.nextSibling    返回当前元素的下一个兄弟节点,找不到则返回null,包括文本节点

node.previousSibling       返回当前元素的上一个兄弟节点,找不到则返回true,包括文本节点

node.nextElementSibling         返回当前元素的下一个兄弟节点

node.previousElementSibling

添加节点

添加节点是先创建再添加  var 新名=document.createElement('类型')

node.appendChild(child)   将一个节点添加到指定父节点的子节点列表中,类似于css中的after伪元素

node.insertBefore(child,指定元素)   将一个节点添加到父节点的指定子节点前面,类似before伪元素

node是父节点

删除节点

node.removeChild(child)    删除一个子节点

删除留言

点击链接即可删除留言,在这里为了不使点击链接后跳转页面,添加了javascript:;

复制节点

node.cloneNode()   复制一个节点

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

如果括号参数为true,是深拷贝,会复制节点本身以及里面所有的子节点

要注意的是,在定义新变量来接复制值时,要把复制值放在网页中的某个位置

三种动态元素创建区别

document.write()   直接将内容写入页面的内容流中,当文档执行完毕时,它会导致页面全部重绘(清空页面,显示出write()的内容)

element.innerHTML 创建多个元素效率更高(不要拼接字符串,采取数组形式拼接),结构复杂

document.createElement()    创建多个元素效率稍微低一点,但是结构清晰

创建单元格并删除

tr是行, td是单元格,th是行中单元格的内容

遍历数组,并获取数组中的对象,dates[i][k]表示的是属性值

相关文章:

Web APIs(获取元素+操作元素+节点操作)

目录 1.API 和 Web API 2.DOM导读 DOM树 3.获取元素 getElementById获取元素 getElementsByTagName获取元素 H5新增方法获取 获取特殊元素 4.事件基础 执行事件 操作元素 修改表单属性 修改样式属性 使用className修改样式属性 获取属性的值 设置属性的值 移除…...

Android adb shell关于CPU核的命令

Android adb shell关于CPU核的命令 先使用命令&#xff1a; adb shell 进入控制台。 然后&#xff0c;直接在$后面输入下面命令&#xff0c;针对CPU的命令。 cat /proc/cpuinfo | grep ^processor | wc -l 查看当前手机的CPU是几核的。 cat sys/devices/system/cpu/online …...

基于springboot+mybatis+vue的项目实战之页面参数传递

如图所示&#xff0c;删除操作可以用按钮实现&#xff0c;也可以用超链接来实现。 1、第一种情况&#xff0c;用按钮实现。 html页面相关&#xff1a; <button type"button" click"deleteId(peot.id)">删除</button> <script>new Vue(…...

CSS-浮动

float (浮动) 作用&#xff1a;盒子的顶点是一样的&#xff0c;具备行内块的特征&#xff0c;能设置宽高 属性&#xff1a;float 属性值&#xff1a;left 浮动在网页左边 right 浮动在网页右边 .a{width: 100px;height: 100px;float:left;background-color: red;}.b…...

MFC:字符串处理

例子 //多字节char* szTest "abc多字节";int nLen strlen(szTest);//9//宽字节wchar_t* szTest2 L"abc多字节";int nlen2 wcslen(szTest2);//6//测试项目配置为Unicodewchar_t* szTesz3 TEXT("abcd");//char* -> CStringCString strTes…...

虚拟仿真云平台在教育应用中的优势和意义

虚拟仿真云实验教学平台作为一种新型的教学方法&#xff0c;近年来在高校教育中得到了十分广泛的应用。它通过模拟真实的实验场景和实验操作&#xff0c;让学生在计算机上进行实验操作和数据处理&#xff0c;为学生提供了更加便捷、可靠、有效的实验学习环境。本文&#xff0c;…...

CPU的的处理流程如何快速记忆

为了快速记忆CPU的处理流程&#xff0c;可以将其简化成五个主要阶段&#xff0c;通常称为“冯诺依曼架构”的五个基本步骤&#xff0c;或者是流水线处理的几个阶段。下面是一种便于记忆的简化版本&#xff1a; CPU处理流程的五个阶段&#xff1a; 取指令&#xff08;Instructi…...

AI视频教程下载:基于OpenAl、LangChain、 Replicate开发AI应用程序

欢迎来到令人兴奋的 AI 应用世界&#xff01;在这门课程中&#xff0c;你将学习到创建一个能够与用户互动、理解自然语言、处理音频输入&#xff0c;甚至分析图像的真正智能应用所需的技能和技术。 AI 工具和技术 你将获得使用几个知名 AI API 和技术的实际经验。这些行业领先…...

【C++】继承相关(基类与派生类的继承关系以及细节整理)

目录 00.引言 01.继承的定义 02.基类和派生类对象 03.继承中的作用域 04.派生类的默认成员函数 05.友元、静态成员 00.引言 继承是面向对象编程中的一个重要概念&#xff0c;它的作用是创建一个新的类&#xff0c;该类可以从一个已存在的类&#xff08;父类/基类&#x…...

【Web后端】监听器Listener

1、简介 用来监听Servlet组件对象状态发生变化的组件可以监听的源包括:ServetRequest、HttpSession、ServletContext当监听到事件源状态发生变化时&#xff0c;会有对应的响应行为 2、使用方法 在web.xml文件中配置 <listener> <listener-class>com.coder.util.…...

C/C++ 初级球球大作战练手

效果演示&#xff1a; https://live.csdn.net/v/385490 游戏初始化 #include <stdbool.h> #include<stdio.h> #include<stdlib.h> #include<time.h> #include<graphics.h> #include <algorithm> #include<math.h> #include<mmsy…...

ES6之字符串的扩展

字符串的扩展 关键的扩展点及其示例&#xff1a; Unicode 表示与处理 JavaScript 共有6种方法可以表示一个字符。codePointAtpos&#xff1a;String.fromCodePoint…codePoints&#xff1a; **字符串的遍历 for … of **字符串方法的增强 includessearchString[, position]&…...

微信小程序开发,构建NPM报错解决

报错信息如下&#xff1a; message&#xff1a; NPM packages not found. Please confirm npm packages which need to build are belong to miniprogramRoot directory. Or you may edit project.config.jsons packNpmManually and packNpmRelationList appid: wx7144a5d5411…...

【异常】SpringBoot整合RabbitMQ-发送消息报错

错误信息 reply-code406, reply-textPRECONDITION_FAILED - inequivalent arg ‘x-message-ttl’ for queue ‘hello-queue’ in vhost ‘/lq’: received none but current is the value ‘10000’ of type ‘signedint’, class-id50, method-id10 错误原因 hello-queue这…...

通过钉钉卡片进行工单审批

我们通常通过钉钉机器人来发送通知&#xff0c;提醒审批人名下有待办工单需要处理。这种通知方式仅能提醒审批人到ITSM中处理&#xff0c;审批人需要打开电脑登陆平台处理&#xff0c;我们就考虑是否能有一种方式能够满足移动端审批&#xff1f; 这里我们可以使用ITSM的移动端版…...

C语言中的控制语句:深入解析与案例实践2

五、使用goto实现无条件跳转 虽然goto语句在现代编程实践中往往被避免使用&#xff0c;因为它可能导致代码难以理解和维护&#xff0c;但在某些特定情况下&#xff0c;它仍然可以作为一种解决方案。goto语句允许程序无条件地跳转到代码中指定的标签位置。 案例代码&#xff1a…...

【ARM Cortex-M 系列 2.1 -- Cortex-M7 Debug system registers】

请阅读【嵌入式开发学习必备专栏】 文章目录 Debug system registers中断控制状态寄存器&#xff08;ICSR&#xff09;Debug Halting Control and Status Register, DHCSR Debug 寄存器DCRSR与DCRDRCPU 寄存器读操作CPU 寄存器写操作CPU 寄存器选择CPU 寄存器读写示例 调试故障…...

深入解析C#中的async和await关键字

文章目录 一、异步编程的基本概念及其在C#中的实现二、async关键字的定义及其用法三、await关键字的定义及其用法示例代码&#xff1a;使用async和await编写一个简单的异步程序 四、async和await的优点注意事项 五、C#下async和await中常见问题汇总1. 异步方法中的await调用2. …...

【VUE.js】前端框架——未完成

基于脚手架创建前端工程 环境 当安装node.js时&#xff0c;它本身就携带有npm命令。&#xff08;-v 查版本号&#xff09;安装VUE CLI npm i vue/cli -g&#xff08;全局&#xff09; 创建 vue create 【project name】 镜像源解决方案 输入创建命令后&#xff0c;提示检查更…...

开源的文件压缩和解压缩软件7-Zip

7-Zip是一款开源的文件压缩和解压缩软件&#xff0c;它支持多种压缩格式&#xff0c;包括自有的7z格式以及常见的ZIP、RAR、TAR等格式。下面是对7-Zip的详细介绍&#xff0c;包括其功能特点、使用方法、优缺点等方面的内容。官网&#xff1a;7-Zip 1. 功能特点&#xff1a; 多…...

2026 ASNT-TC-1A 无损检测 Ⅱ/Ⅲ 级认证指南|API/ASME 认证必备 + 报考实操

一、行业刚需&#xff1a;为何 ASNT-TC-1A 资质是工业检测领域的「硬通货」在石油天然气、压力容器、钢结构焊接等工业领域&#xff0c;无损检测&#xff08;NDT&#xff09;是产品质量保障的核心环节&#xff0c;而ASNT-TC-1A作为美国无损检测学会制定的人员资格鉴定和认证标准…...

一文读懂:智能体身份权限治理演进实录

序章当一个实验性的“咖啡外卖”智能体&#xff08;BrewSense&#xff09;&#xff0c;从服务几位工程师的小工具&#xff0c;演变为数千人依赖的自动化伙伴时&#xff0c;会发生什么&#xff1f;这不仅仅是用户量和调用量的激增&#xff0c;更是一场关于身份、权限与信任的治理…...

NaViL-9B部署案例:中小企业用双24GB显卡替代A100实现降本增效

NaViL-9B部署案例&#xff1a;中小企业用双24GB显卡替代A100实现降本增效 1. 项目背景与价值 在AI大模型应用日益普及的今天&#xff0c;中小企业面临着高昂的硬件投入成本。传统部署方案通常需要A100等高端显卡&#xff0c;单卡价格动辄数万元&#xff0c;让许多企业望而却步…...

Matlab 实现 DES 与 RSA 双重加密及可视化界面搭建

基于matlab上的DES和RSA两种算法的双重加密&#xff0c;附带显示界面&#xff0c;可更改DES密钥&#xff0c;明文消息&#xff08;在显示界面中&#xff09;&#xff0c;可在代码中更改RSA对应的p&#xff0c;q&#xff0c;e等数据&#xff0c;代码可附加注释和对应要求修改。在…...

NaViL-9B图文问答入门:Web界面支持拖拽上传+历史记录回溯功能

NaViL-9B图文问答入门&#xff1a;Web界面支持拖拽上传历史记录回溯功能 1. 平台介绍 NaViL-9B是一款原生多模态大语言模型&#xff0c;由专业研究机构开发。它不仅能像传统语言模型一样处理纯文本问答&#xff0c;还具备强大的图片理解能力。这意味着你可以上传一张图片&…...

三步突破抖音音乐批量下载难题:douyin-downloader全功能技术指南

三步突破抖音音乐批量下载难题&#xff1a;douyin-downloader全功能技术指南 【免费下载链接】douyin-downloader 项目地址: https://gitcode.com/GitHub_Trending/do/douyin-downloader 在数字内容创作领域&#xff0c;背景音乐是提升作品感染力的关键元素。然而&…...

LFM2.5-1.2B-Thinking部署教程:3步实现Python爬虫数据智能处理

LFM2.5-1.2B-Thinking部署教程&#xff1a;3步实现Python爬虫数据智能处理 1. 引言 你是不是经常遇到这样的问题&#xff1a;爬虫抓取了一大堆数据&#xff0c;但面对杂乱无章的文本内容却无从下手&#xff1f;手动整理不仅耗时耗力&#xff0c;还容易出错。现在&#xff0c;…...

OpenClaw异常处理:配置nanobot自动重试失败任务

OpenClaw异常处理&#xff1a;配置nanobot自动重试失败任务 1. 为什么需要自动重试机制 上周我让OpenClaw执行一个简单的夜间数据收集任务时&#xff0c;遇到了一个令人头疼的问题。凌晨3点&#xff0c;网络突然波动导致任务中断&#xff0c;而当我早上打开电脑时&#xff0c…...

Phi-3-mini-128k-instruct辅助Dev-C++初学者:C/C++编译错误智能解读

Phi-3-mini-128k-instruct&#xff1a;你的Dev-C编程“陪练” 刚学C/C那会儿&#xff0c;你是不是也经常被Dev-C弹出的那一大串编译错误信息搞得一头雾水&#xff1f;什么“undefined reference”&#xff0c;什么“expected ‘;’ before ‘}’ token”&#xff0c;每个单词都…...

Qwen3.5小尺寸模型开源,9B碾压GPT开源版,消费级显卡就能跑

AI圈又出大新闻了✨ 阿里通义千问3.5系列小尺寸模型正式亮相&#xff0c;直接打破“小模型能力弱”的固有认知&#xff0c;甚至实现了“以小胜大”的逆袭&#xff0c;本地部署门槛直接拉到平民级&#xff01; 先上核心干货——这次千问3.5一口气推出了4款小尺寸模型&#xff0c…...