js操作标签最详解(三种方式)

最新推荐文章于 2024-06-20 14:26:49 发布
最新推荐文章于 2024-06-20 14:26:49 发布
阅读量3.3k 收藏 2
点赞数 4
分类专栏： JSDOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37805832/article/details/109441491
版权

1.操作标签属性:

形式:
对象.属性名=“属性值”:
源代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>标签的属性</title>
</head>
<body>
	<img src="images/1.jpg" alt="我是alt222" title="我是title" nj="666">
	<script type="text/javascript">
		//获取
		let oImg=document.querySelector("img");
		console.log(oImg.alt);
		console.log(oImg.getAttribute("nj"));
		// 2.修改
		/*let oImg1=document.querySelector("img");
		oImg1.title="新的title";
		oImg1.setAttribute("nj","123");	*/
		// 3.增加
		/*let oImg2=document.querySelector("img");
		oImg2.setAttribute("it666","itzb");*/
		// 4.删除
		/*let oImg3=document.querySelector("img");
		oImg3.alt="";
		oImg3.removeAttribute("nj");*/
		

	</script>
</body>
</html>

最后总结：

对象.属性是对系统自带的属性进行操作.
Attribute是对自己写的属性进行操作。（自定义）

效果图;

获取:

在这里插入图片描述

修改:

在这里插入图片描述

增加

在这里插入图片描述

删除

在这里插入图片描述

2.操作标签内容

形式;
对象.属性名=“属性值”；
源代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
<div>
    我是div
    <h1>我是标题</h1>
    <p>我是段落</p>
</div>
	<script type="text/javascript">
		//获取标签的容.
		let oDiv=document.querySelector("div");
		console.log(oDiv.innerHTML);
		console.log(oDiv.innerText);
		console.log(oDiv.textContent);
		//修改标签内容
		let oDiv1=document.querySelector("div");
		oDiv1.innerHTML = "<span>我是span</span>";
	    oDiv1.innerText = "<span>我是span1</span>";
    	oDiv1.textContent = "<span>我是span2</span>";
	</script>
</body>
</html>

1.1获取.

let oDiv=document.querySelector("div");
		console.log(oDiv.innerHTML);
		console.log(oDiv.innerText);
		console.log(oDiv.textContent);

效果：
在这里插入图片描述

1.2设置

let oDiv1=document.querySelector("div");
		oDiv1.innerHTML = "<span>我是span</span>";
	    oDiv1.innerText = "<span>我是span1</span>";
    	oDiv1.textContent = "<span>我是span2</span>";

效果：
在这里插入图片描述

总结：

1:innerHTML/innerText/textContent都是设置给HTML标签上的.
2:因为这三个都是作用在HTML标签上的,所以会产生后面的会覆盖掉前面的.

3:操作元素样式

形式;
对象.style.属性名=“属性值”:

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div></div>
	<script type="text/javascript">
			//设置
		    let oDiv = document.querySelector("div");
		    oDiv.style.width="300px";
		    oDiv.style.height="300px";
		    oDiv.style.backgroundColor="blue";

		    //获取
		   let oDiv1 = document.querySelector("div");
		   oDiv.style.width = "300px";
		   console.log(oDiv.style.width);
	</script>
</body>
</html>

//设置：

let oDiv = document.querySelector("div");
		    oDiv.style.width="300px";
		    oDiv.style.height="300px";
		    oDiv.style.backgroundColor="blue";

效果：
在这里插入图片描述

获取

let oDiv1 = document.querySelector("div");
		   oDiv.style.width = "300px";
		   console.log(oDiv.style.width);

效果：
在这里插入图片描述

总结;

1;js中操作css只能通过行内来做.

