大多数的客户端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. Redis04——五分钟明白Redis的哨兵模式

    和所有的数据库一样,Redis也支持集群化,Redis的集群分为分布式集群和主从集群.大部分公司采取的都是主从集群.所以在本篇文章内,我们将着重介绍Redis的主从集群及哨兵机制. 由于Redis的主 ...

  2. php制作缩略图

    PHP制作缩略图 1.制作缩略图的函数 imagecopyresampled(dest,src,dx,dy,sx,sy,dw,dh,sw,sh) 说明: dest 目标画布 src 原图(要缩略的图片 ...

  3. element UI中的tab切换栏

    html代码:(用的是el-tab组件) <el-tabs v-model="activeIndex" type="border-card" @tab-c ...

  4. scrapydweb的初步使用(管理分布式爬虫)

    https://github.com/my8100/files/blob/master/scrapydweb/README_CN.md 一.安装配置 1.请先确保所有主机都已经安装和启动 Scrapy ...

  5. 测试必知必会系列- Linux常用命令 - cd

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

  6. 【题解】NOIP 2015 子串

    淦!这题我做了三个月啊 题目描述 有两个仅包含小写英文字母的字符串 \(A\) 和 \(B\). 现在要从字符串 \(A\) 中取出 \(k\) 个互不重叠的非空子串,然后把这 \(k\) 个子串按照 ...

  7. 小程序中内容审核功能的使用(后台使用thinkPHP5.1)

    本文包含文本和图片的检测 //接收要检测的文本内容并调用检测方法 public function textCheck(Request $request){ //内容安全识别 $data['conten ...

  8. Java第一节课考试

    1 package kaoshi; import java.util.Scanner; public class ScoreInformation { Scanner input=new Scanne ...

  9. css定位属性的运用

    position 定位定位:主要解决叠加排列的问题.position 1.static(默认) 2.relative : 相对定位 如果没有定位偏移量,对元素本身没有任何影响(一般用于需要加定位的父容 ...

  10. tomcat启动时间5分钟左右org.apache.catalina.util.SessionIdGeneratorBase.createSecureRandom Creation of SecureRandom instance for session ID generation using [SHA1PRNG] took [342,445] milliseconds.

    org.apache.catalina.util.SessionIdGeneratorBase.createSecureRandom Creation of SecureRandom instance ...