JavaScript의 DOM 요소에서 보다 정확한 CSS 경로를 생성하는 방법은 무엇입니까?

DOM 요소에서 정확한 CSS 경로 생성

JavaScript에서는 DOM 요소에서 CSS 경로를 생성하는 것이 일반적인 작업입니다. 이 문제를 해결하기 위해 인기 있는 함수인 cssPath가 존재합니다. 그러나 n번째 하위 선택기와 같은 중요한 세부 정보가 부족한 경로가 생성되는 경우가 많습니다.

제공된 코드는 해결책을 제공합니다.

<code class="js">var cssPath = function(el) {
  if (!(el instanceof Element)) return;
  var path = [];
  while (el.nodeType === Node.ELEMENT_NODE) {
    var selector = el.nodeName.toLowerCase();
    if (el.id) {
      selector += '#' + el.id;
      path.unshift(selector);
      break;
    } else {
      var sib = el, nth = 1;
      while (sib = sib.previousElementSibling) {
        if (sib.nodeName.toLowerCase() == selector)
          nth++;
      }
      if (nth != 1)
        selector += ":nth-of-type(" + nth + ")";
    }
    path.unshift(selector);
    el = el.parentNode;
  }
  return path.join(" > ");
};</code>

원본 기능에 대한 개선 사항:

• 조기 종료 방지: 요소가 아닌 노드를 만나면 원래 기능이 중지되어 잘못된 경로가 발생합니다. 개선된 버전에서는 정확도 향상을 위해 탐색을 계속합니다.
• 명확성 강조: 일반 :nth-child() 대신 nth-of-type() 선택기를 사용하면 생성된 경로가 다음과 같이 됩니다. 더 정확하고 사람이 읽을 수 있습니다.
• ID가 있는 상위 요소에서 중지: 향상된 기능은 할당된 ID가 있는 첫 번째 상위 요소를 발견하면 중지되어 경로를 간소화하고 가독성을 높입니다.

위 내용은 JavaScript의 DOM 요소에서 보다 정확한 CSS 경로를 생성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!