[JS] XPath로 element 찾기

alirz-pixel·2022년 8월 24일

Javascript

목록 보기

1/1

아래의 함수를 정의해줌으로써 XPath로 element를 찾을 수 있다.

function getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

유용한 옵션

코드 내의 XPathResult에 정의된 상수값을 변경함으로써 다양한 옵션으로 찾을 수 있다.

STRING_TYPE

XPathResult.STRING_TYPE 으로 지정할시 검색된 element에 대한 문자열을 추출할 수 있다.

function getElementStringByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.STRING_TYPE, null).stringValue
}

ORDERED_NODE_SNAPSHOT_TYPE

입력한 xpath와 일치하는 node들에 대해서 snapshot 타입으로 반환해준다.
(앞에 붙은 ORDERED 는 document html에 나온 순서를 따른다는 것이다.)

function getElementsByXPath(xpath) {
    let results = [];
    let query = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
    for (let i = 0, length = query.snapshotLength; i < length; ++i) {
        results.push(query.snapshotItem(i));
    }
    return results;
}

원본 링크

XPathResult mdn web docs

alirz-pixel