js获取dom元素方法 

1、通过ID选取元素(getElementById)

1)使用方法:document.getElementById("domId")
        其中,domId为要选取元素的id属性值
   2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大小写的,并且会返回匹配name属性的元素。

2、通过名称name选取元素(getElementsByName)
    1)使用方法:document.getElementsByName("domName")
        其中,domName为要选取元素的name属性值
    2)说明:a. 返回值是一个nodeList集合(区别于Array)
             b. 和ID属性不一样,name属性只在少数DOM元素中有效(form表单、表单元素、iframe、img)。这是因为name属性是为了方便提交表单数据而打造的。            
             c. 为form、img、iframe、applet、embed、object元素设置name属性时,会自动在Document对象中创建以该name属性值命名的属性。所以可以通过document.domName引用相应的dom对象
    3)兼容性:IE中ID属性值匹配的元素也会一起返回

3、通过标签名选取元素(getElementsByTagName)
    1)使用方法:element.getElementsByTagName("tagName")
        其中,element是有效的DOM元素(包括document)
              tagName是DOM元素的标签名
    2)说明:a. 返回值是一个nodeList集合(区别于Array)
             b. 该方法只能选取调用该方法的元素的后代元素。
             c. tagName不区分大小写
             d. 当tagName为*时,表示选取所有元素(需遵从b.规则)
             e. HTMLDocument会定义一些快捷属性来访问标签节点。如:document的images、forms、links属性指 向<img>、<form>、<a>标签元素集合,而document.body和document.head总是 指向body和head标签(当未显示声明head标签时,浏览器也会创建document.head属性)

4、通过CSS类选取元素(getElementsByClassName)
    1)使用方法:element.getElementsByClassName("classNames")
        其中,element是有效的DOM元素(包括document)
              classNames是CSS类名称的组合(多个类名之间用空格,可以是多个空格隔开),
              如element.getElementsByClassName("class2 class1")将选取elements后代元素中同时应用了class1和class2样式的元素(样式名称不区分先后顺序)
    2)说明:a. 返回值是一个nodeList集合(区别于Array)
             b. 该方法只能选取调用该方法的元素的后代元素。
    3)兼容性:IE8及其以下版本的浏览器未实现getElementsByClassName方法

5、通过CSS选择器选取元素
    1)使用方法:document.querySelectorAll("selector")
        其中,selector为合法的CSS选择器
    2)说明:a. 返回值是一个nodeList集合(区别于Array)
    3)兼容性:IE8及其以下版本的浏览器只支持CSS2标准的选择器语法

JS1 js获取dom元素方法的更多相关文章

  1. JS获取DOM元素的八种方法

    JS获取DOM元素的方法(8种) 通过ID获取(getElementById) 通过name属性(getElementsByName) 通过标签名(getElementsByTagName) 通过类名 ...

  2. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  3. JS获取DOM元素

    1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...

  4. js获取dom元素的子元素,父元素,兄弟元素小记

    原生jsvar a = document.getElementById("dom"); del_space(a); //清理空格 var b = a.childNodes; //获 ...

  5. [原]js获取dom元素的实际位置及相对坐标

    关键API: Element.getBoundingClientRect() mdn:https://developer.mozilla.org/en-US/docs/Web/API/Element/ ...

  6. js获取隐藏元素宽高的方法

    网上有一些js获取隐藏元素宽高的方法,但是可能会存在某些情况获取不了. 例如: <!DOCTYPE html> <html lang="en"> <h ...

  7. JS操作DOM元素属性和方法

    Dom元素基本操作方法API,先记录下,方便以后使用. W3C DOM和JavaScript很容易混淆不清.DOM是面向HTML和XML文档的API,为文档提供了结构化表示,并定义了如何通过脚本来访 ...

  8. js | javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  9. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

随机推荐

  1. 没有document.getElementByName

    首先声明的是: document.getElementByName方法没有.document.getElementsByName得到的是标签的数组 document.getElementId得到的是某 ...

  2. MS SQL Server 如何得到执行最耗时的前N条T-SQL语句-

    --得到最耗时的前N条T-SQL语句 --适用于SQL SERVER 2005及其以上版本 --给N赋初值为30 ;with maco as ( select top (@n) plan_handle ...

  3. Java程序员从笨鸟到菜鸟全部博客目录

    本文来自:曹胜欢博客专栏.转载请注明出处:http://blog.csdn.net/csh624366188 大学上了一年半,接触java也一年半了,虽然中间也有其他东西的学习,但是还是以java为主 ...

  4. 动态规划(DP计数):HDU 5117 Fluorescent

    Matt, a famous adventurer who once defeated a pack of dire wolves alone, found a lost court. Matt fi ...

  5. WCF简单教程

    WCF是DotNet体系中很重要的一项技术,但是组内很多组员通过书籍自学的时候 感觉涉及面太广.配置文件太复杂,新名词太多.抓不到头绪,有感于此,决定进行一次组内技术培训,顺便把培训讲义整理到blog ...

  6. JavaScript---网络编程(7)-Dom模型(节点间的层次关系,节点的增、删、改)

    利用节点间的层次关系获取节点: 上一节讲了3中获取的方式: * ※※一.绝对获取,获取元素的3种方式:-Element * 1.getElementById(): 通过标签中的id属性值获来取该标签对 ...

  7. 1002: Prime Path

    题目链接:http://172.16.200.33/JudgeOnline/problem.php?id=1002 题意:给你两个四位数的素数,求最少经过多少步的变化能够从一个素数变到另一个素数.在变 ...

  8. cat、cp命令

    cat是查看文件内容, cp –cp是连目录及件文件都拷贝 cp是拷贝文件 a.txt里的内容是, abc def ghi cat a.txt |grep –v ghi 得到结果, abc def h ...

  9. 第一次尝试使用JAVA编写的ATM机程序

    package study; import java.util.Scanner; public class ATM { private static int[] users = { 111111, 2 ...

  10. jmeter http get 登录

      登录页url:http://www.ablesky.com/login.do?fromurl=http%3A%2F%2Fwww.ablesky.com%2Findex.do 登录参数用firebu ...