贵哥的编程之路(热爱分享)
关注
专栏目录
JS标准标签
weixin_65423584的博客
04-13 905
【注意】 在页面上面最好不要出现<%%>，而是用jsp标签代替 常用jsp标签(自带): 1.<jsp:include page="页面"> 包含 2.<jsp:param name="name" value="va"> 传参 3.<jsp:foward page="页面"> 转发 !-- 指令包含(静态包含)： 所有被包含页面只有在单独运行的时候才会被单独编译--> <%@include file="header.jsp"...
详解JavaScript操作HTML DOM的基本方式
10-23
JavaScript操作HTML DOM是一种核心技能，它允许开发者动态地更新、添加和删除网页内容。HTML DOM，全称为“文档对象模型”，是一种W3C标准，它为HTML和XHTML文档提供了一个结构化的表示，并且允许使用JavaScript或...
JavaScript 标签的操作
不定时分享最优质的网络技术与教程，满满的干货。
12-31 202
可以使用上的上面的代码，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载。第一种方法：将javascript放到页面最下边第二种方法：设置页面加载完成执行的函数，在执行函数里面获取标签元素。onload是页面所有元素加载完成的事件，给onload设置函数时，当事件触发就会执行设置的函数。
JS操作标签
一枚程序员的博客
05-07 357
js操作标签的样式，属性，以及内容  $('#grid1 tr:eq(1)').click();   $('#grid1 tr:eq(1)').addClass("k-state-selected");//.css('color', 'red')  $('#grid1 tr:eq(1)').attr("aria-selected", true); 上面的操作默认将第一行选中，并加上背景
1.js标签解析
a1152024140的专栏
09-09 656
当我们再html页面中直接插入jsxxx
js——操作标签2
love_xxxooo的博客
02-24 190
&lt;!DOCTYPE html&gt;&lt;html&gt;    &lt;head&gt;        &lt;link href="css/new_file.css" rel="stylesheet" type="text/css"/&gt;        &lt;meta charset="utf-8" /&gt;        &am
详解JS异步加载的三种方式
01-19
我们平时使用的最多的一种方式。 [removed][removed] [removed][removed] 同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的...
Javasipt:操作radio标签详解
12-10
下面我们将详细讲解如何使用JavaScript来操作这些`radio`标签。 首先，我们来看HTML部分。在提供的代码中，有两个`radio`按钮，它们都属于同一个名称`opinionCategory`的组。这意味着用户只能选择其中一个，因为`...
js---标签属性操作
weixin_64804275的博客
05-05 540
标签属性操作 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操作标签
qq_40873594的博客
01-08 70
方式1 <input id="dd"> <script> document.getElemenById("dd"); </script> <a href="......" value="123" onclick="getA(this)"></a> <script> getA = function(el){ el.getAttribute("value") } </script>
js中使用标签
01-11
js中使用+C标签，喜欢js的同学可以看看，蛮好的，相信会有帮助的
jsp标签大全
05-24
　　　· 什么是自定义tag标签？ 　　　· 怎么使用tag标签？ 　　　o 声明要使用的tag库 　　　o 找到与之对应的tag处理类 　　　o tag标签的类型 　　　· 自定义tag标签 　　　o tag处理类 　　　o tag库描述 　　　o tag标签示例 　　　o 带属性的tag 　　　o 带body的tag 　　　o 定义了脚本变量的tag 　　　o 具有协作关系的tag 　　　· 自定义tag标签 　　　o 一个迭代tag的例子 　　　o 一个模板tag库 　　　o tag处理类到底是怎样被调用的？ 　　　
js初识、JavaScript组成 引用、window.onload、常用的鼠标事件、变量与调试命令、操作标签01
weixin_52597660的博客
12-14 447
day01 js初识 课程安排： 第一阶段：20天 html+css 静态布局 第二阶段：25天 网页交互 ​ 15天：原生js ​ 5天基础语法： 变量 if else for循环 函数 ​ 5天webapi：方法 ​ 5天高级 ​ 4天项目：优学 ​ 1天touchjs：移动端手势 ​ 4天：jquery ​ 1天:答辩 第三阶段：es6+nodejs 15天
js之标签操作
weixin_30858241的博客
09-29 116
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a id='i1' href="http://www.b...
js 如何解析带有html标签的内容
最新发布
m0_72642319的博客
06-20 1257
在JavaScript中解析带有HTML标签的内容，通常是为了提取信息或转换HTML结构为可操作的对象。
javascript操作标签的常规属性
ForestCat的专栏
04-02 1926
html标签和js之间存在映射的关系，html标签在js中以Dom节点对象存在。 js获取html标签中属性的方式有两种：  1. 通过dom对象的getAttribute方法   2. 通过dom节点属性.  但在ie和ff下用node.getAttribute("属性名")得到的结果不太一样，相比下，通过node.属性名得到的结果更一致一些。  请在ie和ff中测试下面的代码:
使用js内置对象document对html的标签做一些动态的操作
KEELON的博客
05-15 1244
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js内置对象</title> <script> // 第一大作用 // 1.1所有的全局变量都是windows的属性 // 1.2全局的函数都是Windows的函数 var age
JavaScript基础17-JS操作页面_操作标签内容
安小静--
10-22 134
1.innerHTML 属性 获取元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性对于获取或替换 HTML 元素的内容很有用。 2. 读取节点文本 var odv1 = document.getElementById('box'); var content1 = odv1.innerHTML; alert(content1) 3. 写入节点文本 var odv1 =...
jsp标签内部解析及自定义——1
大屌的博客
06-01 349
文章目录标签引用属性解析标签助手类 大家好，今天要与大家分享的是jsp标签，说到jso标签，大家可能问这是什么， jsp标签：（JSTL）是一个JSP标签集合，它封装了JSP应用的通用核心功能。 根据jsp提供的功能，可以分为5个类别： 1，核心标签 2，格式化标签 3，JSTL 函数 4，SQL 标签 5，XML 标签 今天要和大家分享的是第一个：核心标签的部分。 标签引用 核心标签是大家用...
JavaScript深入操作HTML标签与控件详解
本文详细探讨了JavaScript在网页开发中如何操作HTML的各种标签和控件。JavaScript作为前端脚本语言，其强大的功能使开发者能够动态地控制网页内容、布局以及与用户的交互。本文将深入讲解以下几个关键知识点： 1. ...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

贵哥的编程之路(热爱分享)

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

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

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

打赏作者

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

抵扣说明：

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

余额充值