class 原生js获取父元素_从零开始学前端 30. JS选择器

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正

由于微信公众号对英文的排版十分困难  以获得更好的阅读体验类似于 CSS选择器，如果我们想要使用 JS 来对 HTML 页面中的元素实现一对一，一对多或者多对一的控制，必须先通过选择器来获得该元素，然后在对它进行相应的操作，选择器的种类有很多，但它们的目的是一样的，那就是把想要的元素选中，需要我们根据不同的情况选择相应的选择器。

一、原生JS选择器

1. ID选择器

概述：根据 ID 获取元素，该方法返回的是一个符合条件的元素对象语法：document.getElementById(ID);实例：document.getElementById("div1");作用：匹配页面中 id="div1" 的标签概述：根据 ID 获取元素，该方法返回的是一个符合条件的元素对象

id="div1">可以被选中的标签

id="div2">不可以被选中的标签

•ID 应具有唯一性，同一个页面应不能出现相同的 ID；•如果一个页面存在多个相同 ID ，则只会获取到第一个元素；•IE8 以下版本浏览器不区分 ID 的大小写；•低版本浏览器会将表单的 name 属性当做 ID 来识别；

2. 标签选择器

概述：根据标签名获取元素，该方法返回的是一个类数组对象，由所有符合条件的标签对象组成。语法：document.getElementsByTagName(tagName);实例：document.getElementsByTagName("div");作用：匹配页面中所有 div 标签

可以被选中的标签div>
可以被选中的标签div>
不可以被选中的标签h1>

•返回的是一个类数组 NodeList 对象，按照在页面中的顺序排列；•由于 HTML 文档不区分大小写，所以该选择器也不会区分大小写；•通过通配符 * 可以获得页面的所有元素；

3. class类选择器

概述：根据类名获取元素，该方法返回的是一个类数组对象，由所有符合条件的标签对象组成。语法：document.getElementsByClassName(className);实例：document.getElementsByClassName("div1");作用：匹配页面中所有  的标签

class="div1">可以被选中的标签

class="div2">不可以被选中的标签

•与标签选择器相同，返回的是一个类数组 NodeList 对象；•可以通过空格将类名分开以获得同时具有两个类名的元素，类名的顺序与选择器无关；•IE8 以下版本浏览器未显示该方法；•怪异模式不区分类名大小写，标准模式区分大小写；

4. name选择器

概述：根据标签的 name 属性来获取元素，该方法返回的是一个类数组对象，由所有符合条件的标签对象组成。语法：document.getElementsByName(nameValue);实例：document.getElementsByName("btn1");作用：匹配页面中所有 name="btn1" 的标签

 name="btn1">可以被选中的标签 name="btn2">不可以被选中的标签

•name 最初设计给表单标签，但同样可以添加给其他标签；•form、img等标签的 name 属性会在 window 对象中创建对应值，可以使用window.名字或 document.名字 来获取对应元素；•IE 浏览器会将 name 识别为 ID，应注意兼容性问题；

5. document.all 获取所有元素

概述：获得页面所有的元素。语法：document.all;作用：匹配页面中所有标签

•古老时代的选择器，不推荐使用，目前已经被其他选择器所取代；•可以通过 document.all.tags() 来获取相应元素，目前大部分浏览器并不支持，低版本 IE 中使用；

6. querySelector选择器

概述：通过给定的 CSS 选择器匹配元素，返回与该模式匹配的第一个元素。语法：document.querySelector(selector);

// ID 选择器 等价于 document.getElementById("div1")document.querySelector("#div1"); // 标签选择器 等价于 document.getElementsByTagName("div")document.querySelector("div"); // 类选择器 等价于 document.getElementsByClassName("div1")document.querySelector(".div1"); // 属性选择器 等价于 document.getElementsByName("btn1")document.querySelector("[name='btn1']");// 组合选择器 匹配所有类名为 div1 的 div 标签document.querySelector("div.div1");

•selector 指的是 CSS 选择器，#代表 ID ，. 代表 class，与 CSS 保持一致；•只返回第一个符合条件的标签元素；•IE8 以下版本的浏览器不支持；

7. querySelectorAll选择器

概述：通过给定的 CSS 选择器匹配元素，返回的是一个 NodeList，由所有符合条件的标签对象组成。语法：document.querySelectorAll(selector);

•除了返回的内容外，语法等与 querySelector 一致；•只要传入的选择器正确，就会返回一个 NodeList，哪怕是空的；•IE8 以下版本的浏览器不支持；

8. 组合选择器

  和 CSS 一样，所有的组合器可以相互搭配进行使用：

