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 最初设计给表单标签,但同样可以添加给其他标签;•formimg等标签的 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 4ec46a23a1f7cb8c66cd9513e132cabc.png

你可能感兴趣的:(class,原生js获取父元素)