DOM操作：元素选取与遍历-优快云博客

本文链接：https://blog.youkuaiyun.com/yuanxiaoh/article/details/131282434

DOM树：文档对象模型（document object model）

文档：一个页面就是一个文档，是使用document表示的

节点：网页中所有的内容，在dom树中都是节点（标签、属性、文本、注释等等）是使用node表示

标签节点：网页在所有的标签，也可以叫元素节点，是使用element表示

1.使用id获取元素

// getElementById

// 获取元素时，区分id大小写

document.getElementById('box')//通过id获取元素

// var box = document.getElementById('box')

// alert(typeof box);

document.getElementById('bigBox')

console.log(bigBox);

console.dir(bigBox);//console.dir() 是一种在控制台中查看指定 JavaScript 对象的所有属性的方法

2.通过标签名获取元素

// 通过标签名获取元素 getElementsByTagName 获取到的对象是一个伪数组，可以通过索引获取每一个元素

// var divs = document.getElementsByTagName('div')

// console.log(divs[0])

// for (var i = 0; i < divs.length; i++) {

// // console.log(divs[i]);

// }

// 如果通过getElementsByTagName拿到的元素，即使只有一个元素，也是以伪数组的形式返回

// 想拿到里层元素可以通过父元素获取

3.H5提供的方式（类名）

<!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>Document</title>
</head>

<body>
    <div class="box">box1</div>
    <div class="box">box2</div>
    <div class="box">box3</div>
    <ul>
        <li id="li">li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <script>
        // 通过类名获取元素  通过类名获取到的是伪数组   类目前面不需要加.
        var boxs = document.getElementsByClassName('box')
        console.log(boxs);
        // querySelector 返回指定选择器的第一个元素  如果获取类名  需要类名前加.
        var box = document.querySelector('.box')
        var li = document.querySelector('li')
        var lis = document.querySelector('#li')
        //   通过id获取时需要加#
        // console.log(box);
        // console.log(lis);
        //  querySelectorAll  返回指定选择器打的所有元素集合
        var boxs = document.querySelectorAll('.box')
        console.log(boxs);
        
    </script>
</body>

</html>