JavaScript中定位自定义标签<sdf-carousel-item>的ID失败，求解决方法

嗨，别急，我来帮你梳理下问题出在哪～

你当前的写法有个关键的逻辑误区：你用carouselModal.querySelector("#first")是在**的子元素里查找id为first的元素**，但实际上id="first"就是这个标签自身的属性呀！它的子元素里根本没有带#first的元素，所以自然会输出“找不到”的日志。

给你几个可行的解决思路： #

• 最直接的方式：直接通过ID选择器定位
  因为HTML规范里要求页面内的ID是唯一的，所以你可以直接跳过父级定位，一步到位拿到目标元素：

  const carouselSlideOne = document.querySelector("#first");
  
  if (carouselSlideOne) {
    console.log("carousel slide one is here");
  } else {
    console.log("carousel slide one not here.")
  }
  

• 如果需要先获取sdf-carousel-item再验证ID
  如果你确实需要先拿到sdf-carousel-item元素，再判断它是不是目标的#first，可以直接检查元素的id属性：

  const carouselModal = document.querySelector("sdf-carousel-item");
  
  if (carouselModal && carouselModal.id === "first") {
    console.log("carousel slide one is here");
  } else {
    console.log("carousel slide one not here.")
  }
  

  （这里加了carouselModal &&是避免页面中没有sdf-carousel-item时触发报错）

• 精准匹配标签+ID的选择器
  如果你想明确指定“找标签是sdf-carousel-item且ID为first的元素”，可以用组合选择器：

  const carouselSlideOne = document.querySelector("sdf-carousel-item#first");
  
  if (carouselSlideOne) {
    console.log("carousel slide one is here");
  } else {
    console.log("carousel slide one not here.")
  }
  

新手小提醒： #

element.querySelector(selector)的作用范围是该元素的子树（子元素、孙元素等），不会匹配元素自身。如果要判断元素自身的属性，直接访问元素的属性（比如element.id）就可以啦～

备注：内容来源于stack exchange，提问作者Schneider G