大多数的客户端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。

  

DOM--选取文档元素的更多相关文章

  1. JavaScipt选取文档元素的方法

    摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 选 ...

  2. JavaScript中的window对象的属性和方法;JavaScript中如何选取文档元素

    一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setIn ...

  3. javascript选取文档元素

    用指定的id属性 用指定的name属性 用指定的标签名字 用指定的CSS类 匹配指定的CSS选择器 通过ID选取元素 var section1 = document.getElementById(&q ...

  4. DOM浏览器文档模型

    DOM浏览器文档模型 1.对XHM/XHTML 编写成DOM文档 可形成动态网页 2.'*'获取所有节点 GetElementsByTagName():获取所有的标签名的集合--需要在js中使用win ...

  5. XML之DOM解析文档 Day24

    TestDom.java package com.sxt.dom; import java.io.File; import java.io.IOException; import javax.xml. ...

  6. WORD中引用活动文档元素

    要引用活动的段落.表格.域或其他文档元素,可使用 Selection 属性返回一个 Selection 对象.通过 Selection 对象,可访问选定内容中的所有段落或第一段.下列示例将边框应用于选 ...

  7. html5 文档元素 header footer h1h2h4

    文档元素: 用于在页面的大布局, 区分各个主体和概念. 让整体清晰, 元素有语义, 进一步代替div 具体划分图示: (参考) <hgroup> <section> <n ...

  8. dom:文档对象模型,提供的api去操作页面上的元素

    dom对象通过html标签转义成了文档操作对象

  9. JavaScript的DOM(文档对象)基础语法总结2

    1.getAttribute()方法,通过元素节点的属性名称获取属性的值. //语法 elementNode.getAttribute(name) //element(元素);Node(节点) //注 ...

随机推荐

  1. 「从零单排HBase 04」HBase高性能查询揭秘

    先给结论吧:HBase利用compaction机制,通过大量的读延迟毛刺和一定的写阻塞,来换取整体上的读取延迟的平稳. 1.为什么要compaction 在上一篇 HBase读写 中我们提到了,HBa ...

  2. seo搜索优化教程11-seo搜索优化关键词策略

    为了使大家更方便的了解及学习网络营销推广.seo搜索优化,星辉科技强势推出seo搜索优化教程.此为seo教程第11课 关键词在seo搜索优化中有着重要的地位,本节主要讲解seo搜索优化中关键词优化的相 ...

  3. C# BASS音频库 + 频谱基本用法

    效果图: 使用了 BASS.dll.  BASS.NET.dll   和  PeakMeterCtrl.dll 前面两个负责播放   最后一个负责绘制频谱,本文重点讲的是频谱部分,播放音频部分注意一点 ...

  4. mongoose基本增删改查

    1.安装 打开命令行 npm i mongoose 2.连接数据库 // 引入安装的包 var mongoose = require('mongoose'); mongoose.connect('mo ...

  5. Java原来还可以这么学:如何搞定面试中必考的集合类

    原创声明 本文作者:黄小斜 转载请务必在文章开头注明出处和作者. 系列文章介绍 本文是<五分钟学Java>系列文章的一篇 本系列文章主要围绕Java程序员必须掌握的核心技能,结合我个人三年 ...

  6. 在Linux上查询物理机信息-不用去拆机器了

    目录 一.查看系统信息(包含机器型号) 1.1 查看机型和品牌 二.查看CPU 信息 2.1 查看CPU 型号 2.2 查看CPU的物理数量 2.3 查看 CPU核心数量(非逻辑CPU) 2.4 查看 ...

  7. Django的路由系统01-路由分发

    1. Including other URLconfs 原urls.py文件,多个app的路由系统写在一起,不方便管理 范例: from django.conf.urls import url fro ...

  8. [转载]Linux服务器丢包故障的解决思路及引申的TCP/IP协议栈理论

    Linux服务器丢包故障的解决思路及引申的TCP/IP协议栈理论 转载至:https://www.sdnlab.com/17530.html 我们使用Linux作为服务器操作系统时,为了达到高并发处理 ...

  9. 妈妈再也不担心我面试被Redis问得脸都绿了

    长文前排提醒,收藏向前排提醒,素质三连 (转发 + 在看 + 留言) 前排提醒! 前言 Redis 作为一个开源的,高级的键值存储和一个适用的解决方案,已经越来越在构建 「高性能」.「可扩展」 的 W ...

  10. Java并发编程之CAS第三篇-CAS的缺点及解决办法

    Java并发编程之CAS第三篇-CAS的缺点 通过前两篇的文章介绍,我们知道了CAS是什么以及查看源码了解CAS原理.那么在多线程并发环境中,的缺点是什么呢?这篇文章我们就来讨论讨论 本篇是<凯 ...