JavaScript 获取元素

最新推荐文章于 2024-07-20 23:54:17 发布
最新推荐文章于 2024-07-20 23:54:17 发布
阅读量106 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/windy_star0909/article/details/84367937
版权

JavaScript 获取元素的方法有几种:

  • getElementById()    返回来一个和指定ID元素节点的对象

<html> <head> <title></title> </head> <body> <h1>what to buy </h1> <ul id="test"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> alert(typeof document.getElementById("test")); </script> </html>

 

  •  getElementsByTagName() 返回来一个数组 用来指定标签名称 例如取得上个例子所有的li
 

<html> <head> <title></title> </head> <body> <h1>what to buy </h1> <ul id="test"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> var items=document.getElementsByTagName("li"); for (var i=0 ;i<items.length ;i++ ) { alert(typeof items[i]+" "+[i] ); } </script> </html> 
 

 
  

 
 

 
 

 
 

<html> <head> <title></title> </head> <body> <h1>what to buy </h1> <ul id="test"> <li>1</li> <li>2</li> <li>3</li> </ul> </body> <script> //测试下面元素的节点数 下面的例子表明 id为test下面的节点数 var test=document.getElementById("test"); var test1=test.getElementsByTagName("*"); alert(test1.length); //答案是"3" </script> </html>
 

 

  •  getElementsByClassName() 这个方法是HTML5中加入的方法.一些老的浏览器不能支持该方法.返回值为数组
 

 document.getElementsByClassName(class);
 

<html> <head> <title></title> </head> <body> <h1>what to buy </h1> <ul id="test"> <li id="test1">1</li> <li id="test2">2</li> <li id="test3">3</li> </ul> </body> <script> var testclass=document.getElementsByClassName("test"); var testclass1=testclass.length; alert(testclass1); </script> </html> 
 

 

 

                

        

        




    




    

      

        

            

              
                
                  windy_star0909
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
JavaScript获取元素样式

				
			

			

				

					Sore4的博客
				

				

					04-21
					
					4992
					
				

			

		

		

			
				
JavaScript获取元素样式

			
		

	



                

              
                



	

		

			

				
					
javascript获取元素离文档各边距离的方法

				
			

			

				

					10-24
				

			

		

		

			
				
本文将详细讲解如何使用JavaScript获取元素相对于文档的顶部、底部、左侧和右侧的距离，并通过一个自定义函数的形式进行分析。  首先，要获取元素的位置，我们需要使用`offset()`方法。`offset()`返回一个对象，其中...

			
		

	



                


  
              

                


	

		

			

				
					
JavaScript 获取元素的8种方法

				
			

			

				

					微微的猪食小窝
				

				

					11-28
					
					1941
					
				

			

		

		

			
				
文档对象模型（Document Object Model），是W3C组织推荐的处理可扩展置标语言的标准编程接口。简单理解就是 DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。我们用JavaScript对网页进行的所有操作都是通过DOM进行的。

			
		

	





	

		

			

				
					
JavaScript获取元素的方法

				
			

			

				

					qq_43551373的博客
				

				

					12-02
					
					2838
					
				

			

		

		

			
				
获取页面元素的方式
1.通过js的dom方法:可以使用内置对象 document 上的 getElementById 方法来获取页面上设 置了 id 属性的元素,获取到的是一个 html 对象,然后将它赋值给一个变量.
获取页面元素那么必须将获取元素的代码块放置在事件中
如果把 javascript 写在元素的上面,就会出错,因为页面上从上往下加载执行的,javascript 去页面上获取元素 d...

			
		

	



		

			
		



	

		

			

				
					
汇总JavaScript 获取元素的方式和CSS选择器

				
			

			

				

					cinin的博客
				

				

					09-29
					
					1106
					
				

			

		

		

			
				
JavaScript 初学笔记

			
		

	





	

		

			

				
					
JavaScript获取元素的样式

				
			

			

				

					ffenguui的博客
				

				

					04-20
					
					1276
					
				

			

		

		

			
				
通过.style.属性获取/修改样式

元素.style.样式名=样式值 读取方式： 元素.style.样式名

通过.style.属性设置和读取的都是内联样式

案例：



html

CSS





JS获取元素内联样式属性





2.获取元素的当前显示样式

语法:元素.currentStyle.属性名或元素.currentStyle[属性名],currentStyle 可以用来读取当前元素正在显示的样式,如果当前元素没有设置改样式,则获取它的默认值,例如：如果没有设置width,获取...

			
		

	





	

		

			

				
					
javascript获取元素的位置坐标和尺寸

				
			

			

				

					C语言专栏
				

				

					09-22
					
					1218
					
				

			

		

		

			
				
