JavaScript XPath

document.getElementsByXPath = function (expression, parentElement){
  console.log(expression);
  var elements = [];
  var xpathResult = document.evaluate(
    expression,
    parentElement || document,
    null,
    XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
    null
  );
  for(var i =0,l=xpathResult.snapshotLength;i<l;i++){
    elements.push(xpathResult.snapshotItem(i));
  }
  console.log(elements);
  return elements;
}


window.addEventListener('load', function(event) {

  document.getElementsByXPath('//*[@id="ul1"]/li').forEach(function(ele, i){
    ele.textContent = ele.textContent + ':' + i;
  });
  

//完全一致
  document.getElementsByXPath('//*/li[text()="kkk"]').forEach(function(ele, i){
    ele.textContent = ele.textContent + ':' + 'text()';
  });
//部分一致(文字列を含む)
  document.getElementsByXPath('//*/li[contains(text(), "j")]').forEach(function(ele, i){
    ele.textContent = ele.textContent + ':' + 'contains()';
  });

//親要素へ
  document.getElementsByXPath('//*/li[contains(text(), "j")]/..').forEach(function(ele, i){
    ele.setAttribute('class', 'parent-selected');
  });


//親要素から、また子要素へ
  document.getElementsByXPath('//*/li[contains(text(), "j")]/../li[text()="nnn"]').forEach(function(ele, i){
    ele.textContent = ele.textContent + ':' + 'nnn';
  });
});

//MDN Document.evaluate()
//https://developer.mozilla.org/ja/docs/Web/API/Document/evaluate#Result_types

//document.getElementsByXPath
//https://www.softel.co.jp/blogs/tech/archives/2067

//XPath Syntax
//https://www.w3schools.com/xml/xpath_syntax.asp

//XPathとCSSセレクター対応表
//https://qiita.com/niusounds/items/8932790c77d781aa8993

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-xpath/