JavaScript中API知识：获取元素，时间的执行，操作元素修改内容属性，排他思想，全选反选，自定义属性操作，节点的增删

最新推荐文章于 2022-09-02 11:40:49 发布
最新推荐文章于 2022-09-02 11:40:49 发布
阅读量97 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fairy_zhong/article/details/116137887
版权

JavaScript中的API

获取元素的方法

  1. getElementById
    在这里插入图片描述

  2. getElementsByTagName
    在这里插入图片描述

  3. H5新增获取元素的方法
    在这里插入图片描述

  4. 获取特殊元素
    在这里插入图片描述

事件的执行过程

事件三要素

在这里插入图片描述

事件的执行步骤

在这里插入图片描述

innerText 和 innerHTML的区别

在这里插入图片描述

操作元素之改变元素内容

在这里插入图片描述

操作元素之修改元素属性

在这里插入图片描述

操作元素之表单属性设置

在这里插入图片描述

操作元素之修改样式属性

在这里插入图片描述

通过className更改元素样式

在这里插入图片描述

排他思想（干掉所有人，留下我自己）

在这里插入图片描述

全选反选

在这里插入图片描述
在这里插入图片描述

自定义属性操作

在这里插入图片描述
H5自定义属性
在这里插入图片描述

节点操作

  1. 父节点操作
    在这里插入图片描述

  2. 子节点操作
    在这里插入图片描述

  3. 第一个子元素和最后一个子元素
    在这里插入图片描述

  4. 兄弟节点
    在这里插入图片描述

  5. 添加和创建节点
    在这里插入图片描述

  6. 删除节点
    在这里插入图片描述

  7. 克隆节点
    在这里插入图片描述

  8. 动态生成表格案例
    在这里插入图片描述

  9. 三种创建元素方式的区别
    在这里插入图片描述

