JS获取DOM节点的N种方式

最新推荐文章于 2023-03-29 11:03:22 发布
最新推荐文章于 2023-03-29 11:03:22 发布
阅读量1.8k 收藏 3
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwqBrell/article/details/100566731
版权

 目录

1 document.getElementById()

2 document.getElementsByClassName();

3 document.getElementsByName();

4 document.getElementsByTagName();

5 document.querySelector();

6 document.querySelectorAll(); 

 

 

1 document.getElementById()

通过id来获取DOM节点，返回的是一个HTML的节点信息

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>getElementsById</title>
	</head>
	<body>
		<div id="main">content1</div>
		<script type="text/javascript">
			var byid = document.getElementById("main")
			console.log(byid);
		</script>
	</body>
</html>

打印结果

2 document.getElementsByClassName();

通过class来获取DOM节点，返回的是一个HTMLCollection对象

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>getElementsByClassName</title>
	</head>
	<body>
		<div class="sub">
			content1
		</div>
		<div class="sub">
			content2
		</div>
		<script type="text/javascript">
			var byclass = document.getElementsByClassName('sub');
			console.log(byclass);
		</script>
	</body>
</html>

打印结果


3 document.getElementsByN

最低0.47元/天 解锁文章
Trevor Lan
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现获取dom中class的方法
12-09
本文实例讲述了JavaScript实现获取dom中class的方法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> [removed] function getClass(node,classname) { if(node.getElementsByClassName) { return node.getElementsByClassName(classname); //如果存在该标签 就返回 } else {
通过JS如何获取DOM节点元素
Fancy_vae的博客
09-13 3587
JS中获取DOM元素的方法总共有5种： 1.通过id值。 2.通过name属性值。 3.通过指定的标签名。 4.通过class类名。 5.通过css选择器（css选择器如何选择，就可以如何选择） 1、通过id选取元素（getElementById） 1）使用方法：document.getElementById(“domId”) 其中，domId为要选取元素的id属性值 2）兼容性：低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的，并且会返回匹配name属性的元素
前端—通过class获取dom元素
始于足下的博客
07-14 2316
方法一： <span class="test"></span> <script> console.log(document.querySelector(".test")) </script>
js获取dom元素的方式
最新发布
m0_70185330的博客
03-29 1496
【代码】js获取dom元素的方式。
js获取dom的class属性
weixin_41463944的博客
09-03 1593
function getStyle(obj, attr) { //获取属性 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr] },
JS实现访问DOM对象指定节点的方法示例
10-18
`getElementById()`是JavaScript中获取DOM对象的关键方法，它接收一个参数，即HTML元素的ID，然后返回与该ID匹配的第一个元素。例如，在示例中，我们通过`getElementById("b1")`找到了具有ID "b1"的`<body>`元素。 ...
浅谈JS获取元素的N种方法及其动静态讨论
12-07
实际前端开发工作中，我们经常会遇到要获取某些元素...也因此，JavaScript可以通过DOM API获取元素节点，方法有如下几种：其中querySelector()和querySelectorAll()为ES5的元素选择方法 1、getElementById()： 接收一个
dom-smart-plan:Dominion智能定价计划的节点api
05-15
dom-smart计划Api，用于获取有关当前日的信息目前这仅适用于弗吉尼亚州的自治权安装npm install dom-smart-plan 例子 var smartPlan = require ( 'dom-smart-plan' ) ;smartPlan . today ( ) . then ( console . log...
javascript获取元素文本内容的通用函数
12-10
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]将HTML DOM中几个容易常用的属性做下记录： nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。 nodeName 属性含有某个节点的名称。 元素节点的 nodeName 是...
nQuery:我自己的jQuery版本！
05-15
nQuery是一个易于使用的原始javascript DOM操作库。 选择一个元素，添加事件侦听器，甚至使用一个方便的库就可以发出ajax请求。 使用nQuery构建应用程序 使用nQuery库独有的功能进行交互式待办事项列表。 附加，...
js 获取class的元素的方法 以及创建方法getElementsByClassName
12-13
代码如下:function getElementsByClassName(n) { var classElements = [],allElements = document.getElementsByTagName(‘*’); for (var i=0; i< allElements.length; i++ ) { if (allElements[i].className == n ) { classElements[classElements.length] = allElements[i]; } } return classElements; } var redClassElements
jQuery根据ID、CLASS、等获取对象的实例
11-30
在jquery中，你能够通过逗号，来分隔字符选择多个选择。 例如： $(.class1, .class2, #id1)在以上的例子中，将会选择含有类名为class1，和class2及id为1的所有元素。 Jquery实例： 在以下的例子中，有类名为p1和类名为p2 和id 为div3 的所有元素将会动态的添加一个红色的边框。 <html> <head> <title>select mutiple elements example</title> [removed][removed] </
100个javascript (js)常用语法
06-11
JavaScript（JS）是一种广泛使用的轻量级编程语言，主要用于网页和网络应用的开发。下面将详细解释提供的100个JavaScript常用语法中的部分关键知识点： 1. `document.write("")`：这个方法常用于在HTML文档加载时...
使用phantomjs进行网页抓取的实现代码
01-21
phantomjs因为是无头浏览器可以跑js，所以同样可以跑dom节点，用来进行网页抓取是再好不过了。 比如我们要批量抓取网页 “历史上的今天” 的内容。网站 对dom结构的观察发现，我们只需要取到 .list li a的title值...
teaching-state-machines:一个 JavaScript 应用程序，提供了一种交互式教学和动画状态机的方法
06-02
要设置状态机，您需要获取一个 dom 元素、一个 JSON 文件（或原始 JSON），并使用指定的元素调用 createFSM： var cy = createFSM({ element: $('.fsm');, json: model } }); 选项 CreateFSM 还接受多个选项...
js 获取dom的class
hw1287789687的专栏
10-26 4241
js 获取节点的class 方式一:使用getAttribute var x = document.getElementsByTagName("H1")[0].getAttribute("class");     方式二: let oneSwipe=childrenSwipeOptions[i]; let className=oneSwipe.className;  参考:htt...
js通过class来获取DOM对象
weixin_30532759的博客
08-08 481
<!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>get objects by class</title> </head> <body > ...
JS:获取DOM元素的六种方法
weixin_59519449的博客
09-23 1083
以下为代码段 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <button type="button" class="btn btn1">点击1</button> <button t...
通过class和id获取DOM元素的区别
weixin_34281537的博客
09-18 209
1.通过id获取DOM元素的方法：document.getElementById("id名") 2.通过class获取DOM元素的方法：document.getElementsByClassName("class名") 从函数的名字可以知道，通过getElementsByClassName获取到的是一个数组，包括多个DOM元素，所以要执行DOM元素的方法，必须加一个索引，比如doc...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值