自定义属性、DOM事件基础

最新推荐文章于 2025-12-06 21:29:45 发布
原创 最新推荐文章于 2025-12-06 21:29:45 发布 · 144 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #html5 #css

本文探讨了JavaScript中DOM操作的实践，包括节点操作、子节点获取、文本节点处理，以及如何通过创建元素节点优化性能，如使用`document.createElement`而非`innerHTML`。同时介绍了阻止链接跳转的技巧和数组处理方法。核心在于前端开发中的高效DOM操作和兼容性策略。

获取属性

 

 节点操作

 

 子节点

 

 一般输出是text，因为元素节点上下一个是换行。换行是文本节点，所以返回

自己封装兼容性函数 

创建操作节点一般是做网页评论啥

 

 

 

node指的是父节点 

 

阻止连接跳转  a的属性设置 href="javascript:;" 

 this.parentNode是这个元素节点的父节点

 

 这个是填充数据局
  

 这个放在for (var k in datas[i]){}这个里面

 点击“删除”连接的删除操作 

 

innerHTML与document.createElement创建运行时间比对

因为document.createElement是创建(26ms)，而innerHTML是拼接(3000ms)，所以document.createElement效率远好于inner.HTML

 join数组转字符串

 DOM核心重点

 

 

 

 

 

 

 

 

 

 

