JavaScript对象的值返回null

我正在学习JavaScript对象，并为自己设置了一个创建滑块的小项目。值得注意的是，我来自jQuery背景，因此我的问题可能在于我选择元素的方式。我有以下HTML：

<div class="slider-viewport" id="mySlider">
    <div class="slides-container">
        <div class="slide">1</div>

        <div class="slide">2</div>

        <div class="slide">3</div>
    </div>
</div>

当我查看Chrome开发工具时，我得到以下信息：

[object HTMLDivElement] .slides-container
objects.js:16 NodeList[0]
objects.js:18 Uncaught TypeError: Cannot set property 'color' of undefined

第一个console.dir似乎返回了我要查找的元素。我不确定第二个console.dir返回了什么，也不确定为什么会出现未定义的错误。你能告诉我哪里出了问题吗

---

非常感谢。

querySelectorAll

和

querySelector

获取字符串参数（css选择器）：

期望字符串作为参数作为CSS选择器进行计算。不能用字符串连接，这是第一个问题。第二个是

querySelectorAll（）

返回一个值，正如您在控制台上看到的那样。问题是列表是空的

您可能想尝试以下方法：

var slider = {
    sliderViewport: document.getElementById('mySlider')
}

slider.slidesContainer: slider.sliderViewport.querySelectorAll('.slides-container');

---

我没有对它进行测试，但它应该按照说明工作。

slider.slidecontainer[0].style.color

。SlideContainer是节点列表，而不是node@degr我看不出这里有什么好笑的。您可能是一位javascript大师，对这一点嗤之以鼻，但您的73个代表点并没有这样说。

var slider = {
            sliderViewport: document.querySelector('#mySlider'),
            slidesContainer: document.querySelector('#mySlider .slides-container')
        };

var slider = {
    sliderViewport: document.getElementById('mySlider')
}

slider.slidesContainer: slider.sliderViewport.querySelectorAll('.slides-container');