关于#javascript#的问题：图一为视频效果，图二是我的运行效果

根据视频学习，控制台效果与视频效果不一样，求解？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>H5新增的“获取”方法（Dom）</title>
    </head>
    <body>
        <div class="box">盒子1</div>
        <div class="box">hezi二</div>
        <div id="nav">
            <ul>导航
                <li>首页</li>
                <li>产品</li>
            </ul>    
        </div>
        
        <!-- 选择器 -->
        <script type="text/javascript">
        // querySelector指定选择第一个
        var firstBox = document.querySelector('.box')  
        console.log(firstBox);        
        
        var li = document.querySelector('li');
        console.log(li);            
        </script>

    </body>
</html>

![img](运行结果及报错内容 https://img-mid.csdnimg.cn/release/static/image/mid/ask/759027392856193.jpg "#left")

![img](我的解答思路和尝试过的方法 https://img-mid.csdnimg.cn/release/static/image/mid/ask/23774739285613.jpg "#left")

图一为视频效果，图二是我的运行效果，这个差异重要吗？为何会产生这样的差异？

不重要，这个是因为li默认样式，前面有这个黑色点，想要和视频一样，加个样式就行了

不重要