通过js获取/添加标签直接的内容/属性

最新推荐文章于 2024-02-01 22:05:42 发布

原创最新推荐文章于 2024-02-01 22:05:42 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了使用JavaScript操作DOM元素的三种实用方法：获取元素内容而不包含标签、为标签添加样式属性以及向页面添加新的标签与内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.获取该元素中的所有内容，不包含标签
var zx=div.innerText;
2.通过js给标签中添加属性
div1.style.属性=‘属性值’;
3.通过js给页面中添加标签和内容

 div.innerHTML='<p>hello</p>'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一个人的世界、

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

js-API 获取元素的相关方式innerText和innerHTMl区别

qq_38964133的博客

03-09

1463

对象可以直接. 其属性拿到的数据是json队形那么就可以直接点属性调用成对标签修改里面的内容使用 innertext 不是成对比如input 私用value 按钮的排他功能获取所有按钮注册每个按钮点击事件循环让没被点击的按钮的值为没被点击被点击的按钮显示的value值为被点击了 this.value 注意为事件注册点击事件，在浏览器加载完就已经注册完毕...

通过js脚本实现动态添加HTML标签

11-23

一个简单的JS操作可以点击增加HTML标签

参与评论您还未登录，请先登录后发表或查看评论

js 设置、获取、删除标签属性以及H5自定义属性

qq_36158551的博客

02-01

1980

（1）自定义属性的目的：是为了保存和使用数据，有些数据可以保存到页面中而不用保存到数据库中（2）自定义属性获取是通过 getAttribute(‘属性’) 方法获取（3）但是有些自定义属性很容易引起歧义，不容易判断到底是元素内部的属性还是自定义属性（4）H5中新增了标准或者兼容性较好的获取方法 getAttribute(‘属性’)（1）H5新增方法（从IE11才开始支持，兼容性较差）（2）element.dataset.属性;（3）element.dataset[ ‘属性’ ]

JavaScript获取标签的属性和DOM操作属性

m0_61843988的博客

08-08

5919

获取标签的属性，DOM操作属性

JS获取元素属性和自定义属性

热门推荐

马优晨

09-14

16万+

昨天有同事问我，怎么获取自定义元素的属性，我意识到这个确实是个问题，所有总结一下自己的心得。获取元素的属性分为两种类型：1-获取元素常见的属性（class,id,type,value……）2-获取自定义的元素的属性（data-value,data-mess…….）获取元素的属性，设置元素的属性： 1-原生JS** 设置属性 .setAttribute("属性","值")

jQuery给标签添加属性

ssssSFN的博客

05-06

5575

获取标签 var name = $("#username") 获取id为username的标签添加属性 name.attr("placeholder","请输入用户名") 使用变量.attr方法来给标签添加属性，第一个参数为属性的key，第二个参数为属性的value ...

js 点击a标签获取a的自定义属性方法

10-21

