У меня есть html страница с некоторыми элементами, которые помещаются как дерево (что-то вроде категории -> подкатегория -> элемент).
<section class="category">
<div class="name"></div>
<div class="description"></div>
<div class="subcategory">
<div class="name"></div><div class="description"></div>
<div class="element">
<div class="name"></div>
</div>
</div>
<div class="subcategory">
<div class="name"></div>
<div class="description"></div>
<div class="element">
<div class="name"></div>
</div>
</div>
</section>
Я хотел бы получить элементы и поместить их в объект класс с такой же структурой:
export class category {
constructor(_name, _description){
this.name = _name;
this.description = _description;
this.subcategories = []
}
}
export class subcategory{
constructor(_name, _description){
this.name = _name;
this.description = _description;
this.elements = []
}
}
export class element{
constructor(_name){
this.name = _name
}
}
Я пробовал с page. $$ ('section'), но с этим я получил только элемент html первого уровня (section), и не дети. Если я делаю page. $$ («подкатегория»), я не могу управлять основной структурой деталей, потому что у меня нет ссылки из html на «категорию» и «подкатегорию». Я должен получить вещи в стиле родитель-потомок, потому что я должен поместить их в этот класс объектов.
Я не знаю, смогу ли я, но я подумал сделать так:
- Получить элемент первого уровня
- Получить дочерние узлы первого уровня затем получаем элементы второго уровня
- получаем дочерние узлы второго уровня; затем получаем элементы третьего уровня
все, что я пробовал, не сработало.