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);