Question

我正在学习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>

以及以下JavaScript：

(function(window, document, undefined){

    // code that should be taken care of right away

    window.onload = init;

    function init(){
        // the code to be called when the dom has loaded

        var slider = {
            sliderViewport: document.getElementById('mySlider'),
            slidesContainer: document.querySelectorAll(this.sliderViewport + ' .slides-container')
        };

        console.dir(slider.sliderViewport + ' .slides-container');
        console.dir(slider.slidesContainer);

        //Just testing to see if I can do something
        slider.slidesContainer.style.color = 'blue';
    }

})(window, document, undefined);

当我查看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返回的是什么，以及为什么我得到一个未定义的错误。请问我能指导我出错的地方吗？

非常感谢提前。

Answer 1

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

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

Answer 2

querySelectorAll()期望将字符串作为参数来评估为CSS选择器。你无法用字符串连接HtmlDivElement，这是你的第一个问题。第二个是querySelectorAll()返回NodeList，如您在控制台上看到的那样。问题是列表是空的。

你可能想试试这个：

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

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

我没有测试它，但它应该按照here所述的方式工作。

JavaScript对象的值返回null

2 个答案: