Javascript - 获取节点的属性和Class【示例】

最新推荐文章于 2022-07-14 20:18:37 发布
最新推荐文章于 2022-07-14 20:18:37 发布
阅读量3.7k 收藏
点赞数 8
文章标签： javascript知识清单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42292831/article/details/94873153
版权 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script>
        window.onload = function(){
			//获取属性+修改属性
			var v1 = document.getElementsByTagName("input")[0];
			var v2 = document.getElementsByTagName("input")[1];
				//一般使用第二种（getAttribute和setAttribute）
				console.log(v1.value);
				console.log(v2.getAttribute("value"));
				v1.value = "123";
				v2.setAttribute("value","");
			
			//获取节点的class列表
			console.log(v1.className);
			console.log(v1.classList);
			for(var i=0;i<v1.classList.length;i++){
				console.log(v1.classList[i]+"***");
			}
			
		}
    </script>
</head>

<body>
    <div>
        <p>用户名：
        <input class="a b c" type="text" value="请输入用户名">
        </p>
        <p>密码 ：  
          <input type="passwprd" value="请输入密码">
        </p>
    </div>
</body>
</html>

测试结果：
在这里插入图片描述

Kylee Kello
关注
js获取节点
weixin_44426449的博客
08-10 422
获取元素节点： document.getElementsByTagName();//一组节点对象 返回一个类数组对象； 即使只找到一个，也会封装到数组； document.getElementsByName();//获取一组。常用于表单元素 innerHTML:读取元素内容，对于自结束标签没有意义； 元素的class属性不能通过.读取 通过元素.className读取class属性; 获取元素节点的子节点 通过具体元素节点调用； childNodes在都DOM标准中包括空白节点。但是在IE8及以.
JavaScript获取节点
quangelixi的博客
10-07 2601
1、通过ID获取，是id唯一： document.getElementById("main "); 2、通过class名获取 的是类数组，拿到的是一个类数组，这个数组包含所有class是left的元素。类数组是从上往下拿元素 document.getElementsByClassName("left"); let l =document.getElementsByClassName("left"); console.log(l[0]);//获取类数组中第一个元素 3、通过标签名获取 的是.
js获取class的所有元素
10-27
ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素。
js封装获取节点class类名方法
xun__xing的博客
05-19 2524
getElementsByClassName一、方法封装 一、方法封装 Element.prototype.getElementsByClassName = Document.prototype.getElementsByClassName = function(name){ var allDomArray = document.getElementsByTagName('*'); //获取所有标签名 var lastDomArray = []; //声明数组保存符合条件的类
JS-获取节点的方法
m0_63973769的博客
07-14 1332
lastElementChild最后一个子元素lastChild最后一个子节点。document.getElementById(查找速度最快)通过标签id获取。document.getElementsByName通过标签的name属性获取。parentElement获取父元素parentNode获取父节点。children获取子元素们childNodes获取子节点们。直接使用标签的id作为节点对象引用(不建议!获取这个元素是兄弟中的第几个。...
javascript中获取class
weixin_30902251的博客
03-28 390
js中没有获取class的办法，找了一些封装好的方法，这里整理一下 （1）先进行封装 //封装getClass function getClass(tagName,className) //获得标签名为tagName,类名className的元素 { if(document.getElementsByCla...
示例4：操作节点属性.rar_javascript操作节点属性
09-20
1. **获取属性值**：使用`getAttribute()`方法可以获取节点的属性值。例如，`var attrValue = document.getElementById('myElement').getAttribute('myAttr');` 2. **设置属性值**：使用`setAttribute()`方法可以...
JS-示例：Javascript和jQuery示例
02-20
JavaScript 和 jQuery 是两种广泛应用于网页开发的脚本语言，它们在构建交互式用户界面和处理网页动态内容方面发挥着至关重要的作用。JavaScript 是一种轻量级的解释型编程语言，而 jQuery 是一个基于 JavaScript 的...
JavaScript实现获取dom中class的方法
10-24
以上就是通过JavaScript获取DOM中class元素的方法和相关知识点的介绍。这涉及到对DOM操作的理解和对特定方法的应用，对于前端开发者来说是一项基础且重要的技能。掌握了这些知识点，开发者可以更加灵活地处理页面...
jquery获取子节点和父节点的示例代码
10-26
在JavaScript的世界里，jQuery库提供了一系列简便的方法来操作DOM元素，包括获取子节点和父节点。这篇文章将聚焦于jQuery中如何获取子节点和父节点，这对于网页开发中的元素交互至关重要。 一、获取子节点 在...
认识DOM、class的封装、获取属性、获取节点
LY__lyxka的博客
05-26 782
认识DOM 文档对象模型（document object model），由W3C提出的标准，是一个使用脚本动态的访问和更新文档的内容、结构以及样式； DOM提供了响应的API（接口） ，可以对文档进行增删改查，以实现js对网页元素JS对网页元素的静态（进行）控制，实现动态网页的功能 HTML节点树 DOM的原理是将文档装入内容，并以节点的形式解析为一颗节点树 HTML 文档就是一种树状的结构化文档 节点类型 元素节点：指标签 如：p div h1~h6 a b 属性节点：指标签上的属性 如：
DOM:查找标签，节点操作，获取值操作，class的操作，查看class标签，事件，this...
felix的博客
02-15 1967
目录DOMHTML DOM树查找标签直接查找document.方法document.getElementById()document.getElementsByClassName()document.getElementsByTagName()间接查找节点操作innerTextinnerHTML创建节点>>>createElement(标签名)节点设置属性>>&gt...
html 获取class节点,jquery获取class元素
weixin_31510897的博客
06-08 3764
jQuery获取div下的所有class元素？欢迎来到CSS布局HTML。 可以试下map函数 希望对你有帮助。jquery 是如何通过 class 来获取元素的？jquery通过任何选择器取得的对象都是jquery对象而不是JavaScript的dom对象不能用js的方法进行操作 而需要使用jquery对象支持的方法 如果是通过class的话取得的是jquery对象数组 ps 如果想把jquer...
Vue.js——获取Dom对象的类选择器名(className)
五柳
03-06 4万+
方法一：通过监听器监听方法event参数获取dom对象 代码： &amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;
JS节点获取、Class增删改查、属性操作、Dom操作
Hjboke的博客
09-06 1891
//得到全部子节点childNodes document.getElementById(‘head’).childNodes //NodeList(5) [text, div.head_wrapper, text, div.headBlock, text] //得到父节点 document.querySelector(‘.head_wrapper’).parentNode //下一个...
js怎样获取元素有哪些类 class 原生js获取元素的类名
09-18 2万+
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compat...
JavaScript获取节点的方法大全
qq_42889406的博客
10-26 1万+
1. 通过document节点获取 1.1 通过ID 语法：document.getElementById（“id”）； 特点： 应用场景： 推荐指数： 示例： 1.2 通过标签名 语法：document.getElementById（“id”）； 特点： 应用场景： 示例： 1.3 通过name值 语法：document.getElementById（“id”）； 特点： 应用场景： 示例： 1.4 通过class 语法：document.getElementById（“id”）； 特点： 应用场景： 示
js通过class获取标签里面的内容、修改class属性
热门推荐
JEFF_xieyuzhi的博客
03-22 4万+
js通过class获取标签里面的内容——看源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p class="demo"...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值