原生j获取元素的几种方法
<!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获取元素的几种方法的更多相关文章
- js中用tagname和id获取元素的3种方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery取得iframe中元素的几种方法Javascript Jquery获取Iframe的元素、内容或者ID
query取得iframe中元素的几种方法 在iframe子页面获取父页面元素代码如下: $('#objId', parent.document);// 搞定... 在父页面 获取iframe子页面的 ...
- JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
- javascript 获取html元素的三种方法
操作HTML元素 你首先找到该元素. 三种方法来做这件事: 通过id找到HTML元素 通过标签名找到HTML元素 通过类名找到HTML元素 通过id查找HTML元素 在DOM中查找HTML元素的最简单 ...
- 解析Jquery取得iframe中元素的几种方法
iframe在复合文档中经常用到,利用jquery操作iframe可以大幅提高效率,这里收集一些基本操作,需要的朋友可以参考下 DOM方法:父窗口操作IFRAME:window.frames[&q ...
- PHP中获取星期的几种方法
PHP中获取星期的几种方法 PHP星期几获取代码: 1 date(l); 2 //data就可以获取英文的星期比如Sunday 3 date(w); 4 //这个可以获取数字星期比如123,注意0 ...
- JS动态创建元素(两种方法)
前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
- 原生js获取元素的样式信息
工作中经常会需要获取DOM元素的样式,之前都是通过jquery的css()方法,现在总结一下通过原生js获取元素样式的方法. obj.style js var _width = obj.style.w ...
- 用css隐藏元素的5种方法
.green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...
随机推荐
- 腾讯微博 JS-SDK接入
官方文档: open.js api查询 api调试接口 1.接口初始化 加载openjs源代码. <script type="text/javascript" src=&qu ...
- ChartCtrl源码剖析之——CChartLegend类
CChartLegend类用来绘制每一个波形的描述信息,它处于该控件的区域,如下图所示: CChartLegend类的头文件. #if !defined(AFX_CHARTLEGEND_H__CD72 ...
- Ruby Time类和Date类
Time类 更新: 2017/06/23 更新了Data/Time在model模式下的便利方法 更新: 2018/10/12 修改了%Y相关描述防止误解 年月日时分秒,时区 生成 获取当前时 ...
- codeforces 28D(dp)
D. Don't fear, DravDe is kind time limit per test 2 seconds memory limit per test 256 megabytes inpu ...
- SpringBoot入门-15(springboot配置freemarker使用YML)
https://blog.csdn.net/fengsi2009/article/details/78879924 application.yml spring: http: encoding: fo ...
- Kubernetes集群认证
1.集群搭建:https://www.kubernetes.org.cn/3808.html 2.集群验证:https://www.kubernetes.org.cn/1861.html
- 安装11g 数据库
出现问题解决: 1.首先确认下载的安装包完整性.2解压包的时候,按顺序解压,解压第一个包后,解压第二个包的时候,要把解压地址与解压第二包的地址要一样. 安装的时候,需要把两个压缩包都解压,并将目录wi ...
- vue watch监听对象及对应值的变化
data:{ a:1, b:{ value:1, type:1, } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: " ...
- 442 Find All Duplicates in an Array 数组中重复的数据
给定一个整数数组 a,其中1 ≤ a[i] ≤ n (n为数组长度), 其中有些元素出现两次而其他元素出现一次.找到所有出现两次的元素.你可以不用到任何额外空间并在O(n)时间复杂度内解决这个问题吗? ...
- vue采坑及较好的文章汇总
1:父子组件传动态传值 https://www.cnblogs.com/daiwenru/p/6694530.html -----互传数据基本流程 https://blog.csdn.net/qq_ ...