Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {

        });
    </script>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio tempora distinctio alias doloremque at non quas corrupti ex, et dignissimos, ullam natus eius earum fugit provident, quos beatae atque illo.</p>

    <ul id="list">
        <li class="first"><a href="https://www.google.com">item 1</a></li>
        <li class="second"><a href="https://www.google.com">item 2</a></li>
        <li class="third"><a href="https://www.google.com">item 3</a></li>
        <li class="fourth"><a href="https://www.google.com">item 4</a></li>
    </ul>
    <input type="text" value="hello">
    <input type="email" value="[email protected]">
    <input type="email" value="[email protected]">
    <script>
        let item = document.getElementsByClassName('first')[0];
        item.style.background = '#AA00AA';

        let li = document.getElementsByTagName('li');
        for(let i = 0; i < li.length; i++){
            li[i].style.fontSize = '42px';
            li[i].style.border = 'solid 5px #00CC11';
            // li[i].style['border'] = 'solid 5px #00CC11';
        }

        let spisyk = document.getElementById('list');
        spisyk.style.textAlign = 'center';
        // spisyk.style['text-align'] = 'center';

        let anchor = document.querySelectorAll('li.third>a')[0];
        anchor.style.textDecoration = 'line-through';

        let pole = document.querySelector('input[type=email]:nth-of-type(3)');
        console.log(pole);
        pole.value = '[email protected]';
        pole.style.padding = "24px 48px";
    </script>
</body>
</html>