实例演示二个获取元素的api 2. 实例演示dom常用的遍历方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1. 实例演示二个获取元素的api 2. 实例演示dom常用的遍历方法</title>
</head>
<body>
    <ul class="test">
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
        <li>test5</li>
    </ul>
    <script>
        // 拿到ol下面的所有元素
        const test1 = document.querySelectorAll('.test > *')
        // 拿到第一个li元素test1
        test2 = document.querySelector('test > *')
        let first = test.firstElementChild
        first.style.color = 'red'
           // 遍历
        ;[...test.children].forEach(items => (items.style.border = '1px solid red'))
    </script>
</body>
</html>

相关文章