Olga_Brekhuntsova
/
homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
							// html tree

// -------------УСЛОВИЕ-------------
{/* <body>
        <div>
            <span>Enter a data please:</span>
            <br/>
            <input type='text' id='name'>
            <input type='text' id='surname'>
        </div>
        <div>
            <button id='ok'>OK</button>
            <button id='cancel'>Cancel</button>
        </div>
        </body> */}
    
{/* Сделайте декларативную JSON-структуру для тэгов выше, в которой:
- каждый тэг будет объектом
- имя тэга будет полем tagName
- вложенные тэги будут в поле subTags
- текст в тэге будет в поле text
- набор аттрибутов тэга будет в поле attrs.
         */}
{/* Например для обычной таблицы 2x2 это будет выглядеть следующим образом: */}
{/* <table border='1'>
    <tr>
        <td>
            1x1
        </td>
        <td>
            1x2
        </td>
    </tr>
    <tr>
        <td>
            2x1
        </td>
        <td>
            2x2
        </td>
    </tr>
        </table>
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);