// html tree
// -------------УСЛОВИЕ-------------
{/*
Enter a data please:
OK
Cancel
*/}
{/* Сделайте декларативную JSON-структуру для тэгов выше, в которой:
- каждый тэг будет объектом
- имя тэга будет полем tagName
- вложенные тэги будут в поле subTags
- текст в тэге будет в поле text
- набор аттрибутов тэга будет в поле attrs.
*/}
{/* Например для обычной таблицы 2x2 это будет выглядеть следующим образом: */}
{/*
var table = {
tagName: 'table',
attrs: {
border: "1",
},
subTags: [
{
tagName: 'tr',
subTags: [
{
tagName: "td",
text: "1x1",
},
{
tagName: "td",
text: "1x2",
},
]
},
{
tagName: 'tr',
subTags: [
{
tagName: "td",
text: "2x1",
},
{
tagName: "td",
text: "2x2",
},
]
}
]
} */}
{/* Выведите значения текста во второй кнопке, используя . и [].
Выведите значение атрибута id во втором input, используя . и []. */}
// -------------РЕШЕНИЕ-------------
const body = {
tagName: "body",
subTags: [
{
tagName: "div",
subTags:
[
{
tagName: "span",
text: "Enter a data please:"
},
{
tagName: "br"
},
{
tagName: "input",
attrs: {
type: "text",
id: "name"
}
},
{
tagName: "input",
attrs: {
type: "text",
id: "surname"
}
}
]
},
{
tagName: "div",
subTags:
[
{
tagName: "button",
attrs: {
id: "ok"
},
text: "OK"
},
{
tagName: "button",
attrs: {
id: "cancel"
},
text: "Cancel"
}
]
}
]
}
const task01block = document.createElement('div');
task01block.style = "border: 2px solid green; border-radius:5px; margin-bottom:10px; padding:10px";
const task01title = document.createElement('h2');
task01title.innerText = 'Task-01 html tree';
const elem1 = document.createElement('p');
const elem2 = document.createElement('p');
root.appendChild(task01block);
task01block.appendChild(task01title);
elem1.innerText=body.subTags[1].subTags[1].text;
task01block.appendChild(elem1);
elem2.innerText = body.subTags[0].subTags[3].attrs.id;
task01block.appendChild(elem2);