自定义属性、DOM事件基础

最新推荐文章于 2024-11-04 09:11:09 发布
最新推荐文章于 2024-11-04 09:11:09 发布
阅读量97 收藏
点赞数
分类专栏： js 笔记 文章标签： html html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LUZENG_SA/article/details/120817348
版权
js 同时被 2 个专栏收录
24 篇文章 1 订阅
订阅专栏
笔记
9 篇文章 0 订阅
订阅专栏
本文探讨了JavaScript中DOM操作的实践，包括节点操作、子节点获取、文本节点处理，以及如何通过创建元素节点优化性能，如使用`document.createElement`而非`innerHTML`。同时介绍了阻止链接跳转的技巧和数组处理方法。核心在于前端开发中的高效DOM操作和兼容性策略。
摘要由CSDN通过智能技术生成

获取属性

 

 节点操作

 

 子节点

 

 一般输出是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自定义属性(带案例)
见贤思齐焉，见不贤内自省
01-10 1282
Dom自定义属性(带案例)
React基础篇——十、自定义DOM属性
sxww_zyt的博客
10-22 191
十、自定义DOM属性 React 16 之前会忽略不是把的HTML和SVG属性，现在React会把不识别的属性传递给DOM。 React16之前： 　　<div cust-attr="someting"></div>会被渲染成: 　　<div></div> React 16渲染出来的节点： 　　<div cust-attr="someting...
【学习前端第三十五课】DOM的自定义属性
weixin_65729202的博客
01-19 1015
首先，标签的属性除了我们认识的一些系统自带的属性之外，我们也可以自定义标签的属性，我们可以在任意你需要的元素上面添加任何你想要的属性，没有限制< input type = " text " placeholder = " 请输入内容 " age = " 18 " >< input type = " text " placeholder = " 请输入内容 " age = " 18 " >
CSS 之 自定义属性（变量）
weixin_45092437的博客
05-28 2433
CSS的自定义属性，又称为CSS变量或级联变量，用于定义一个带有值的、可重复使用的CSS属性（变量）。其包含的值可以在其作用域内的任意属性上重复使用，在使用时需要借助var()函数获取自定义属性的值。当自定义属性的值发生变化时，所有使用该自定义属性的CSS属性都会随之变化。
20230314----重返学习-原生JavaScript开发思路-DOM自定义属性-JavaScript编程思想-匿名函数具名化-jQuery
seetoyou的博客
03-14 451
给DOM元素对象设置自定义属性的方式对象的成员访问原理:直接操作DOM元素对象的堆内存空间基于去管理原理:直接设置在元素的标签上所以所设置的属性值都会转换为字符串，并且属性名不区分大小写因为所有属性在标签上都是字符串属性名都会转为小写两种方式因为原理不一样，所以不能混在一起使用除非一些特殊的内置属性例如id，在结构中设置，在堆内存空间中也有改了堆内存中的信息元素标签的结构也跟着改变了这个叫做DOM映射jQuery是一个前端框架或类库。它里面封装了大量的方法，可以简化我们。
DOM 事件详解
weixin_48376132的博客
07-05 4572
注册事件（绑定事件） 1. 概述 给元素添加事件，称为注册事件 / 绑定事件 注册事件有两种方式：传统方式和方法监听注册方式 2. 传统注册方式 利用 on 开头的事件 DOM 0级事件绑定方式—— 因为 W3C 在确定 DOM 版本时，在之前已经有了事实上存在的一些事件，比如 onclick 这种直接绑定给元素的属性的事件，DOM1 中用的还是之前的事件，所以是 DOM 0级事件，而不是1级事件 <button oncilck = "alert(1)"></button> btn.
jsDom对象、鼠标事件、自定义属性、节点操作
mslmhl的博客
04-29 492
js分为三个部分（基础语法、Dom、Bom） DOM:获取节点、创建节点、删除节点、添加节点等属性 Bom：浏览器窗口 getElementsByTagName()获取到是动态集合； getElaementsByTagName和getElementsByClassName函数的返回值都是集合而getElementById函数获取的是一个元素，而且指获取第...
angular6 自定义DOM节点属性（非标准DOM属性设置）
黄彪博客
07-26 1331
文章目录文章参考问题描述模板绑定是通过 property 和事件来工作的，而不是 attribute。自定义设置属性值 文章参考 angular5 给元素添加自定义属性 问题描述 今天想总结一下angular基础知识，想自己写一个自定义myname属性的demo，类似于jquery那样在某个element对象中添加属性，结果angular编译报错，提示是说myname不是div的属性 模板绑定...
Vue基础，常用指令，组件，自定义属性
xiaotanke
11-15 1208
文章目录`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
DOM基础测试--不凡
Harley567
09-22 6217
DOM基础测试 1.如何获取 DOM 对象 document.getElementById(‘id’); document.getElementByClassName(‘className’); document.getElementByTagName(‘标签名’); document.querySelector(‘css选择器’); //返回的是css选择器的第一个值 document.querySelectorAll(‘css选择器’); //返回的是所有被查找的元素 是一个类数组; 2.常用属性 st
浅谈JS读取DOM对象(标签)的自定义属性
10-21
在JavaScript编程中，操作DOM对象是日常开发的基础任务之一，而自定义属性的读取与设置是其中的重要环节。DOM（文档对象模型）是表示和交互HTML文档的编程接口，它允许开发者通过脚本动态地访问、修改文档结构、样式...
js 点击a标签 获取a的自定义属性方法
11-26
本文将详细讲解如何在JavaScript中点击`<a>`标签并获取其自定义属性的方法，以及如何解决在jQuery环境下遇到的问题。 首先，我们来回顾一下问题的背景。在项目中，开发者试图通过点击`<a>`标签来显示完整的内容。...
HTML 基础标签——元数据标签 ＜meta＞
Allen-
11-01 312
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
CSS:基础选择器,文字控制属性(HTML)
最新发布
m0_75035023的博客
11-04 118
CSS:基础选择器,文字控制属性(HTML),javaweb
HTML 标签属性——id、class、style 等全局属性详解
Allen-
11-02 180
HTML全局属性是一组可以应用于几乎所有HTML元素的特殊属性。这些属性提供了额外的功能和信息，使得网页开发者能够更好地控制元素的行为、样式和可访问性。
flex布局的练习题 ---都抖音解决方案(web)
m0_75035023的博客
10-31 430
flex布局的练习题 ---都抖音解决方案(web),html,
Html编写发射粒子爱心
m0_58419490的博客
10-31 1220
【代码】Html编写发射粒子爱心。
HTML 基础标签——文本内容标签 ＜ul＞、＜ol＞、＜blockquote＞ 、＜code＞ 等标签的用法详解
Allen-
11-01 530
在 HTML 文档中，文本内容标签用于定义和格式化文本信息。这些标签不仅使文本内容易于阅读和理解，还可以通过不同的格式和结构增强网页的可读性。本文将详细介绍常用的文本内容标签，包括标题标签、段落标签、文本格式化标签、列表标签、引用标签，以及代码和预格式文本标签。
HTML 文档规范与解析模式：DOCTYPE、＜html＞ 标签以及结构化页面
Allen-
11-01 433
是 HTML5 文档的类型声明，位于文档的第一行。它的主要作用是告知浏览器按照标准模式渲染网页，确保网页在不同浏览器之间的一致性，避免因解析差异而导致的显示问题。将这一声明放在 HTML 文档的最上方，确保它是文档的第一行，这是开发中的一个重要细节。在标准模式下，浏览器遵循现代的 Web 标准，确保页面的布局和样式一致。而在怪异模式中，浏览器则可能模拟旧版浏览器的行为，这可能导致网页在不同环境中的呈现效果不一。是一个简单却关键的声明，它确保网页在现代浏览器中正确渲染，为开发者提供了一个更为一致的开发环境。
JavaScript自定义对象与DOM基础教程
此外，资源还涵盖了JavaScript的基本语法，如变量声明（使用`var`关键字，区分大小写）、变量作用域（局部和全局变量的区别）、以及事件处理，这些都是理解JavaScript编程的基础。最后，提到了一些调试工具和开发...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

北木南-

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

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

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

打赏作者

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

抵扣说明：

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

余额充值