Получите более глубокий элемент DOM NODE - PullRequest
Новая
       1

Получите более глубокий элемент DOM NODE

2 голосов
/ 07 мая 2019

Я пытаюсь получить более глубокий элемент внутри этой структуры HTML: 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
<div id="container">  
<div class="menu">  
    <ul>
        <li><a href="#h" >Home</a></li>
        <li><a href="#f" id="current">Fruit</a>
            <ul>
                <li><a href="#a">Apples</a></li>
                <li><a href="#o">Oranges</a></li>
                <li><a href="#b">Bananas</a></li>
                <li><a href="#p">Pears</a></li>
            </ul>
        </li>
        <li><a href="/about.html">About</a>
            <ul>
                <li><a href="#c">Company Info</a></li>
                <li><a href="#l">Locations</a></li>
                <li><a href="#f">FAQ</a></li>
            </ul>
        </li>
        <li><a href="/contact/contact.php">Contact Us</a></li>
    </ul>
</div><!--closing div class for "menu"-->  
</div><!--closing div for "container"-->  
</body>

</html>

Глядя на структуру выше, более глубокий элемент - <a href="#a">Apples</a>, чтобы попытаться получить этот элемент, я использую этотcode: 

var nodes = document.querySelectorAll('*');
var first = nodes[0];
var last = nodes[nodes.length- 1];
return last.innerHTML;

Проблема в том, что приведенный выше код возвращает значение 'Contact Us' вместо 'Apples' или 'Pears' (более глубокие элементы), которые являются более глубокими элементами структурыузлы DOM.

Как я могу получить эти элементы?

Ответы [ 4 ]

3 голосов
/ 07 мая 2019

Есть много способов сделать это.Вы можете думать об элементе с наибольшим количеством родителей.

Таким образом, вы можете сделать это довольно хакерским способом, например: 

var nodes, lastNodes;
var parents = [];
do {
    lastNodes = nodes;
    nodes = document.querySelectorAll(parents.join("* > ") +  '*');
    parents.push("");
} while(nodes.length > 0);
console.log(lastNodes);

Это попытается получить узлыу которых есть родитель (* > *), затем попытается получить узлы, у которых есть родитель, у которого есть родитель (* > * > *), а затем у узлов, у которых есть родитель, у которого есть родитель, у которого есть родитель (* > * > * > *)и так далее ...

Остановится, когда не будет получено ни одного узла, и запишет последние полученные узлы, которые будут узлами с самыми низкими родителями.

0 голосов
/ 07 мая 2019

Попробуйте эту функцию JS: 

var DeepChildNode = (element,nodeNomber,array)=>{
    if(element.hasChildNodes()){
        nodeNomber++;
        element.childNodes.forEach((elem)=>{
            DeepChildNode(elem,nodeNomber,array);
        });
    }else{
        array.push({'element':element,'numberNodes':nodeNomber});
    }
}

var nodeNomber = 1;
var element = document.getElementById('idElement');
var array = [];
DeepChildNode(element,nodeNomber,array);

array.sort((a,b)=>{b.numberNodes-a.numberNodes});
console.table(array);
0 голосов
/ 07 мая 2019

Используйте строку выбора запроса, например, так: 

var apples = document.querySelector(".menu ul ul:first-of-type a");
console.log(apples);
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Title of the document</title>
</head>

<body>
  <div id="container">
    <div class="menu">
      <ul>
        <li><a href="#h">Home</a></li>
        <li><a href="#f" id="current">Fruit</a>
          <ul>
            <li><a href="#a">Apples</a></li>
            <li><a href="#o">Oranges</a></li>
            <li><a href="#b">Bananas</a></li>
            <li><a href="#p">Pears</a></li>
          </ul>
        </li>
        <li><a href="/about.html">About</a>
          <ul>
            <li><a href="#c">Company Info</a></li>
            <li><a href="#l">Locations</a></li>
            <li><a href="#f">FAQ</a></li>
          </ul>
        </li>
        <li><a href="/contact/contact.php">Contact Us</a></li>
      </ul>
    </div>
    <!--closing div class for "menu"-->
  </div>
  <!--closing div for "container"-->
</body>

</html>
0 голосов
/ 07 мая 2019

попробуй 

document.querySelector('[href="#a"]').innerText


let t = document.querySelector('[href="#a"]').innerText;
console.log(t);
<div id="container">  
<div class="menu">  
    <ul>
        <li><a href="#h" >Home</a></li>
        <li><a href="#f" id="current">Fruit</a>
            <ul>
                <li><a href="#a">Apples</a></li>
                <li><a href="#o">Oranges</a></li>
                <li><a href="#b">Bananas</a></li>
                <li><a href="#p">Pears</a></li>
            </ul>
        </li>
        <li><a href="/about.html">About</a>
            <ul>
                <li><a href="#c">Company Info</a></li>
                <li><a href="#l">Locations</a></li>
                <li><a href="#f">FAQ</a></li>
            </ul>
        </li>
        <li><a href="/contact/contact.php">Contact Us</a></li>
    </ul>
</div><!--closing div class for "menu"-->  
</div><!--closing div for "container"-->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...