今天这里写这个博客的主要目的是记录一下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. LeetCode-Reverse Words in a String[AC源码]

    package com.lw.leet1; import java.util.Stack; /** * @ClassName:Solution * @Description: * Reverse Wo ...

  2. Order By 问题集合

    问题(一):Order By 多个参数排序 在做多字段的排序的时候我们经常会会用到该语句. 所以多参数排序是从左到右的局部排序,修改的范围只有前面参数(几个参数)相同的情况下在排序. select * ...

  3. CF767 A. Snacktower 暴力

    LINK 题意:给出一个序列,如果存的数满足连续递减(第一个必须为n)则输出否则输出空行,并暂存当前数 思路:直接暴力不可行,由于待输出的数的个数满足单调性可以稍微优化,即从上一回输出的最小一个数开始 ...

  4. 你知道吗?31种 CSS 选择器的应用

    选择器(selector)是CSS中很重要的概念,所有HTML语言中的标记都是通过不同的CSS选择器进行控制的.用户只需要通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...

  5. hihocoder1415 后缀数组三·重复旋律3

    传送门:http://hihocoder.com/problemset/problem/1415 [题解] 考虑求出两串合在一起(中间加分隔符)后缀数组,就是要求任意在两个串中的$i, j$,$\mi ...

  6. 【BZOJ】4129: Haruna’s Breakfast 树分块+带修改莫队算法

    [题意]给定n个节点的树,每个节点有一个数字ai,m次操作:修改一个节点的数字,或询问一条树链的数字集合的mex值.n,m<=5*10^4,0<=ai<=10^9. [算法]树分块+ ...

  7. FastDFS图片服务器java后台的简单调用

    工具类: package com.liveyc.common.fdfs; import org.apache.commons.io.FilenameUtils; import org.csource. ...

  8. 【洛谷 P2604】 [ZJOI2010]网络扩容(最大流,费用流)

    题目链接 第一问就是简单的最大流. 第二问,保留第一问求完最大流的残量网络. 然后新建一个源点,向原源点连一条流量为k,费用为0的边. 然后所有边重新连一起(原来的边保留),费用为题目所给,最小费用即 ...

  9. 使用Sass预定义一些常用的样式,非常方便

    CSS预处理技术现在已经非常成熟,比较流行的有Less,Sass,Stylus,在开发过程中提升我们的工作效率,缩短开发时间,方便管理和维护代码,可以根据自己的喜好选择一款自己喜欢的工具开发,使用很接 ...

  10. php常用函数——字符串函数

    php常用函数——字符串函数