<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

</head>

<body>

　　<div id='div'></div>

　　<div class='div'></div>

　　<div class='div'></div>

　　<div class='div'></div>

　　<input type="text" name="hobby">

　　<input type="text" name="hobby">

</body>

</html>

1.通过id获取元素的方法 : document.getElementById('div') 

　　params： 参数只能是合法的 id 名称

　　此方法获取的元素返回的是一个元素本身对象   

　　

2.通过class名获取元素的方法：document.getElementsByClassName('div')

　　params： 参数只能是合法的 class 类 名称

　　此方法获取的元素返回的是一个数组，数组元素是选中的元素本身

　　

3.通过标签名获取元素的方法：document.getElementsByTagName('div')

　　params： 参数只能是合法的 标签 名称

　　此方法获取的元素返回的是一个数组，数组元素是选中的元素本身

　　

4.通过 name 名称获取元素的方法：document.getElementsByName('hobby')

　　params： 参数只能是合法的 name 名称

　　此方法获取的元素返回的是一个数组，数组元素是选中的元素本身

　　

5.原生的强大DOM选择器querySelector   ：  document.querySelector(params)

　　params： 参数可以是合法的选择器： 标签,id,class,嵌套（div>p、.div .p……）

　　　　选择id： document.querySelector('#div')  　　　类似 　　document.getElementsByClassName('div')

　　　　选择类：document.querySelector('.div') 　　　类似   　　document.getElementsByClassName('div')[0] (数组的第一个元素)

　　　　选择标签:： document.querySelector('div')  　　类似   　　document.getElementsByTagName('div')[0] (数组的第一个元素)

　　　　嵌套选择： document.querySelector('body div')

　　此方法获取的元素返回的是元素本身, 只返回第一个元素；

6.原生的强大DOM选择器querySelectorAll   ：  document.querySelectorAll(params)

　　params： 参数可以是合法的选择器： 标签,id,class,嵌套（div>p、.div .p……）

　　　　选择id： document.querySelectorAll('#div')[0] (数组的第一个元素)  类似  document.getElementsByClassName('div')

　　　　选择类：document.querySelectorAll('.div')    类似   document.getElementsByClassName('div')  返回的都是数组

　　　　选择标签:： document.querySelectorAll('div')  类似   document.getElementsByTagName('div')

　　　　嵌套选择： document.querySelectorAll('body div')

　　此方法获取的元素返回的是是一个数组，数组元素是选中的元素本身；

7. 使用 querySelectorAll 封装类似jquery的 $ 获取元素的方法　

function $ (tag) {
  var el = document.querySelectorAll(tag)
  if (el.length === 1) return el[0]
  return el
}

console.log($('div'))

console.log($('#div'))


												


											
原生j获取元素的几种方法的更多相关文章
	

    
								
  1. js中用tagname和id获取元素的3种方法
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    2. 
						
  2. Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID
		
    query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...
    
		
    3. 
						
  3. JS基础入门篇（ 三 ）—使用JS获取页面中某个元素的4种方法以及之间的差别（ 一 ）
		
    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
    
		
    4. 
						
  4. javascript 获取html元素的三种方法
		
    操作HTML元素 你首先找到该元素. 三种方法来做这件事: 通过id找到HTML元素 通过标签名找到HTML元素 通过类名找到HTML元素 通过id查找HTML元素 在DOM中查找HTML元素的最简单 ...
    
		
    5. 
						
  5. 解析Jquery取得iframe中元素的几种方法
		
    iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下   DOM方法:父窗口操作IFRAME:window.frames[&q ...
    
		
    6. 
						
  6. PHP中获取星期的几种方法
		
    PHP中获取星期的几种方法   PHP星期几获取代码: 1 date(l); 2 //data就可以获取英文的星期比如Sunday 3 date(w); 4 //这个可以获取数字星期比如123,注意0 ...
    
		
    7. 
						
  7. JS动态创建元素（两种方法）
		
    前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
    
		
    8. 
						
  8. 原生js获取元素的样式信息
		
    工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
    
		
    9. 
						
  9. 用css隐藏元素的5种方法
		
    .green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Are you sure you want to continue connecting etc ssh ssh_config StrictHostKeyChecking no
			
    Are you sure you want to continue connecting (yes/no) 每次ssh 进入一台新机器都会跳出如下的提示: The authenticity of ho ...
    
			
    2. 
						
  2. Pessimistic Offline Lock悲观离线锁
			
    每次只允许一个业务事务来访问数据,以防止并发业务事务中的冲突. 离线并发处理通常会出现多个业务事务操作同一数据. 最简单的办法是为整个业务事务保持一个系统事务.但是事务系统不适合于处理长事务. 首选乐 ...
    
			
    3. 
						
  3. U3D中碰撞体和刚体的关系
			
    1.刚体是用来接受力作用的组件: 2.碰撞体是碰撞系统用来检测碰撞的组件: 碰撞产生碰撞信息,游戏物体根据碰撞信息生成一个力作用在刚体上,刚体受力后就会产生一个速率,最终在游戏物体的运动体现出来. 也 ...
    
			
    4. 
						
  4. codeforces912E(折半搜索+双指针+二分答案)
			
    E. Prime Gift E. Prime Gift time limit per test 3.5 seconds memory limit per test 256 megabytes inpu ...
    
			
    5. 
						
  5. [App Store Connect帮助]七、在 App Store 上发行（2.4）设定价格与销售范围：安排价格调整
			
    如果您拥有<付费应用程序协议>,则可以为您的 App 安排随时间推移的价格调整.您可以安排具有明确开始日期和结束日期的定价调整,以及没有结束日期的永久性定价调整.例如,您可以设置一个为期  ...
    
			
    6. 
						
  6. LuoguP1948 电话线 【二分答案/图论】
			
    其实是和奥格瑞玛一样的题啦. 但还是想了很久后看了题解. 多年以后,笨笨长大了,成为了电话线布置师.由于地震使得某市的电话线全部损坏,笨笨是负责接到震中市的负责人.该市周围分布着N(1<=N&l ...
    
			
    7. 
						
  7. bzoj2581 [USACO 2012 Jan Gold] Cow Run【And-Or Tree】
			
    传送门1:http://www.usaco.org/index.php?page=viewproblem2&cpid=110 传送门2:http://www.lydsy.com/JudgeOn ...
    
			
    8. 
						
  8. Matlab实现图像分割                                                    分类：            图像处理             2014-06-14 21:31    662人阅读    评论(1)    收藏
			
    下面使用极小值点阈值选取方法,编写MATLAB程序实现图像分割的功能. 极小值点阈值选取法即从原图像的直方图的包络线中选取出极小值点, 并以极小值点为阈值将图像转为二值图像 clear all; cl ...
    
			
    9. 
						
  9. strings命令的实现                                        2014-06-02 00:17    355人阅读    评论(0)    收藏
			
    本程序实现从文件中提取连续4个以上的可打印字符.模仿linux中string命令 #include <stdio.h> #include<stdlib.h> #include  ...
    
			
    10. 
						
  10. Oracle代码 规则  创建表 表空间 用户等
			
    -----创建表空间----------create tablespace bdccslogging datafile 'D:\oracle\product\10.2.0\oradata\bdccs\ ...
    
			
    11.