Как получить элемент по XPATH в JavaScript?

#javascript #html #dom #xpath

Вопрос:

У меня очень простой код. Он просто меняет стиль кнопки при нажатии. Он отлично работает при использовании getElementById , но я хочу сделать это XPATH так. Я новичок в JavaScript. Что я делаю не так и как я могу этого добиться?

Код:

 <!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to change the layout of this paragraph</p>

<button onclick="myFunction()">Click Me!</button>

<script>
function myFunction() {
  let x = document.getElementByXpath("//html[1]/body[1]/button[1]");
  x.style.fontSize = "25px"; 
  x.style.color = "red"; 
}
</script>

</body>
</html>

 

Комментарии:

1.нет document.getElementByXpath developer.mozilla.org/en-US/docs/Web/API/Document/evaluate

2. И есть намного лучшие способы сделать это без XPATH.

Ответ №1:

Посмотрите на document.evaluate()

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

function myFunction() {
  let x = getElementByXpath("//html[1]/body[1]/button[1]");
  x.style.fontSize = "25px"; 
  x.style.color = "red"; 
} 
 <p id="demo">Click the button to change the layout of this paragraph</p>

<button onclick="myFunction()">Click Me!</button> 

Комментарии:

1. Привет! Спасибо за это. Это сработало! Тем не менее, у меня есть вопрос. Что .singleNodeValue делать? Можете ли вы объяснить код?

2. @Abhaysalvi Однозначное значение