大多数的客户端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. npm install、npm install --save与npm install --save-dev、npm install -g区别

    npm install X: 会把X包安装到node_modules目录中 不会修改package.json 之后运行npm install命令时,不会自动安装X npm install X –sav ...

  2. vue安卓4.4.2页面打不开的坑

    项目上线两三天,有保障说安卓下面页面打不开,所以查了下具体原因,系统版本过低,安卓4.4.2,然后发现本地没有babel-polyfill的包,具体解决方案如下: 1,npm 安装 npm insta ...

  3. frida入门总结

    一.Frida概述     Frida是一款轻量级HOOK框架,可用于多平台上,例如android.windows.ios等.     frida分为两部分,服务端运行在目标机上,通过注入进程的方式来 ...

  4. 【已解决】HDFS节点已经启动,但不能访问50070 ?

    问题描述 通过start-dfs.sh启动了三个节点 但无法通过IP访问50070端口 问题分析 1.可能是防火墙没关,被拦截了 果然,防火墙没关 再将防火墙设为开机不启动 systemctl dis ...

  5. 【python系统学习10】布尔值

    python的数据类型有好多个,前边写过字符串.整数和浮点数这三种. 本节来整理另一种简单数据类型--布尔值 布尔值(bool) 布尔值和其数据值 计算机可以用数据进行判断,若判断为真则执行特定条件中 ...

  6. 写一个scrapy中间件--ip代理池

    middleware文件 # -*- coding: utf-8 -*- # Define here the models for your spider middleware # See docum ...

  7. MySQL 【优化宝典】

    概述 为什么要优化 系统的吞吐量瓶颈往往出现在数据库的访问速度上 随着应用程序的运行,数据库的中的数据会越来越多,处理时间会相应变慢 数据是存放在磁盘上的,读写速度无法和内存相比 如何优化 设计数据库 ...

  8. mongo的聚合操作

    对图7-1所示的数据集exampledata1,使用聚合操作实现以下功能: (1)不返回_id字段,只返回age和sex字段. (2)所有age大于28的记录,只返回age和sex. (3)在$mat ...

  9. Linux安装Elasticsearch7.x

    Elasticsearch下载地址: https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.1.1-linux-x8 ...

  10. 10.xadmin后台使用管理

    目录 xadmin后台管理 xadmin后台管理 安装:luffy虚拟环境下 >: pip install https://codeload.github.com/sshwsfc/xadmin/ ...