钟露本仙
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DOM 操作之全选反选与排他思想
yyyggyy的博客
11-27 146
【1】html5操作自定义属性 <body> <!-- html5操作自定义属性 --> <div id="boxId" class="boxClass" a12="10" data-index="yzx666"></div> <script> var idBox = document.querySelector('.boxClass'); //获取id console.log(t
操作元素自定义属性的操作
weixin_45989924的博客
04-15 354
自定义属性的操作 获取元素的属性值的方法 <body> <div id="damo"></div> </body> <script> var div=document.querySelector("div") // 获取元素的属性值 // 通过element.属性值获取 console.log(div.id); // 方法二：通过element..getAttribute("属性名")
webAPI-操作元素
wayliu的博客
03-04 159
1.获取元素 2.事件基础 3.操作元素内容 4.操作元素普通属性 5.操作元素表单属性 6.操作元素样式属性 7.操作元素自定义属性 1.获取元素 getElementById(‘id’) getElementByTagName(‘Tag’) getElementByClassName(‘Class’) querySelector(’’),类：.类名，id: #id名，标签：标签名,根据指定选择器返回第一个元素对象 querySelectorAll(’’),根据选择器返回所有元素集合 document.
web前端学习720-741（DOM---操作元素，接上）
weixin_51249285的博客
04-19 431
文章目录DOM4 操作元素案例:分时显示不同图片,显示不同问候语4.3 表单元素的属性操作4.4 样式属性操作 DOM 4 操作元素 案例:分时显示不同图片,显示不同问候语 根据不同时间,页面显示不同图片,同时显示不同的问候语。 如果上午时间打开页面,显示上午好,显示上午的图片。 如果下午时间打开页面,显示下午好,显示下午的图片。 如果晚上时间打开页面,显示晚上好,显示晚上的图片。 案例分析 根据系统不同时间来判断,所以需要用到日期内置对象 利用多分支语句来设置不同的图片 需要一个图片,并且根据时间修改图
php 的全选与反选,vue做出全选与反选功能
weixin_36347877的博客
03-10 116
这次给大家带来vue做出全选与反选功能，vue做出全选与反选功能的注意事项有哪些，下面就是实战案例，一起来看一下。全选功能可以说是前端开发中非常常见的一个功能，以前的项目开发用jQuery开发比较多。最近在使用vue前端框架重构之前的项目。从jQuery到vue的转变主要是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据，用数据驱动dom，也是vue框架的一个核心思想，思想转变过来，...
WebAPI-排他思想-全选反选案例-自定义属性操作-节点操作-创建元素
weixin_42533892的博客
04-13 187
节点、关于dom操作，我们主要针对于元素的操作。主要有创建、增、删、改、查、属性操作、事件操作。排他思想……
Javascript-API-DOM-全选反选、Tab栏切换案例、节点的操作、自定义属性的操作、
qq_39206750的博客
10-22 1754
排他思想 如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 <button>按钮1</button> <button>按钮2</button> <button&gt...
12前端学习之WebAPI(二):排他思想、自定义属性操作、节点操作
浅弋、璃鱼的博客
04-06 446
文章目录一、排他操作:1. 排他思想:2. 案例:换肤:3. 案例：表格隔行变色 一、排他操作: 1. 排他思想: 如果有同一组元素，想要某一个元素实现某种样式， 需要用到循环的排他思想算法： 所有元素全部清除样式（干掉其他人） 给当前元素设置样式 （留下我自己） 注意顺序不能颠倒，首先干掉其他人，再设置自己 <button>按钮1</button> <bu...
JavaScript 操作元素案例练习
YuLong的博客
06-08 3406
文章目录案例：显示隐藏密码案例案例：循环精灵图案例：密码框验证信息案例：背景换色案例：表格换色案例：表单全选和反选案例：tab栏切换 案例：显示隐藏密码案例 核心思路： (操作表单元素属性) 点击眼睛按钮，把密码框类型改为文本框就可以看见里面的密码 一个按钮两个状态， 点击一次，切换为文本框，继续点击一次切换为密码框 算法：利用一个flag变量，来判断flag的值，如果是1 就切换为文本框，flag 设置为0，如果是0 就切换为密码框，flag设置为1 <style> .box{
解决vue 3中出现的error ‘defineProps‘ is not defined报错
fairy_zhong的博客
08-04 3771
解决vue 3中出现的error 'defineProps' is not defined报错
element-plus中dialog中的header不生效的原因
fairy_zhong的博客
08-05 2122
element-plus中dialog中的header不生效的原因
树形table父子联动，子父联动实现
最新发布
fairy_zhong的博客
09-02 1559
element 中table树形表格根据子级取父级的数据，父子联动，子父联动。
【无标题】Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘tableId‘)
fairy_zhong的博客
08-09 1511
Uncaught (in promise) TypeError: Cannot read properties of null (reading ‘tableId’)解决办法。
CSS浮动的特点
fairy_zhong的博客
03-18 1058
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
JavaScript节流阀
fairy_zhong的博客
08-11 886
节流阀：防止轮播图按钮连续点击造成播放过快 节流阀的目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。 核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。 开始设置一个变量 var flag=true； if (flag){flag=flase;do something} 关闭水龙头 利用回调函数 动画执行完毕，flag=true 打开水龙头 ...
location记录浏览历史
fairy_zhong的博客
06-09 310
location 常见的方法
前端面试题积累（持续更新）
fairy_zhong的博客
04-19 257
前端面试题 计算数组的最大值和平均值 题目：求数组 [2,6,1,7, 4] 里面所有元素的和以及平均值。 思路： (1)声明一个求和变量 sum。 (2)遍历这个数组，把里面每个数组元素加到 sum 里面。 (3)用求和变量 sum 除以数组的长度就可以得到数组的平均值。 代码： var arr = [2, 6, 1, 7, 4]; var sum = 0; var average = 0; for (var i = 0; i < arr.len
JavaScript动画实现的基本原理和简单封装
fairy_zhong的博客
06-10 205
动画实现的基本原理 核心原理：通过定时器setInterval()不断移动盒子位置 实现步骤： 1.获得盒子当前位置 2.让盒子在当前位置加上uige移动距离 3.利用定时器不断重复这个操作 4. 加一个结束定时器的条件 5. 注意此元素需要添加定位，才能使用element.style.left 动画函数的简单封装 函数需要传递两个参数，动画对象 obj 和 移动到的距离 target 如果调用了你的盒子还没有动，检查看是不是忘了加绝对定位了。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值