DOM--选取文档元素
大多数的客户端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--选取文档元素的更多相关文章
- JavaScipt选取文档元素的方法
摘自JavaScript权威指南(jQuery根据样式选择器查找元素的终极方式是 先用getElementsByTagName(*)获取所有DOM元素,然后根据样式选择器对所有DOM元素进行筛选) 选 ...
- JavaScript中的window对象的属性和方法;JavaScript中如何选取文档元素
一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setIn ...
- javascript选取文档元素
用指定的id属性 用指定的name属性 用指定的标签名字 用指定的CSS类 匹配指定的CSS选择器 通过ID选取元素 var section1 = document.getElementById(&q ...
- DOM浏览器文档模型
DOM浏览器文档模型 1.对XHM/XHTML 编写成DOM文档 可形成动态网页 2.'*'获取所有节点 GetElementsByTagName():获取所有的标签名的集合--需要在js中使用win ...
- XML之DOM解析文档 Day24
TestDom.java package com.sxt.dom; import java.io.File; import java.io.IOException; import javax.xml. ...
- WORD中引用活动文档元素
要引用活动的段落.表格.域或其他文档元素,可使用 Selection 属性返回一个 Selection 对象.通过 Selection 对象,可访问选定内容中的所有段落或第一段.下列示例将边框应用于选 ...
- html5 文档元素 header footer h1h2h4
文档元素: 用于在页面的大布局, 区分各个主体和概念. 让整体清晰, 元素有语义, 进一步代替div 具体划分图示: (参考) <hgroup> <section> <n ...
- dom:文档对象模型,提供的api去操作页面上的元素
dom对象通过html标签转义成了文档操作对象
- JavaScript的DOM(文档对象)基础语法总结2
1.getAttribute()方法,通过元素节点的属性名称获取属性的值. //语法 elementNode.getAttribute(name) //element(元素);Node(节点) //注 ...
随机推荐
- 谈谈集合.Stream Api
1. 什么是stream API Java8提供的stream API可以让程序员像操作数据库一样操作集合.Stream API可以极大提高Java程序员的生产力,让程序员写出高效率.干净.简洁的代码 ...
- An incompatible version [1.1.33] of the APR based Apache Tomcat Native library is installed, while Tomcat requires version [1.2.14]
Springboot项目启动出现如下错误信息 解决办法在此地址:http://archive.apache.org/dist/tomcat/tomcat-connectors/native/1.2.1 ...
- 06 EntityManager和EntityTransaction
EntityManager 在 JPA 规范中, EntityManager是完成持久化操作的核心对象.实体类作为普通 java对象,只有在调用 EntityManager将其持久化后才会变成持久化对 ...
- 大数据学习之scala-环境搭建
scala 下载网站 https://www.scala-lang.org/download/ 安装scala要先安装java,并且配置java环境,官网也有说明 不过国内的网站下载不下来可以访问: ...
- 什么是容器,什么是Docker?
此文转载自http://www.cnblogs.com/CloudMan6/p/6751516.html行文时有所改动 什么是容器?什么是Docker? 容器是一种轻量级.可移植.自包含的软件打包技术 ...
- 基于微信小程序的租房小程序
乐直租全国租房小程序前端 房源分钟上传,可快捷联系房东的小程序. 该小程序操作简单,布局清新,欢迎 start ~ 传送门:Github 扫码体验: pages: 首页 index 选择发布页 bef ...
- span(行级元素)在不定高的div(块级元素)中垂直居中的方法
设置父级元素: align-items: center; display: flex;
- echarts legend文字配置多个颜色(转)
困扰很久的问题终于解决了 oh yea! echarts legend文字配置多个颜色legend: {data: [{name:‘直接访问’,icon : ‘circle’,textStyle: { ...
- Python生态_turtle库
Python生态_turtle库: 绘制状态函数: pendown():别名pd(),落下画笔,之后,移动画笔将绘制形状 penup():抬起画笔 pensize():画笔粗细大小 颜色控制函数: p ...
- 一些Nmap NSE脚本推荐
前言 Nmap是一款强大的开源扫描工具.同时Nmap提供了强大的脚本引擎(Nmap Scripting Engine),支持通过Lua脚本语言来扩展Nmap的功能,在Nmap的发行版中已经包含了数百个 ...