JavaScript DOM——节点属性方法

最新推荐文章于 2024-08-24 22:31:57 发布
原创 最新推荐文章于 2024-08-24 22:31:57 发布 · 141 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript

本文深入探讨了DOM操作中的核心方法，包括getAttribute(), setAttribute(), 和removeAttribute()的使用技巧及案例，展示了如何通过这些方法高效地操作网页元素的属性。

一、节点方法

1. getAttribute() ： 获取属性值

在这里插入图片描述
获取src属性：
在这里插入图片描述
在这里插入图片描述
获取id属性：
在这里插入图片描述
在这里插入图片描述
获取style属性：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2. setAttribute() ： 设置属性值

设置src属性前
在这里插入图片描述
将图片src属性改变后，那么不会显示该图片
在这里插入图片描述
在这里插入图片描述

3. removeAttributel()： 删除属性

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

案例：随机显示

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

Educoder JavaScript：HTML DOM——文档元素的操作
Junds0的博客
06-01 3349
第1关：通过id获取文档元素 获取本文档中id为a1的文档元素，要求用id获取文档元素；将获取的元素赋值给变量myElement <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>get element by id</title> </head> <body> <a id="a1" src="h
JS HTML DOM 节点操作 属性操作
ly1010yl的博客
03-08 968
可以获取元素的指定元素值:接受的是一个以字符串形式表示的属性名称，返回的是一个字符串类型的值，如果指定属性不存在，则返回空字符串。格式：var new_e=ele.insertBefore(new_e,target_node);格式:var new_e=ele.appendChild(new_e);ele表示父元素，newNode替换后的节点，oldNode替换前的节点。格式：var node=ele.removeChild(node);ele表示被删除节点的父节点，node表示将要被删除的节点。
js查找元素和设置dom节点属性和样式浅析
heshengfu1211的博客
08-08 1670
 以前一直做PC端的web开发，习惯了使用jquery操作文档的dom节点和选择元素，如今转到移动端开发更多的用到了原生js，也用到了hbuilder 的mui框架来开发移动App。但是发现mui框架的文档介绍里并没有关于类似jquery那种定位dom节点，选择器和修改属性和样式的Api。我们知道，原生js代码是在各种设备和浏览器中兼容性最好的，于是这两天研究了javascript操作dom节点属...
