大多数的客户端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. .Net Core WebApi在Linux上启动和关闭

    测试机器:阿里云云主机1核2g 安装环境:centos-7 服务器:Nginx 1.17.1 测试默认已启动 已安装配置:.Net Core 3.1 测试默认安装 连接配置:x-ftp,x-shell ...

  2. Vue父子组件通讯

    我们知道,父组件不能修改子组件的数据[这种说法是不严谨的],严谨的说法是:子组件内部不能修改从父组件传递过来的值.原因是vue遵循的是数据单向流原则,父组件传递数据给子组件只能单向绑定,通过Props ...

  3. 用python实现LBP特征点计算

    import cv2 import numpy as np def olbp(src): dst = np.zeros(src.shape,dtype=src.dtype) for i in rang ...

  4. 深入学习用 Go 编写 HTTP 服务器

    Go是一门通用的编程语言,想要学习 Go 语言的 Web 开发,就必须知道如何用 Go 启动一个 HTTP 服务器用于接收和响应来自客户端的 HTTP 请求.用 Go实现一个http server非常 ...

  5. 用 SendGrid 发送免费电子邮件

    1. 概述 SendGrid 免费账号可以限额发送 100/天封邮件,虽然比 Mailgun 的每月 10000 封的免费额度少,但胜成注册无需绑定信息卡. 集成 SendGrid 有 SMTP 和 ...

  6. 测试必知必会系列- Linux常用命令 - cp

    21篇测试必备的Linux常用命令,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1672457.html 复制文 ...

  7. 解开Service Mesh的神秘面纱

    一.什么是Service Mesh? 下面是 Willian Morgan 对 Service Mesh 的解释: A Service Mesh is a dedicated infrastructu ...

  8. 高性能-GC

    带着问题去思考!大家好 相对.NET 来说.CLR去处理了,C,C++这些就需要手动去垃圾回收. GC大部分容易察觉的性能问题.其实很多问题实际是哪个都是由于对垃圾回收器的行为和预期结果理解有误.在, ...

  9. Mybatis(三)Mybatis映射开发

    4.1 一对一 4.1.1 表对应关系, 一个订单对应一个用户 4.1.2 实体对应关系 public class Order { private int id; private Date order ...

  10. python如何通过正则表达式一次性提取到一串字符中所有的汉字

    1.python如何通过正则表达式一次性提取到一串字符中所有的汉字 https://blog.csdn.net/py0312/article/details/93999895 说明:字符串前的 “ r ...