【学习前端第三十五课】DOM的自定义属性
weixin_65729202的博客
01-19 1109
首先，标签的属性除了我们认识的一些系统自带的属性之外，我们也可以自定义标签的属性，我们可以在任意你需要的元素上面添加任何你想要的属性，没有限制< input type = " text " placeholder = " 请输入内容 " age = " 18 " >< input type = " text " placeholder = " 请输入内容 " age = " 18 " >
CSS 之 自定义属性（变量）
weixin_45092437的博客
05-28 3174
CSS的自定义属性，又称为CSS变量或级联变量，用于定义一个带有值的、可重复使用的CSS属性（变量）。其包含的值可以在其作用域内的任意属性上重复使用，在使用时需要借助var()函数获取自定义属性的值。当自定义属性的值发生变化时，所有使用该自定义属性的CSS属性都会随之变化。
前端基础(十)_Dom自定义属性(带案例)
见贤思齐焉，见不贤内自省
01-10 1384
Dom自定义属性(带案例)
React基础篇——十、自定义DOM属性
sxww_zyt的博客
10-22 246
十、自定义DOM属性 React 16 之前会忽略不是把的HTML和SVG属性，现在React会把不识别的属性传递给DOM。 React16之前： 　　<div cust-attr="someting"></div>会被渲染成: 　　<div></div> React 16渲染出来的节点： 　　<div cust-attr="someting...
20230314----重返学习-原生JavaScript开发思路-DOM自定义属性-JavaScript编程思想-匿名函数具名化-jQuery
seetoyou的博客
03-14 519
给DOM元素对象设置自定义属性的方式对象的成员访问原理:直接操作DOM元素对象的堆内存空间基于去管理原理:直接设置在元素的标签上所以所设置的属性值都会转换为字符串，并且属性名不区分大小写因为所有属性在标签上都是字符串属性名都会转为小写两种方式因为原理不一样，所以不能混在一起使用除非一些特殊的内置属性例如id，在结构中设置，在堆内存空间中也有改了堆内存中的信息元素标签的结构也跟着改变了这个叫做DOM映射jQuery是一个前端框架或类库。它里面封装了大量的方法，可以简化我们。
DOM 事件详解
weixin_48376132的博客
07-05 4760
注册事件（绑定事件） 1. 概述 给元素添加事件，称为注册事件 / 绑定事件 注册事件有两种方式：传统方式和方法监听注册方式 2. 传统注册方式 利用 on 开头的事件 DOM 0级事件绑定方式—— 因为 W3C 在确定 DOM 版本时，在之前已经有了事实上存在的一些事件，比如 onclick 这种直接绑定给元素的属性的事件，DOM1 中用的还是之前的事件，所以是 DOM 0级事件，而不是1级事件 <button oncilck = "alert(1)"></button> btn.
【前端开发基础】4.8 DOM事件
Flask Web
02-04 671
DOM（文档对象模型）事件允许 JavaScript 对用户或浏览器的行为作出响应。掌握这些事件后，可以灵活实现交互逻辑，如表单验证、动画触发、拖拽操作等！
jsDom对象、鼠标事件、自定义属性、节点操作
mslmhl的博客
04-29 567
js分为三个部分（基础语法、Dom、Bom） DOM:获取节点、创建节点、删除节点、添加节点等属性 Bom：浏览器窗口 getElementsByTagName()获取到是动态集合； getElaementsByTagName和getElementsByClassName函数的返回值都是集合而getElementById函数获取的是一个元素，而且指获取第...
JavaScript自定义事件深度解析:从基础到高级应用
你若盛开，清风自来
12-09 1029
基本语法其中，typeArg是一个字符串，表示事件的类型名称。这个名称应该是独一无二的，以便在触发和监听事件时能够准确地识别。是一个可选的对象，用于配置事件的一些属性，例如detail属性可以用来传递自定义的数据。示例以下是一个简单的例子，创建并触发一个自定义事件：// 创建一个DOM元素作为事件目标// 定义自定义事件detail: {message: '这是自定义事件的数据'});// 为元素添加事件监听器});// 触发自定义事件在这个例子中，首先创建了一个div。
Vue基础，常用指令，组件，自定义属性
xiaotanke
11-15 1302
文章目录`Vue2`基础学习笔记1、`MVVM`模式2、第一个`Vue`程序3、`Vue`的基本语法3.1、v-bind指令3.2、v-if 指令3.3、v-else 指令3.4、v-else-if 指令3.5、v-for 指令3.6、v-on 指令3.7、v-model 指令3.8、v-once 指令3.9、`v-html`指令3.10、v-show 指令4、组件5、计算属性6、插槽（slot）7、`Vue` 实例7.1、创建`Vue`对象7.2、`Vue` 的7大属性7.3、数据与方法7.4、 `Vue
浅谈JS读取DOM对象(标签)的自定义属性
10-21
在JavaScript编程中，操作DOM对象是日常开发的基础任务之一，而自定义属性的读取与设置是其中的重要环节。DOM（文档对象模型）是表示和交互HTML文档的编程接口，它允许开发者通过脚本动态地访问、修改文档结构、样式...
js 点击a标签 获取a的自定义属性方法
11-26
本文将详细讲解如何在JavaScript中点击`<a>`标签并获取其自定义属性的方法，以及如何解决在jQuery环境下遇到的问题。 首先，我们来回顾一下问题的背景。在项目中，开发者试图通过点击`<a>`标签来显示完整的内容。...
HTML应用指南：利用POST请求获取全国极氪门店位置信息
weixin_45812624的博客
12-03 1546
本篇文章介绍了通过程序化方式采集并分析极氪全国门店数据的完整流程。基于对官网接口的解析，利用 Python 自动请求市级行政区编码，并批量调用门店查询接口，高效获取包含门店名称、地址、高德经纬度、营业时间及开业日期等字段的结构化数据。针对地理坐标，文章对高德（GCJ-02）坐标系进行了标准化转换，确保后续在地图平台上的精准可视化；同时将原始时间戳统一处理为标准日期格式，支撑时间维度分析。在此基础上，揭示出极氪门店“核心城市群密集布局、区域中心精准覆盖”的空间策略。
使用 HTML + JavaScript 实现手写签名功能
QQ26843500的博客
12-04 880
本文介绍了一个基于HTML5 Canvas实现的手写签名网页应用。该应用主要功能包括： 提供米字格背景和范字（"海纳百川"）作为书写参考 支持鼠标和触摸屏两种书写方式 包含清空画布和下载签名图片两个功能按钮 技术实现上使用双Canvas叠加方案，底层Canvas绘制米字格和范字作为引导层，上层Canvas实现手写功能。通过JavaScript事件监听实现笔迹追踪，采用贝塞尔曲线平滑处理书写轨迹。响应式设计适配不同设备，并提供PNG格式的签名下载功能。整体界面简洁，采用蓝色标题栏和白色书写
HTML DOM 对象
wjs2024的博客
12-02 480
DOM（Document Object Model）是一种抽象的模型，用于表示 HTML 和 XML 文档。通过 DOM，开发者可以访问和操作文档中的任何元素，如文本、图像、链接等。DOM 对象化地表示了网页的结构，使得开发者可以像操作对象一样操作网页内容。HTML DOM 对象是网页设计和开发的基础，掌握 DOM 对象的基本概念、常用方法和实际应用，将有助于提高开发效率和代码质量。本文对 HTML DOM 对象进行了简要介绍，希望对您有所帮助。
HTML 基础
wjs2024的博客
12-02 358
HTML是构建网页和网站的基础，掌握HTML基础知识对于成为一名优秀的网页开发者至关重要。本篇文章为您介绍了HTML的发展历程、基本结构、常用标签以及一些高级特性。希望您能够通过学习，更好地掌握HTML，为您的网页开发之路打下坚实的基础。
前端html(3)
踢球的IT男，就是分享一些小东西！互相学习，共同进步！
12-06 459
注：表格相关的元素很多，我们这里整理一下：caption:用来设置表格标题；thead:表示表格的头部区域；th:表示表格的头部中的一个列；tbody:表示表格的中间主要显示区域；tr:表示表格的一个行；td:表示表格的和个列；tfoot:设置表格的脚部；colspan:表示横跨几列；
【JavaWeb】HTML_常见标签_表单项标签
qq_43494013的博客
12-04 157
【JavaWeb】HTML_常见标签_表单项标签
抖音直播时，飘窗提示的html窗口，主播不在，正在喝9
最新发布
恶猫的日记
12-06 116
无人或有人直播时，临 时离开，就弄个小窗口，提示下。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北木南-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值