document.querySelectorAll을 통해 알 수없는 요소 가져 오기

Question

document.querySelectorAll을 통해 브라우저 및 JSDOM에서 알 수없는 모든 요소를 ​​가져 오려고합니다.

나는 확인 후 .toString을 사용하려고했습니다 그렇다면 같은 HTMLUnknownElement 등의 요소 레지스터 :

if (node.toString() === "[object HTMLUnknownElement]") ...

그러나 문제의 요소가 이름에 - 등이있는 경우이 작동하지 않습니다 <test-element>. HTML 사용자 지정 요소와의 호환성을 가정합니다. 지금, 나는 단순히 내가 알고있는 모든 태그 :not 's의 부하 모든 요소를 ​​나열하고있어, 그러나 이것은 해킹 같은 느낌 : document.querySelectorAll("*:not(html):not(head):not(link):not(meta):not(base):not(script):not(style):not(title):not(body):not(address):not(article):not(aside):not(footer):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(header):not(hgroup):not(nav):not(section):not(blockquote):not(cite):not(dd):not(dl):not(div):not(dt):not(figcaption):not(figure):not(hr):not(li):not(ol):not(ul):not(menu):not(main):not(p):not(pre):not(a):not(abbr):not(b):not(bdi):not(bdo):not(br):not(code):not(data):not(time):not(dfn):not(em):not(i):not(kbd):not(mark):not(q):not(rp):not(ruby):not(rt):not(rtc):not(rb):not(s):not(del):not(ins):not(samp):not(small):not(span):not(strong):not(sub):not(sup):not(u):not(var):not(wbr):not(area):not(map):not(audio):not(source):not(img):not(track):not(video):not(embed):not(object):not(param):not(picture):not(canvas):not(noscript):not(caption):not(table):not(col):not(colgroup):not(tbody):not(tr):not(td):not(tfoot):not(th):not(thead):not(button):not(datalist):not(option):not(fieldset):not(label):not(form):not(input):not(legend):not(meter):not(optgroup):not(select):not(output):not(progress):not(textarea):not(details):not(dialog):not(menuitem):not(summary):not(content):not(slot):not(element):not(shadow):not(template):not(acronym):not(applet):not(basefont):not(font):not(big):not(blink):not(center):not(command):not(dir):not(frame):not(frameset):not(image):not(isindex):not(keygen):not(listing):not(marquee):not(multicol):not(nextid):not(noembed):not(plaintext):not(spacer):not(strike):not(tt):not(xmp)")

는 사람이 더 좋은 방법을 알고 있나요

에 이 작업을 수행? 이 도움이 될 것입니다

Answer 1

희망,

function isUnknownElement(element) { 
 
    return element.constructor.name === 'HTMLUnknownElement'; 
 
} 
 

 
function identifyUnknownElements(selector) { 
 
    const elements = document.querySelectorAll(selector); 
 
    const unknownElements = []; 
 

 
    for (let i = 0, length = elements.length; i < length; i++) { 
 

 
    if (/-/g.test(elements[i].nodeName)) { 
 
     const temp = document.createElement(elements[i].nodeName.replace(/-+/, "")); 
 
     if (isUnknownElement(temp)) { 
 
     elements[i].classList.add('unknown-element'); 
 
     unknownElements.push(elements[i]); 
 
     } 
 
     continue; 
 
    } 
 
    if (isUnknownElement(elements[i])) { 
 
     elements[i].classList.add('unknown-element'); 
 
     unknownElements.push(elements[i]); 
 
    } 
 

 
    } 
 

 
    return unknownElements; 
 
} 
 

 
console.log(identifyUnknownElements('*'))

<temp></temp> 
 
<test-element></test-element>