在传统的原生JavaScript中，我们可以通过访问元素的`attributes`集合来获取所有的属性，包括自定义属性。下面是获取自定义属性的一种方法： ```javascript function showDetail(obj) { var ownattr = obj....

javascript通过获取html标签属性class实现多选项卡的方法

10-23

实现多选项卡功能的关键在于利用JavaScript对页面上的元素进行操作，特别是通过获取和处理HTML标签的属性class来控制选项卡的显示与隐藏。首先，我们需要理解HTML的class属性。在HTML中，class属性是一个为元素...

JavaScript实现获取用户单击body中所有A标签内容的方法

10-19

本篇将详细介绍如何使用JavaScript来实现获取用户在body中单击所有A（超链接）标签时的内容。这个功能涉及到JavaScript对页面元素的操作以及事件响应机制。首先，我们需要获取整个HTML文档的body部分。在...

Java基于正则表达式获取指定HTML标签指定属性值的方法

08-31

在每次循环中，`m.group(1)` 获取第一个捕获组的值，即我们想要的属性值，将其添加到结果列表 `result` 中。 4. **返回结果**：循环结束后，`result` 列表包含了所有找到的属性值，返回给调用者。在 `main` ...

js---标签属性操作

weixin_64804275的博客

05-05

570

标签属性操作 1.对背景颜色的操作 <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &lt

js 创建标签追加标签

weixin_42599236的博客

01-23

1万+

适用于写评论，写博客等要创建和插入新的标签的地方四个步骤： 1、创建标签 var tag=document.createElement( ' li ' ); 2、添加标签内容 tag.innerHTML='内容' 内容可以是标签加常量加变量：例如：list.innerHTML=' <li>'+name+‘你好！</lli> ' 其中，name是获取到的名字的...

JS获取动态添加的元素

weixin_42839080的博客

10-14

1万+

在页面的渲染中,我们经常用遇到动态添加的DOM元素,那么在获取这些元素的时候或则为这些DOM元素的时候,我们有下面三种处理方法: // 1. 在模板引擎里面添加行内事件 // 2. 利用事件的委托获取(常用) // 3. 在ajax的监听响应完成函数后面获取一在模板引擎里面添加行内事件添加行内事件就是在标签里面添加事件,这样就可以直接获取到动态添加的元素. <!-- 1.准...

原生js如何通过html标签的自定义属性，找到该属性对应的属性值

宋坚强大大~~

11-30

2412

需求如下：我有一段固定的js，不同的项目都必须引入，并且js内必须传入一个项目标识。此时的做法当然是把这段js封装成一个js文件，放到cdn上，每次只需要引入这个js的地址，并且传入不同的参数为了避免环境污染，自己给script标签定义了一个属性，然后需要在这个js文件内部获取到这个自定义属性的属性值，代码如下： js内获取该属性值代码如下：...

JavaScript 获取标签属性值

Enjoy life,Enjoy coding!!

03-01

5501

获取标签属性值： 1 function() { var id = document.getElementById("testDivID").attributes["id"].value; var name = document.getElementById("testDivID").attributes["name"].value; var val

js动态修改html标签属性,通过js动态创建标签,并设置属性方法

weixin_42306002的博客

06-04

3657

当我们在写jsp页面时，往往会遇到这种情况：从后台获取的数据个数不确定，此时在前端写jsp页面时也就不确定怎么设计了。这个时候就需要通过js动态创建标签：1.创建某个标签：如下在body中创建一个div的事例；function fun(){var frameDiv = document.createElement("div");//创建一个标签var bodyFa = document.getEl...

Javascript如何获取到标签属性

最新发布

04-02

<think>好的，用户想了解如何用JavaScript获取HTML标签的属性。我需要根据提供的引用资料整理一个清晰的教程。首先，应该分步骤讲解，从基本方法开始，比如getElementById，然后提到其他选择器如querySelector。接着，区分常规属性和自定义属性，引用[2]提到常规属性可以直接用点语法，而自定义属性需要用getAttribute。同时，还要提到设置属性的方法，引用[4]中有例子，可以通过赋值修改属性，以及操作样式。可能还需要提到innerHTML和textContent，引用[3]提到类似的方法。要确保覆盖获取和设置，同时指出兼容性问题，比如getAttribute在某些情况下更可靠。最后，生成相关问题，帮助用户深入理解。需要检查是否所有引用都正确使用，例如引用[1]关于获取元素，引用[2]关于两种方法，引用[3]关于p标签，引用[4]关于设置属性和样式。确保步骤清晰，语言简洁，符合用户需求。还要注意用户可能对DOM操作不太熟悉，所以需要解释基本概念，但不要过于深入。同时，示例代码要正确，使用JavaScript语法，并注释说明。可能还要提醒用户注意DOM加载顺序，比如脚本放在元素之后或使用DOMContentLoaded事件。不过用户没有提到这方面，可能不需要展开。总之，整理结构为：获取元素、获取属性、设置属性、操作样式，每个部分给出方法和示例，最后相关问题。</think>### JavaScript获取HTML标签属性方法教程 --- #### 一、获取HTML元素 JavaScript操作属性的前提是**先获取目标元素**，常用方法如下： 1. **通过id获取** 使用$document.getElementById()$方法，返回匹配id的第一个元素[^1]： ```javascript const divElement = document.getElementById('header'); ``` 2. **通过选择器获取** 使用$document.querySelector()$获取符合CSS选择器的第一个元素[^4]： ```javascript const imgElement = document.querySelector('img.thumbnail'); ``` --- #### 二、获取标签属性根据属性类型选择不同方法： 1. **常规属性** 如$id$, $class$, $href$等，可直接通过**点语法**访问[^2]： ```javascript const link = document.getElementById('link'); console.log(link.href); // 输出https://example.com ``` 2. **自定义属性** 如$data-*$属性，需使用$getAttribute()$方法： ```javascript const blogName = link.getAttribute('data-blogname'); // 输出"前端技术" ``` 3. **HTML内容属性** 使用$innerHTML$获取包含标签的内容，或$textContent$获取纯文本[^3]： ```javascript const pElement = document.querySelector('p'); console.log(pElement.innerHTML); // 输出"<strong>加粗</strong>文本" console.log(pElement.textContent); // 输出"加粗文本" ``` --- #### 三、设置/修改属性 1. **直接赋值修改** 通过点语法修改常规属性： ```javascript imgElement.src = 'new-image.jpg'; imgElement.title = '更新后的标题'; ``` 2. **通过方法修改** 使用$setAttribute()$方法，适用于所有属性类型： ```javascript link.setAttribute('target', '_blank'); // 添加target="_blank" ``` 3. **样式修改** 通过$style$对象修改行内样式： ```javascript const box = document.getElementById('box'); box.style.backgroundColor = '#f00'; box.style.width = '200px'; ``` --- #### 四、兼容性说明 - 常规属性建议优先使用点语法（如$element.id$），性能更优 - 自定义属性必须使用$getAttribute()/setAttribute()$[^2] - 修改类名时推荐用$classList$代替直接操作$className$ ---