JS DOM属性节点操作
aaron9185的博客
05-27 283
操作属性节点有两种当时，一种是通过普通对象的方式来操作属性节点，另外一种是通过属性节点的方法来操作属性节点。 1. 元素节点.属性或元素节点[属性] 如果我们可以把元素节点当成普通对象来处理，通过 元素节点.属性 或 元素节点[属性] 的方式来设置属性。 注意：设置类 class 只能用 className 1.1 获取属性 var img = document.getElementsByTagName('img')[0]; var box = document.getElementsByCla
03 JS-DOM之--节点属性操作方法（2种）附案例源码
路遇惊喜
11-29 1393
属性操作两种方法： 1、 dom对象.属性 == dom对象[属性] ; 2、 dom对象.get/set/removeAttribute() 获取属性：dom对象.getAttribute(名称) 设置属性：dom对象.setAttribute(名称, 值) 删除属性：dom对象.removeAttribute(名称) //案例-body代码
JS--DOM节点对象，获取节点，节点属性，操作Dom节点，获取元素的偏移量，获取元素尺寸及综合练习
qq_63322025的博客
08-29 791
JS--DOM节点对象，获取节点，节点属性，操作Dom节点，获取元素的偏移量，获取元素尺寸及综合练习
jacascript DOM节点——元素节点、属性节点、文本节点
08-30
JavaScript DOM（Document Object Model）是Web开发中用于操作...理解元素节点、属性节点和文本节点的概念及其操作方法是JavaScript Web开发的基础。熟练掌握这些知识，可以帮助开发者更有效地实现页面交互和动态更新。
JavaScript学习手册十四：HTML DOM——文档元素的操作（二）
qq_45823118的博客
04-24 1万+
HTML DOM——文档元素的操作1.创建节点任务描述相关知识创建节点代码文件2.插入节点任务描述相关知识插入节点代码文件3.删除节点任务描述相关知识删除节点代码文件4.替换节点任务描述相关知识替换节点代码文件5.综合练习任务描述相关知识下拉列表的级联代码文件 1.创建节点 任务描述 1.本关任务：创建一个表单<form>节点。 2.具体要求如下： 创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post，如下所示： <form id
JavaScript初级——DOM查询
最新发布
Fan_web的博客
08-24 825
本文主要跟大家分享了关于DOM查询常用的几个方法，包括获取元素节点、子节点、父节点、兄弟节点等等，还简单介绍了childNodes属性、children属性、firstElementChild、innerText、previousElementSibling、文本框的value属性以及checked属性和响应函数等内容。下一节继续分享关于DOM查询的一些其他方法。
JavaScript程序设计——DOM访问实验报告.docx
11-11
实验报告的主题是“JavaScript程序设计——DOM访问”，其目的是深入理解和掌握DOM（Document Object Model）在JavaScript中的应用，包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示，允许...
DOM实现获取img标签src属性的绝对位置和相对位置
好吗好的~的技术博客
12-29 5189
获取相对路径 显示图片的相对当前的文档所处的位置。 document.getElementById(obj).getAttribute('src')   获取绝对路径 显示是图片的完整路径，即在服务器的哪个文件夹下和文件命名。 document.getElementById(obj).src  ...
JavaScript-DOM-属性节点
十二的博客
04-27 2217
JavaScript-DOM-属性节点
JS中的DOM属性节点操作
张子又
01-18 1609
DOM属性节点操作 操作属性节点有两种当时，一种是通过普通对象的方式来操作属性节点，另外一种是通过属性节点的方法来操作属性节点。 1. 元素节点.属性或元素节点[属性] 如果我们可以把元素节点当成普通对象来处理，通过 元素节点.属性 或 元素节点[属性] 的方式来设置属性。 注意：设置类 class 只能用 className 1.1 获取属性 var img = document.getElem...
用JS(JavaScript )给HTML元素增加id属性
热门推荐
qq_21422005的博客
12-04 5万+
有时候HTML页面元素定位后，发现如一些input元素输入框没有唯一性的id 或者class，那么我们如果想要给这个HTML元素增加属性，可以自行添加元素属性 样例： 元素div 有class属性，但这个class并非唯一 （可查看） document.getElementsByClassName('el-textarea__inner') 查询出来这个页面有2个el-textarea__i...
JavaScript基础: DOM中操作属性以及自定义属性
u011863822的博客
04-19 692
本篇注意聊了一下在JavaScript中如何修改元素的属性，同时将属性的一些差异演示了一遍。涉及到自定义属性，排他思想，当然还有具体的案例。
javascript 多个同样按钮触发同一个事件_「融职培训」Web前端学习 第3章 JavaScript基础教程14 DOM基础...
weixin_39631344的博客
11-21 517
一、DOM的基本概念本章节可谓是相当重要了,是让JavaScript灵动起来必不可少的一步文档对象模型定义了树状结构定义了接口，可以用来操作树状结构二、样式操作我们可以通过DOM提供的querySelector方法来获取元素，然后进一步操作它的样式示例代码如下:1 DOM样式测试2 若需要通过js设置多个元素的样式，可以使用querySelectorAll方法，示例代码如下: 1 2 香...
DOM节点操作属性和方法
weixin_43846130的博客
01-22 1625
一、访问/获取节点 document.getElementById(id);　　　　　　　　 　　//返回对拥有指定id的第一个对象进行访问 document.getElementsByName(name);　　　　　　//返回带有指定名称的节点集合　　 注意拼写:Elements document.getElementsByTagName(tagname); 　　//返回带有指定标签名的对象集合...
JS DOM节点属性设置、值的获取——几种不同的方法及各自的利弊
足各路
01-22 1910
1.节点属性的设置 对象.属性名=值; 对象[属性名]=值; obj.setAttribute(pro,value) 2.节点属性值的获取： 对象.属性名 对象[属性名] obj.getAttribute(pro) 注意：前两种设置和获取属性的方法，均需要注意特殊情况 class ---&amp;amp;amp;amp;amp;amp;amp;amp;gt; className for ---&amp;amp;amp;amp;amp
JavaScript 技术篇-js语句创建dom节点，并给节点设置属性
小蓝枣的博客
07-21 4153
JavaScript 技术篇-js语句创建dom节点，并给节点设置属性。 document.createElement() 是创建节点的方法。 setAttribute() 是设置属性的方法。 可用看到效果图： 已经加入到 body 节点里的最下面位置了，而且样式就如我所设置的一样。
从DOM节点提取data属性的JavaScript工具
标题“data-attributes: 从DOM节点提取数据属性”明确指出了该技术的核心目标：通过 JavaScript 从 DOM 节点中安全、高效地读取这些自定义数据。描述进一步说明了这一过程的实际应用场景和实现方式，并提供了一个名...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值