var oForm = document.getElementsByName("formName");  // 先获取 name="formName" 的标签oForm.getElementsByClassName("btn1");    // 在获取其中类名为 btn1 的标签

  针对 querySelector 和 querySelectorAll 选择器，可以通过 CSS 选择器来实现各种操作：

分组选择器

document.querySelectorAll("ul , dl");       // 获取页面上所有 ul 和 dl 标签，通过一个列表返回;document.querySelectorAll(".div1 , .div2");   //获 取页面上所有包含btn和txt样式类名的元素

属性选择器

document.querySelectorAll("div[data-id]");         // 获取页面上所有带有data-id 属性的 div 元素document.querySelectorAll("div[data-id='test']");         // 获取页面上所有 data-id 属性且值为 test 的 div 元素

后代选择器

document.querySelectorAll("ul li");   // 获取页面上所有 ul 标签中的 li 标签// 等价于document.getElementsByTagName("ul").getElementsByTagName("li");

  其他还包括子元素选择器、兄弟选择器、伪类选择器等等符合 CSS 选择器语法的内容，具体内容可以点击链接查看之前的文章第四部分的九种选择器：从零开始学前端 - 4. CSS 基础^[1]

二、jQuery选择器

  jQuery 是一个简单而强大的 JS 库，它的学习成本极低，且极大地简化了编写 JS 代码的难度。它所提供的选择器十分丰富，基本囊括了所有根据元素特点进行匹配的选择器，主要可以分为以下几类：

1. 基本选择器

1.1 ID选择器

