javascript 原生得到document.Element的方法
今天这里写这个博客的主要目的是记录一下javascript原生的选择dom的集中方法。
1.document.getElementById。这个方法接收1个参数,就是DOM元素的id(区分大小写),这也是平时用的最多的方法,并且用这种方法DOM查找的效率是最高的,所以如果能用id查找的dom元素尽量用id来查询,返回的类型是DOM ELEMENT。
2.document.getElementsByTagName。这个方法接收1个参数,需要查询的元素标签(不区分大小写)。返回的是一个 HTMLCollection集合。由于HTMLCollection中存在方法item()和namedItem()这两个方法,所以需要取到特定的元素就有2种方法,例:var tags = document.getElementsByTagName("div");
- 1 通过item取值。传入的是一个数值型的参数,代表在集合中的位置。var div1 = tags.item(0)。取得tags中的第一个元素。当然也可以用tags[0]来表示。
- 2 通过namedItem来取值。传入的1个参数,可以是需要查找元素的id或者是name。var div1 = tags.namedItem("name")。取到id或者name为“name”的元素。也可以用tags["name"]来表示,结果相同。
3.document.getElementsByName。该方法接收1个参数,查找元素的name特性,不是id(区分大小写)。返回的是一个NodeList类型的集合。其中带有方法item。使用的方法和方法2类似,但是由于没有namedItem方法,所以不能通过namedItem和["name"]来获取到相关元素。
4.document.getElementsByClassName。该方法接收1个参数,需要查找元素的class名。可以包含一个或多个类型的字符串,返回的类型也是HTMLCollection集合。比如需要查找带有red、blue类的元素,可以用document.getElementsByClassName("red blue")。类名的先后顺序无所谓。然后用与方法2相同的方式选择某个元素。
5.querySelector。该方法接收1个参数,一个css选择符。如果没有找到匹配的元素返回的就是null,如果找到匹配的元素就返回第一个匹配的元素。比如var body = document.querySelector("body")。如果传入的css选择符出错,则会抛出错误。
6.querySelectorAll。接收的参数也是一个css选择符。返回的类型是一个NodeList集合。底层实现则类似于一组元素的快照,并非不断对文档进行搜索的动态查询。如果传入的css选择符出错,则会抛出错误。
javascript 原生得到document.Element的方法的更多相关文章
- document,element,node方法
document方法: getElementById(id) 返回指定结点的引用 getElementsByTagName_r(name) ...
- JavaScript 原生代码找对象的方法
1. id : document.getElementById('id') 2. 标签 : document.getElementsByTagName('标签') //获得的是一个标签数组 3. N ...
- javascript 原生常用api 数组方法大全
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- javascript原生bind方法ie低版本兼容详解
上一篇文章讲到了javascript原生的bind方法: http://www.cnblogs.com/liulangmao/p/3451669.html 这篇文章就在理解了原生bind方法的原理以后 ...
- JavaScript document属性和方法
JavaScript document属性和方法 --------------------------------------------属性: 1. Attributes 存储节点的属性列表 ...
- javascript原生bind方法详解
bind()方法,是javascript原生的函数类的一个原型方法(即Function.prototype里的方法),不支持ie低版本. 基本格式: function.bind(obj1,obj2,o ...
- JavaScript 原生提供两个 Base64 相关的方法
JavaScript 原生提供两个 Base64 相关的方法. btoa():任意值转为 Base64 编码 atob():Base64 编码转为原来的值 var string = 'Hello Wo ...
- 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll
querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 D ...
- jQuery? 回归JavaScript原生API
如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...
随机推荐
- Spring MVC 拦截器配置 -- 利用session
spring-servlet.xml <?xml version="1.0" encoding="UTF-8"?><beans xmlns=& ...
- POJ 2431 优先队列
汽车每过一单位消耗一单位油,其中有给定加油站可加油,问到达终点加油的最小次数. 做法很多的题,其中优先对列解这题是很经典的想法,枚举每个加油站,判断下当前油量是否小于0,小于0就在前面挑最大几个直至油 ...
- Python学习笔记 (十二)偏函数
摘抄:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014318447438 ...
- 朋友封装的一个ASP.NET上传文件的方法
朋友做了asp.net开发多年,做了这个,自我感觉封装得还不错!!! 代码如下: #region 上传文件的方法 /// <summary> /// 上传文件方法 /// </sum ...
- nth-child,nth-last-child,only-child,nth-of-type,nth-last-of-type,only-of-type,first-of-type,last-of-type,first-child,last-child伪类区别和用法
我将这坨伪类分成三组,第一组:nth-child,nth-last-child,only-child第二组:nth-of-type,nth-last-of-type,第三组:first-of-tpye ...
- 简单漂亮的php验证码函数
/* *说明:函数功能是生成验证码 * 参数说明:输入 长度,宽度,高度 */ function vcode($_code_length = , $_width = , $_height = ){ $ ...
- Aragorn's Story 树链剖分+线段树 && 树链剖分+树状数组
Aragorn's Story 来源:http://www.fjutacm.com/Problem.jsp?pid=2710来源:http://acm.hdu.edu.cn/showproblem.p ...
- ProxySQL 排错 Max connect timeout reached while reaching hostgroup 10 after 10000ms
ProxySQL 排错 问题分析: 在ProxySQL在集群下,因未知原因导致误测到所有节点OFFLINE_HARD,并runtime_mysql_servers表清空,从而导致前端查询无法传递到后端 ...
- ThoughtWorks代码挑战——FizzBuzzWhizz游戏 通用高速版(C/C++ & C#)
最早看到这个题目是从@ 程序媛想事儿(Alexia) 的 最难面试的IT公司之ThoughtWorks代码挑战——FizzBuzzWhizz游戏 开始的,然后这几天陆陆续续有N个小伙伴发表了自己的文章 ...
- 《深入理解Java虚拟机》笔记--第十三章、线程安全与锁优化
先保证并发的正确性,然后在此基础上来实现高效. 线程安全: 当多个线程访问一个对象时,如果不考虑这些线程在运行时环境下的调度和交替执行,也不需要进行额外的同步,或者在调用方进行任何其他的协调操 ...