Как найти элемент из html с внешним HTML результатом? - PullRequest
0 голосов
/ 19 января 2020

Я хочу найти элемент из html с внешним HTML. Я не хочу найти элемент с идентификатором или классом. У меня будет только html в виде строки. Я хочу алгоритм, который будет принимать raw html в качестве строки и находить его соответствующим образом.

Обратите внимание на код, который я добавил для этого нового класса html. Но не просто хочу добавить новый класс, просто хочу найти элемент, и это моя главная цель.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script>
function findelement() {
  var element = document.getElementById("nestedh3").outerHTML;
  searchelement(element)
}
function searchelement(elementhtml) {
  //serch the whole content on the this html to find that element
  element = 
  //
  element.classList.add("mystyle");
}
</script>
<style>
.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}
</style>
</head>
<body>
    <div>
        <h1>This is a Heading</h1>
        <p>This is a paragraph.</p>
        <div>
            <h3>Nested h3</h3>
        </div>
        <div>
            <div>
                <p>This is a nested paragraph</p>
            </div>
            <div>
                <h2>Nested h2</h2>
                <div id='nestedh3'>
                    <h3 id='nh3'>Nested h3</h3>
                </div>
            </div>
            <button onclick="findelement()">find element</button>
            <div>
                <p>This is a nested paragraph</p>
            </div>
        </div>

    </div>
</body>
</html>

1 Ответ

3 голосов
/ 19 января 2020

Вы можете попробовать что-то вроде этого:

function searchelement(elementhtml){
 [...document.querySelectorAll("*")].forEach((ele)=>{
   if(ele.outerHTML == elementhtml){
     ele.classList.add("mystyle");
   }
 });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...