概述：根据 ID 获取元素，该方法返回的是一个符合条件的元素对象，等价于 document.getElementById();语法：$(#ID)实例：$("#div1")作用：匹配页面中 id="div1" 的标签

id="div1">可以被选中的标签

id="div2">不可以被选中的标签

1.2 标签选择器

概述：根据标签名获取元素，等价于document.getElementsByTagName();语法：$(tagName)实例：$("div");作用：匹配页面中所有 div" 标签

id="div1">可以被选中的标签

id="div2">可以被选中的标签

不可以被选中的标签

1.3 class类选择器

概述：根据指定类名获取元素，等价于getElementsByClassName();语法：$(.className)实例：$(".div1");作用：匹配页面中所有  的标签

1.4 获取所有元素

概述：根据当前页面的所有元素，等价于 document.all;语法：$("*")作用：匹配页面中所有标签

1.5 组合选择器

概述：将所有符合条件的元素放在一个数组中返回；语法：$(selector1,selector2...)实例：$("div, h1");作用：匹配页面中所有的 div 和 h1 标签

id="div1">可以被选中的标签

可以被选中的标签不可以被选中的标签

•注意选择器之间使用逗号分开；

2. 层级选择器

2.1 后代选择器

概述：在给定的祖先元素下匹配所有的后代元素语法：$(selector1 selector2...)实例：$("div p");作用：匹配页面中所有的 div 下的 p 标签

id="div1">

不可以被选中的标签 可以被选中的标签

•注意选择器之间使用空格分开；

2.2 子元素选择器

概述：在给定的父元素下匹配所有的子元素语法：$(parent > child)实例：$("div > p");作用：匹配页面中所有的 div 下的子元素 p 标签

id="div1">

可以被选中的标签

不可以被选中的标签

可以被选中的标签

•注意选择器之间使用大于号分开；

2.3 相邻元素选择器

概述：匹配所有紧接在 prev 元素后的 next 元素语法：$(prev + next)实例：$("div + h1");作用：匹配页面中所有的 div 后的 h1 标签

id="div1">不可以被选中的标签

可以被选中的标签

不可以被选中的标签

•注意选择器之间使用加号分开；•只会匹配 prev 后的第一个，且符合条件的元素；

2.4 通用兄弟选择器

概述：匹配 prev 元素之后的所有 siblings 元素语法：$(prev ~ siblings)实例：$("div ~ h1");作用：匹配页面中所有的 div 后的 h1 标签

id="div1">不可以被选中的标签

可以被选中的标签

可以被选中的标签

•注意选择器之间使用波浪线分开；

3. 筛选选择器

  筛选选择器可以说是 jQyery 选择器的重点部分，熟练使用筛选器对选取元素有很大的帮助。

// 重点基本筛选器$("div:first");           // 获取第一个 div$("div:last");           // 获取最后一个 div$("div:not(#div1)");      // 获取除了 id="div1" 的所有 div$("div:even");          // 获取所有下标索引为偶数的 div$("div:odd");           // 获取所有下标索引为奇数的 div$("div:eq(1)");           // 获取所有下标索引为 1 的 div$("div:gt(1)");           // 获取所有下标索引大于 1 的 div$("div:lt(1)");           // 获取所有下标索引小于 1 的 div$(":animated");           // 获取所有正在执行动画的元素$(":focus");           // 获取当前获取焦点的元素// 其他基本筛选器$(":header");           // 获取所有的标题元素 h1~h6$(":root");             // 获取当前页面的根元素，HTML 文档中永远是  $("div:target");        // 假设当前地址为 https://example.com/#foo ,则 $("div:target")会匹配 id 为 foo 的 div // 内容筛选器$("div:contains('test')");    // 获取所有内容为 test 的 div $("div:empty");          // 获取所有内容为空(不包含子元素或者文本)的 div $("div:has(p)");        // 获取所有包含 p 标签的 div $("div:parent");        // 获取 div 的父元素// 可见性筛选器$("div:hidden");        // 获取所有不可见的 div$("div:visible");        // 获取所有可见的 div

4. 属性选择器

$("button[name]");        // 获取所有具有 name 属性的 button$("button[name='btn1']");    // 获取所有 name='btn1' 的 button$("button[name!='btn1']");    // 获取所有 name!='btn1' 的 button ， 推荐使用 :not 来代替 [attribute!=value]$("button[name^='btn']");    // 获取所有 name 值以 btn 开头的 button$("button[name$='btn']");    // 获取所有 name 值以 btn 结尾的 button$("button[name*='btn']");    // 获取所有 name 值包含 btn 的 button$("button[id][name]");      // 获取所有具有 id 和 name 属性的 button

5. 伪类选择器

$("ul li:first-child");        // 获取所有 ul 下的第一个元素，且这个元素是 li $("ul li:last-child");        // 获取所有 ul 下的最后一个元素，且这个元素是 li $("ul li:first-of-type");      // 获取所有 ul 下的第一个出现的 li 元素$("ul li:last-of-type");      // 获取所有 ul 下的最后一个出现的 li 元素$("ul li:nth-child(event)");    // 获取所有 ul 下所有下标为偶数的 li 元素  下标从 1 开始 $("ul li:nth-child(2n-1)");      // 可以传入任意数列作为参数，例如传入 2n-1 获取下标为奇数的 li 元素$("ul li:nth-last-child(event)");  // 获取所有 ul 下所有下标为偶数的 li 元素  下标从 1 开始且从后向前计算$("ul li:nth-of-type(event)");    // 获取 ul 下所有下标为偶数的 li 元素 下标从 1 $("ul li:nth-last-of-type(2n-1)");  // 获取 ul 下所有下标为奇数的 li 元素 下标从 1 开始且从后向前计算$("ul li:only-child");        // 获取 ul 下唯一一个( 没有任何兄弟元素 ) li 元素

6. 表单选择器

$(":input");      // 获取所有 input 标签$(":text");        // 获取所有 type = "text" 的 input 标签$(":password");      // 获取所有 type = "password" 的 input 标签$(":radio");      // 获取所有 type = "radio" 的 input 标签$(":checkbox");      // 获取所有 type = "checkbox" 的 input 标签$(":submit");      // 获取所有 type = "submit" 的 input 和 button 标签,未声明 type 属性的 button 默认为 submit$(":image");      // 获取所有 type = "image" 的 input 标签$(":reset");      // 获取所有 type = "reset" 的 input 和 button 标签$(":button");      // 获取所有 type = "button" 的 input 和 button 标签$(":file");        // 获取所有 type = "file" 的 input 和 button 标签// 针对状态进行筛选$("input:enabled");        // 获取所有未被禁用 input 标签$("input:disabled");      // 获取所有被禁用(disabled="disabled")的 input 标签$("input:checked");        // 获取所有被选中的 input 标签(指单选框，多选框，下拉框中的 option)$("select option:selected")    // 匹配所有被选中 option

  要注意使用 jQuery 选择器返回的是 jQuery 对象，与原生选择器返回的对象并不一致，需要进行转化之后才能调用各自的方法：

// 原生 JS 对象转化为 jQuery 对象// 对于一个 DOM 对象，只需要用 $() 把 DOM 对象包装起来即可获得一个 jQuery 对象var oDiv1 = document.getElementById("div1");var $oDiv1 = $(oDiv1);    // jQuery 对象转化为原生 JS 对象// 对于一个 jQuery 对象，可以使用 [index] 或者 .get(index) 方法来获取 DOM 对象var oDiv2 = $oDiv1[0];var oDiv3 = $oDiv1.get(0);

感谢大家的观看，点赞和收藏，我们下篇博客再见，麻烦动动您的小手帮忙点个赞和收藏，这对博主而言十分重要，谢谢！。       

---

每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。您的评论和关注是我更新的动力!

---

点击查看原文跳转到 博客            点下再看，少个BUG