스크립트가 페이지에없는 요소를 반환합니다.

Question

나는이 경로를 사용하여 el 경로를 반환합니다. 그러나 때때로이 함수는 페이지에 존재하지 않는 요소를 추가합니다. 이 경우 :

<table> 
<tr><td></td><tr> 
</table> 

경로는 table > tbody > tr > td입니다. 이 기능의 문제점은 무엇입니까? 문제이 tbody 요소 인 경우

function getDomPath(el) { 
     element = el; 
     if (!(el instanceof Element)) return; 
     var path = []; 
     while (el.nodeType === Node.ELEMENT_NODE && el.id != "jobs") { 
      var selector = el.nodeName.toLowerCase(); 
      if (el.id) { 
       selector += '#' + el.id; 
      } 
      else if(el.className){ 
       console.log(el.className); 
       selector += '.' + el.className; 
      } 
      else { 
       var sib = el, nth = 1, count = 1; 
       while (sib.nodeType === Node.ELEMENT_NODE && (sib = sib.previousSibling) && nth++){ 
        console.log(Node.ELEMENT_NODE) 
        console.log(el.previousSibling); 
        console.log(el); 
        count += $(el).prevAll().size(); 
       }; 
       selector += ":nth-child("+count+")"; 
      } 
      path.unshift(selector); 
      el = el.parentNode; 
     } 
     return path.join(" > "); 
    }; 

Answer 1

, 당신은 그것을하지만 브라우저 자체를 추가하는 함수 아니라고 알고 있어야합니다. 크롬에서 파이어 버그 또는 웹 개발자 도구를 사용하여 페이지를 확인하십시오.

this SO answer을 살펴보십시오.

Answer 2

함수에는 아무런 문제가 없습니다. 존재하는 모든 요소를 ​​올바르게 사용합니다.

table 요소에는 행이있을 경우 항상 tbody 요소가 있습니다. 마크 업에 태그가 없더라도 브라우저는 tbody 요소를 추가합니다.

마크 업이 불완전하거나 선택 태그를 생략 한 경우에도 브라우저는 완전한 요소를 생성합니다. 예를 들어 첫 번째 행을 끝내려고 할 때 </td> 대신 <td>을 사용했기 때문에 브라우저는 표에 두 개의 행을 만듭니다. 암시 적으로 첫 번째 행을 끝내고 새 행을 시작하며 암시 적으로 끝냅니다. 테이블의 요소는 마치 마크 업을 다음과 같이 작성한 것처럼 끝납니다.