JavaScript根据选择器字符串判断当前元素是否与选择器匹配

旧城等待， 2022-12-02 04:13 159阅读 0赞

编写一个 match 函数。它接受两个参数，第一个参数是一个选择器字符串性质，第二个是一个 HTML 元素。这个元素你可以认为它一定会在一棵 DOM 树里面。通过选择器和 DOM 元素来判断，当前的元素是否能够匹配到我们的选择器。（不能使用任何内置的浏览器的函数，仅通过 DOM 的 parent 和 children 这些 API，来判断一个元素是否能够跟一个选择器相匹配。）以下是一个调用的例子。

<div id="id1" class="class1">
      <div id='id2' class='class2 class3'>
        <div id='id3' class='class4 class5 class6'></div>
      </div>
    </div>

function match(selector, element) {
      let selector_arr = selector.split(' ');//获取element层级
      let parent_arr = [];//用于保存父节点
      let selector_re = /(\w+)|(\.\w+)|(\#\w+)/g;
      for(let i = 0; i < selector_arr.length; i++){
        parent_arr.push(selector_arr[i].match(selector_re));
      }
      
      let matched = true;
      //从当前节点开始向上循环
      for (let j = parent_arr.length-1;j>=0;j--){
        if(!currentElementMatch(parent_arr[j], element)){
          matched = false;
          break;
        }
        element = element.parentNode;
      }
      return matched;
    }
    
    function currentElementMatch(currSelector, currElement){
      let hasId = false, hasClass = false, hasTag = false;
      let idMatch = false, classMatch = false, tagMatch = false;
      for(let i = 0; i<currSelector.length;i++;){
        if(currSelector[i].charAt(0) === '#'){
          hasId = true;
          if(currElement.id === currSelector[i].replace('#','')){
            idMatch = true;
          }
        }else if(currSelector[i].charAt(0) === '.'){
          hasClass = true;
          classMatch = false;//因为class可能有多个，所以没判断一个class这里都要先置为false
          for(let j = 0;j<currElement.classList.length; j++){
            if(currElement.classList[j] === currSelector[i].replace('.','')){
              classMatch = true;
              break;
            }
          }
        }else{
          hasTag = true;
          if(currElement.tagName.toLowerCase() === currSelector[i]){
            tagMatch = true;
          }
        }
      }
      return ((hasId && idMatch) || !hasId) && ((hasClass && classMatch) || !hasClass) && ((hasTag && tagMatch) || !hasTag)
    }
    
    
    match("#id1.class1 div.class2.class3 div#id3.class4.class5.class6", document.getElementById("id3"));

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关类选择器和元素选择器

*我们先声明一个类选择器：** <style> .blue-text { color: blue; } </st...

淩亂°似流年/ 2024年04月18日 19:14/ 0 赞/ 96 阅读

相关 JavaScript选择器：使用选择器选取和操作HTML元素

JavaScript是一种广泛使用的脚本语言，它可以与HTML文档交互，实现动态和交互式的网页功能。在JavaScript中，选择器是一种强大的工具，它允许我们通过指定特定的选

以你之姓@/ 2023年10月16日 14:03/ 0 赞/ 11 阅读

相关 CSS-选择器,id 选择器、元素标签选择器、类选择器、多类选择器、属性选择器

1.id 选择器 id 选择器以 “\” 来定义。 id 属性只能在每个 HTML 文档中出现一次。 <html> <head> <

阳光穿透心脏的1/2处/ 2023年07月01日 05:29/ 0 赞/ 6 阅读

相关 css基础知识2-元素选择器、id选择器、类选择器

css里面有很多选择器，这次就是为大家介绍一下css里面基本的几个选择器元素选择器最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器

谁借莪１个温暖的怀抱￠/ 2022年12月22日 09:41/ 0 赞/ 260 阅读

相关 JavaScript根据选择器字符串判断当前元素是否与选择器匹配

编写一个 match 函数。它接受两个参数，第一个参数是一个选择器字符串性质，第二个是一个 HTML 元素。这个元素你可以认为它一定会在一棵 DOM 树里面。通过选择器和 DO

旧城等待，/ 2022年12月02日 04:13/ 0 赞/ 160 阅读

相关 css选择器与jquery选择器

[1.css选择器][1.css] [2.jquery选择器][2.jquery] [1.css]: http://www.w3school.com.cn/cssref/

古城微笑少年丶/ 2022年09月24日 09:30/ 0 赞/ 224 阅读

相关 css各种选择器，元素标签选择器，类选择器，id选择器，选择器的组合

3 元素（标签）选择器：格式标签名（html元素）\{ /\CSS样式代码\/ \} 使用范围，是将同样的样式，作用在多个同名的标签上。 4 类选择器： <

曾经终败给现在/ 2022年06月06日 03:06/ 0 赞/ 332 阅读

相关 jquery is 用于查看选择的元素是否匹配选择器。

如果 <p> 的父元素是 <div> 元素，弹出提示信息: if ($("p").parent().is("div")) \{ alert("p 的父元素是 div");

小咪咪/ 2022年05月23日 12:44/ 0 赞/ 219 阅读

相关类选择器与元素选择器的区别

类选择器：类选择器用于将样式规则与附带class属性的元素匹配，其中该class属性的值为类选择器中指定的值。元素选择器：元素选择器是最常见的 CSS 选择器，即，

Dear 丶/ 2022年02月25日 07:28/ 0 赞/ 324 阅读

相关 CSS3选择器的使用（基础选择器、复合选择器、伪类选择器、属性选择器和伪元素选择器）

CSS3选择器的使用（基础选择器、复合选择器、伪类选择器、属性选择器和伪元素选择器） CSS选择器的使用 1. CSS基础选择器的使用 2

缺乏、安全感/ 2021年10月30日 01:01/ 0 赞/ 500 阅读