大多数的客户端JavaScript程序在运行时都是在操作一个或者多个文档元素,而为了操作文档中的元素我们就必须要通过某种途径或者方法获得或者选取这些引用文档元素的Element对象。DOM定义了许多种方式来选取元素。

一、通过ID选取元素

  我们应该知道任何元素都有一个id属性,而该ID属性的值必须是唯一的(就像我们的身份证号码一样,我们也可以认为这是元素的身份证号码)。我们可以通过Document对象提供的getElementById()方法来获取具有唯一id的元素例如:

  document.getElementById('id'),如果没有找到该id元素则会返回null。

  有的同学可能会问我想一下获取多个id元素,我们可以自己定义一个方法

  

二,通过名字选取元素

  eg: document.getElementsByName(eleName);

  在这里我们说明一下name属性和id属性的区别:1,name属性在一个文档中不必是唯一的,多个元素可以有同一个name;2,name属性只在少数元素中有效包括表单,表单元素,img和iframe元素。

这里还有一个区别,getElementsByName是定义在HTMLDocument类中,所以只针对HTML文档有效。HTMLDocument类和Document类的区别在上一章DOM概述我们已经说过了。

三,通过标签名字选取元素

  eg: document.getElementsByTagName(tagName);

  document.body指代的是HTML文档的body元素,document.head指代的是head元素,Document类的documentElement属性指的是文档的根元素。

四,通过CSS类选取元素

  eg: documnet.getElementsByClassName(className);

该方法只需要一个字符串参数,但是该字符串可以由多个空格隔开的标识符组成,只有当元素的class属性值包含所有指定的标识符时才能匹配,标识符的顺序是无关紧要的。

五,通过CSS选择器选取元素

  eg:document.querySelectorAll(css选择器)或者document.querySelector(css选择器)

区别:document.querySelectorAll()返回所有的符合条件的元素为一个NodeList对象,如果没有符合条件的则返回[];

  querySelector()只返回第一个符合条件的元素如果没有则返回null。

  

最新文章

  1. myeclipse自动补全增强
  2. JSON.parse() 和 JSON.stringify()
  3. Quartz应用实践入门案例二(基于java工程)
  4. (译)详解javascript立即执行函数表达式(IIFE)
  5. 退役?OR 继续
  6. 16、WPF中的命令
  7. S2SH+Hibernate search出现的问题
  8. PHP学习之[第02讲]PHP5.4 Apache Mysql 搭配与多站点配置详解
  9. VS Code开发调试ASP.NET Core 1.0
  10. 基于visual Studio2013解决面试题之1004最长等差数列
  11. SQL SERVER CHARINDEX函数
  12. PS CC 2014 把一个图层输出为文件的方法
  13. ubuntu sendmail配置发送邮件
  14. bzoj千题计划280:bzoj4592: [Shoi2015]脑洞治疗仪
  15. DEVICE_ATTR实例分析
  16. pip软件包安装 + Anaconda软件库安装 教程
  17. Spring 的配置详解
  18. Mosquitto服务器的搭建以及SSL/TLS安全通信配置
  19. java gc 随记
  20. QT的QCombox

热门文章

  1. python框架Django实战商城项目之工程搭建
  2. Aircrack-ng无线审计工具破解无线密码
  3. js 图片实现无缝滚动
  4. CentOS系统python默认版本由python2改为python3
  5. go入门二
  6. Struts UI标签的使用
  7. 关于使用 Laravel 服务容器的优势介绍
  8. Minio 集群扩容存储空间,配合nginx 负载反向代理后端minio 集群服务器,提升高可用性
  9. Java内部类的四种分类以及作用介绍
  10. Github Pages访问太慢?通过Netlify免费加速