DOM中元素选择器

  在DOM中我们可以将元素选择器分为两类;1、元素节点选择器;2、其它节点选择器。通过选择器选择HTML中的元素以对其进行操作,以此实现用JS对页面的操作。

  一、元素节点选择器

  1.ID选择器:document.getElementById()

  通过标签的ID名选择,返回的是单个的值,在HTML中ID具有唯一性;

  2.class选择器:document.getElementsByClassName()

var aEle=document.getElementsByClassName("myClass")  //选择文档中所有class名为myClass的元素,返回一个数组。

  通过标签的class名进行选择,返回的是一个数组,当我们需要对单个进行操作时,可利用数组的操作来选择单个的元素;这里需要注意的是,不同于ID选择器,因为是一个数组所以是Elements,注意有一个s,又由于在ES6中有class关键字,为了避免重复这里用的是ClassName。

  3.标签选择器:document.getElementsByTagName()

  通过标签名进行选择,如下选择文档中所有span标签。

var aspan=document.getElementsByTagName("span")  //选择DOM文档中所有的<span></span>标签,返回一个数组。

  4.name选器:document.getElementsByName()

  语法如下:

var auser=document.getElementsByName("user");

  name选择器一般用于表单,含有name属性的标签;同样,返回的是一个数组。

  5.高级选择器:ES5新增的选择器

  querySelector()和querySelectorAll()

  ① querySelector()  返回的是单个对象

  语法如下:

var ele = document.querySelector("#box");
var ele1 = document.querySelector(".class");
var ele2 = document.querySelector("span");
var ele3 = document.querySelector(".msg h2");
var ele4 = document.querySelector(".msg>h2");

  从上面的代码我们可以看到,这个选择器的功能强大到出乎你的想象,甚至支持css中的所有选择器。

  ②querySelectorAll()  返回一个数组对象

  语法同querySelector();

  6.关系选择器

  我将关系选择器分成三类:① 父选子② 子选父③ 兄弟

  ① 父选子

var omsg = document.querySelector(".msg");
omsg.children //所有子元素;
omsg.firstElementChild //第一个子元素;
omsg.lastElementChild //最后一个子元素;

  ②子选父

var    aspan = document.querySelector("span");
span.parentNode; //选择span 的父元素;

  ③兄弟选择器

var    aspan=document.querySelector("span");
aspan.previousElementSibling //选择span的上一个兄弟元素
aspan.nextElementSibling //选择span的下一个兄弟元素

Tip:上面所提到的利用选择器返回一个数组,该数组是一个伪数组,当需要对单个元素进行操作的时候,可以对该数组进行索引,遍历,但是要注意的是,不能使用数组的方法!

DOM选择器之元素选择器的更多相关文章

  1. jQuery选择器之元素选择器

    元素选择器:根据给定(html)标记名称选择所有的元素. 描述: $('element') 搜索指定元素标签名的所有节点,这是一个合集的操作.同样的也有原生方法getElementsByTagName ...

  2. CSS选择器的组合选择器之后代选择器和子元素选择器

    实例代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  3. CSS选择器之通配符选择器和多元素选择器

    1.通配符选择器 如果希望所有的元素都符合某一种样式,可以使用通配符选择器. 基本语法: *{margin:0; padding:0} 可以让所有的html元素的外边距和内边距都默认为0. 写一段ht ...

  4. 深入学习jQuery选择器系列第五篇——过滤选择器之内容选择器

    × 目录 [1]contains [2]empty [3]parent[4]has[5]not[6]header[7]lang[8]root 前面的话 本文介绍过滤选择器中的内容选择器.内容选择器的过 ...

  5. 深入学习jQuery选择器系列第三篇——过滤选择器之索引选择器

    × 目录 [1]通用形式 [2]首尾索引 [3]奇偶索引[4]范围索引 前面的话 上一篇介绍了过滤选择器中的子元素选择器部分,本文开始介绍极易与之混淆的索引选择器 通用形式 $(':eq(index) ...

  6. Jquery选择器之基本选择器

    id选择器 共同点: text:代表标签之间的文本值 返回值:均为列表 根据给定的ID值匹配一个标签元素,如果id值中有元字符(如 !"#$%&'()*+,./:;<=> ...

  7. jQuery选择器之层次选择器Demo

    测试代码: 02-层次选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  8. CSS选择器之基本选择器总结

    一.元素选择器(所有浏览器支持) 元素选择器(标签名选择器)其实就是文档的元素,如html,body,p,div等等, 下面例子中选择了span元素,并设置了字体颜色为红色. <body> ...

  9. jquery选择器之内容选择器

    HTML示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. 小白学python-day05(2)-列表及其操作

    今天是day05(2),以下是学习总结 但行努力,莫问前程. --------------------------------------------------------------------- ...

  2. [机器学习] SVM——Hinge与Kernel

    Support Vector Machine [学习.内化]--讲出来才是真的听懂了,分享在这里也给后面的小伙伴点帮助. learn from: https://www.youtube.com/wat ...

  3. Linux 下实践 VxLAN

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复 「1024」 即可领取,欢迎大家关注,二维码文末可以扫. 来源:ht ...

  4. [系列] Go gRPC Hello World

    目录 概述 四类服务方法 安装 写个 Hello World 服务 推荐阅读 概述 开始 gRPC 了,这篇文章学习使用 gRPC,输出一个 Hello World. 用 Go 实现 gRPC 的服务 ...

  5. http.client.ResponseNotReady: Request-sent

    最近学习python写接口测试,使用的是connection.request 发现在测试一个发送报告接口时候,同一个接口,同样的脚本,只是一个参数传不同值,总提示:http.client.Respon ...

  6. tab选项卡代码

    $('.case_header ul li').click(function(){ $(this).addClass('active').siblings().removeClass('active' ...

  7. Android平台使用Ceres Solver

    在Android平台上使用Ceres求解器,官方教程不明确,且编译过程遇到了很多问题. 环境 Ubuntu 18.04 源代码 https://github.com/Great-Keith/ceres ...

  8. oracle RAC LOG_ARCHIVE_DEST_1 与 LOG_ARCHIVE_DEST 冲突解决

    在做 oracle RAC 归档日志配置时,出现了一个错误,开始看资料的时候, 注意到了 LOG_ARCHIVE_DEST_n 与 LOG_ARCHIVE_DEST 不能同时使用, 但在配置的时候并没 ...

  9. JAVA基础知识(三):input.nextLine() 和input.next()

    next()方法在读取内容时,会过滤掉有效字符前面的无效字符,对输入有效字符之前遇到的空格键.Tab键或Enter键等结束符,next()方法会自动将其过滤掉:只有在读取到有效字符之后,next()方 ...

  10. Redhat Linux 系统上安装JDK 1.7

    作者:潇湘隐者 出处:http://www.cnblogs.com/kerrycode/ 步骤1:下载JDK 1.7 安装包  JDK 1.7 下载地址:http://www.oracle.com/t ...