示例代码：


function getLeft(e){
  var offset=e.offsetLeft;
  if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
  return offset;
}

function getTop(e){
  var offset=e.offsetTop;
  if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
  return offs..

			
		

	





	

		

			

				
					
JavaScript获取元素下标的几种方法

				
			

			

				

					Yujis的博客
				

				

					05-26
					
					4641
					
				

			

		

		

			
				
方法一：给每个按钮 自定义data-index属性
for(var i = 0; i < btns.length; i++){
     btns[i].setAttribute('data-index',i)
     btns[i].onclick = function(){
        console.log(this.dataset['index'])
     }
 }

方法二：存下标
for(var i = 0; i < btns.length; i++){
    btns[

			
		

	





	

		

			

				
					
详细解析 JavaScript 获取元素的坐标

				
			

			

				

					孤云博客
				

				

					03-15
					
					9504
					
				

			

		

		

			
				
随时随地阅读更多技术实战干货，获取项目源码、学习资料，请关注源代码社区公众号(ydmsq666)、博主微信（guyun297890152）、QQ技术交流群(183198395)。



from：https://www.cnblogs.com/dong-xu/p/7150715.html?utm_source=tuicool&utm_medium=referral

详细解析 JavaSc...

			
		

	





	

		

			

				
					
javascript获取元素的类名

				
			

			

				

					yth_m_123的博客
				

				

					05-20
					
					3078
					
				

			

		

		

			
				
var cla = document.querySelector('i');
            var result = cla.getAttribute('class');
            console.log(cla);
            console.log(result);

浏览器端控制台显示：

关键方法：document.querySelector()
getAttribute()
参考文章：https://blog.csdn.net/woshi...

			
		

	





	

		

			

				
					
Javascript 获取标签元素

				
			

			

				

					weixin_57385603的博客
				

				

					02-27
					
					1064
					
				

			

		

		

			
				
Javascript 获取标签元素

			
		

	





	

		

			

				
					
JavaScript 获取元素在父节点中的下标(推荐)

				
			

			

				

					10-19
				

			

		

		

			
				
总之，JavaScript获取元素在父节点中的下标是通过结合`querySelectorAll`和数组的`indexOf`方法来实现的。理解这个过程不仅可以帮助你解决特定问题，还能增强你对JavaScript DOM操作的掌握，使你在编写高性能的前端...

			
		

	





	

		

			

				
					
原生javascript获取元素样式

				
			

			

				

					10-24
				

			

		

		

			
				
主要介绍了原生javascript获取元素样式的方法,需要的朋友可以参考下

			
		

	





	

		

			

				
					
javascript获取元素CSS样式代码示例

				
			

			

				

					10-26
				

			

		

		

			
				
本文将详细介绍如何使用JavaScript获取元素的CSS样式信息，包括行内样式、内嵌样式、链接式样式和导入式样式。  首先，了解四种控制页面样式的常见方式： 1. 行内样式（内联样式）：直接在HTML标签中使用`style`属性...

			
		

	





	

		

			

				
					
浅谈javascript获取元素transform参数

				
			

			

				

					10-23
				

			

		

		

			
				
当我们试图通过JavaScript获取`transform`中的某个特定值，如`translateX`或`translateY`，通常会遇到一些挑战，因为浏览器将所有转换合并成一个单一的矩阵表示。  在示例中，作者遇到了两种情况：一种是通过CSS定义...

			
		

	





	

		

			

				
					
Next.js静态导出与动态路由优化

					
最新发布

				
			

			

				

					天涯学馆
				

				

					07-20
					
					792
					
				

			

		

		

			
				
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。

			
		

	





	

		

			

				
					
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！

				
			

			

				

					OpenTiny的博客
				

				

					07-17
					
					1108
					
				

			

		

		

			
				
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。

			
		

	





	

		

			

				
					
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if

				
			

			

				

					epitomizelu的专栏
				

				

					07-20
					
					578
					
				

			

		

		

			
				
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。

			
		

	





	

		

			

				
					
vue执行npm install问题idealTree:yudao-ui-admin-vben: sill idealTree buildDeps

				
			

			

				

					yuan5025的博客
				

				

					07-17
					
					1083
					
				

			

		

		

			
				
目前这个问题只在芋道源码yudao-ui-admin-vben碰到了，其他vue项目没用遇到过。

			
		

	





	

		

			

				
					
javascript  获取元素值得代码

				
			

			

				

					03-31
				

			

		

		

			
				
获取元素的值可以使用以下代码：  1. 通过 ID 获取元素的值  ```javascript var element = document.getElementById("elementId"); var value = element.value; ```  2. 通过标签名获取元素的值  ```javascript var ...

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值