今天这里写这个博客的主要目的是记录一下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的方法的更多相关文章

  1. document,element,node方法

    document方法: getElementById(id)                             返回指定结点的引用 getElementsByTagName_r(name)    ...

  2. JavaScript 原生代码找对象的方法

    1. id :  document.getElementById('id') 2. 标签 : document.getElementsByTagName('标签') //获得的是一个标签数组 3. N ...

  3. javascript 原生常用api 数组方法大全

     <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. javascript原生bind方法ie低版本兼容详解

    上一篇文章讲到了javascript原生的bind方法: http://www.cnblogs.com/liulangmao/p/3451669.html 这篇文章就在理解了原生bind方法的原理以后 ...

  5. JavaScript document属性和方法

    JavaScript document属性和方法 --------------------------------------------属性: 1. Attributes     存储节点的属性列表 ...

  6. javascript原生bind方法详解

    bind()方法,是javascript原生的函数类的一个原型方法(即Function.prototype里的方法),不支持ie低版本. 基本格式: function.bind(obj1,obj2,o ...

  7. JavaScript 原生提供两个 Base64 相关的方法

    JavaScript 原生提供两个 Base64 相关的方法. btoa():任意值转为 Base64 编码 atob():Base64 编码转为原来的值 var string = 'Hello Wo ...

  8. 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll

    querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 D ...

  9. jQuery? 回归JavaScript原生API

    如今技术日新月异,各类框架库也是层次不穷.即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势.但JS原生API写法依旧:并且 ...

随机推荐

  1. RabbitMQ的原理和使用

    转载:RabbitMQ从入门到精通 转载:轻松搞定RabbitMQ 转载:RabbitMQ Java入门教程 一.RabbitMQ AMQP,即Advanced Message Queuing Pro ...

  2. bzoj 3678 wangxz与OJ

    3678: wangxz与OJ Time Limit: 10 Sec  Memory Limit: 128 MBhttp://www.lydsy.com/JudgeOnline/problem.php ...

  3. Jugs(回溯法)

    ZOJ Problem Set - 1005 Jugs Time Limit: 2 Seconds      Memory Limit: 65536 KB      Special Judge In ...

  4. k8s+docker学习连接汇总

    http://guide.daocloud.io/dcs/docker-9153982.html http://www.dczou.com/viemall/802.html https://wangl ...

  5. Configure Always On Availability Group for SQL Server on Ubuntu——Ubuntu上配置SQL Server Always On Availability Group

    下面简单介绍一下如何在Ubuntu上一步一步创建一个SQL Server AG(Always On Availability Group),以及配置过程中遇到的坑的填充方法. 目前在Linux上可以搭 ...

  6. 【CodeForces】960 F. Pathwalks 主席树+动态规划

    [题目]F. Pathwalks [题意]给定n个点m条边的有向图,可能不连通有重边有自环.每条边有编号 i 和边权 wi ,求最长的路径(可以经过重复节点)满足编号和边权都严格递增.n,m,wi&l ...

  7. 2017ACM暑期多校联合训练 - Team 3 1003 HDU 6058 Kanade's sum (模拟)

    题目链接 Problem Description Give you an array A[1..n]of length n. Let f(l,r,k) be the k-th largest elem ...

  8. jQuery()方法的第二个参数详解

    关于jQuery()方法的第二个参数,有下面这几种用法: 1.jQuery(selector, [context]) 这种用法,相当于 $(context).find(selector) 或者 con ...

  9. 【Eclipse】Elipse自定义library库并导入项目

    1.定义像JRE System Library之类的库 (1)点击UserLibrary (2)如果没有就点击new新建一个user library,否则进行4  (3)向user library添加 ...

  10. C# 开发(创蓝253)手机短信验证码接口

    创蓝253: https://www.253.com/ #region 获取手机验证码(创蓝253) /// <summary> /// 获取手机验证码(创蓝253) /// </s ...