Javascript 未捕获类型错误：无法读取属性'；查询选择器'；与html一起使用时为null

我正在开发一个主要是单色的时尚网站。这是我的script.js文件，返回时出现错误：UncaughtTypeError:无法读取null的属性'querySelector'，但我无法确定它出错的原因。我正在尝试创建一个功能滑块，当用户滚动到另一个屏幕时，它将背景滑动到不同的图像

script.js

class Slider {
    constructor() {
        this.bindAll()

        this.vert = `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
    `

        this.frag = `
    varying vec2 vUv;

    uniform sampler2D texture1;
    uniform sampler2D texture2;
    uniform sampler2D disp;

    uniform float dispPower;
    uniform float intensity;

    uniform vec2 size;
    uniform vec2 res;

    vec2 backgroundCoverUv( vec2 screenSize, vec2 imageSize, vec2 uv ) {
      float screenRatio = screenSize.x / screenSize.y;
      float imageRatio = imageSize.x / imageSize.y;
      vec2 newSize = screenRatio < imageRatio 
          ? vec2(imageSize.x * (screenSize.y / imageSize.y), screenSize.y)
          : vec2(screenSize.x, imageSize.y * (screenSize.x / imageSize.x));
      vec2 newOffset = (screenRatio < imageRatio 
          ? vec2((newSize.x - screenSize.x) / 2.0, 0.0) 
          : vec2(0.0, (newSize.y - screenSize.y) / 2.0)) / newSize;
      return uv * screenSize / newSize + newOffset;
    }

    void main() {
      vec2 uv = vUv;

      vec4 disp = texture2D(disp, uv);
      vec2 dispVec = vec2(disp.x, disp.y);

      vec2 distPos1 = uv + (dispVec * intensity * dispPower);
      vec2 distPos2 = uv + (dispVec * -(intensity * (1.0 - dispPower)));

      vec4 _texture1 = texture2D(texture1, distPos1);
      vec4 _texture2 = texture2D(texture2, distPos2);

      gl_FragColor = mix(_texture1, _texture2, dispPower);
    }
    `

        this.el = document.querySelector('.js-slider')
        this.inner = this.el.querySelector('.js-slider__inner')
        this.slides = [...this.el.querySelectorAll('.js-slide')]
        this.bullets = [...this.el.querySelectorAll('.js-slider-bullet')]

        this.renderer = null
        this.scene = null
        this.clock = null
        this.camera = null

        this.images = [
            'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg1.jpg',
            'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg2.jpg',
            'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg3.jpg'
        ]

        this.data = {
            current: 0,
            next: 1,
            total: this.images.length - 1,
            delta: 0
        }

        this.state = {
            animating: false,
            text: false,
            initial: true
        }

        this.textures = null

        this.init()
    }

    bindAll() {
        ['render', 'nextSlide']
            .forEach(fn => this[fn] = this[fn].bind(this))
    }

    setStyles() {
        this.slides.forEach((slide, index) => {
            if (index === 0) return

            TweenMax.set(slide, { autoAlpha: 0 })
        })

        this.bullets.forEach((bullet, index) => {
            if (index === 0) return

            const txt = bullet.querySelector('.js-slider-bullet__text')
            const line = bullet.querySelector('.js-slider-bullet__line')

            TweenMax.set(txt, {
                alpha: 0.25
            })
            TweenMax.set(line, {
                scaleX: 0,
                transformOrigin: 'left'
            })
        })
    }

    cameraSetup() {
        this.camera = new THREE.OrthographicCamera(
            this.el.offsetWidth / -2,
            this.el.offsetWidth / 2,
            this.el.offsetHeight / 2,
            this.el.offsetHeight / -2,
            1,
            1000
        )

        this.camera.lookAt(this.scene.position)
        this.camera.position.z = 1
    }

    setup() {
        this.scene = new THREE.Scene()
        this.clock = new THREE.Clock(true)

        this.renderer = new THREE.WebGLRenderer({ alpha: true })
        this.renderer.setPixelRatio(window.devicePixelRatio)
        this.renderer.setSize(this.el.offsetWidth, this.el.offsetHeight)

        this.inner.appendChild(this.renderer.domElement)
    }

    loadTextures() {
        const loader = new THREE.TextureLoader()
        loader.crossOrigin = ''

        this.textures = []
        this.images.forEach((image, index) => {
            const texture = loader.load(image + '?v=' + Date.now(), this.render)

            texture.minFilter = THREE.LinearFilter
            texture.generateMipmaps = false

            if (index === 0 && this.mat) {
                this.mat.uniforms.size.value = [
                    texture.image.naturalWidth,
                    texture.image.naturalHeight
                ]
            }

            this.textures.push(texture)
        })

        this.disp = loader.load('https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/rock-_disp.png', this.render)
        this.disp.magFilter = this.disp.minFilter = THREE.LinearFilter
        this.disp.wrapS = this.disp.wrapT = THREE.RepeatWrapping
    }

    createMesh() {
        this.mat = new THREE.ShaderMaterial( {
            uniforms: {
                dispPower: { type: 'f', value: 0.0 },
                intensity: { type: 'f', value: 0.5 },
                res: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
                size: { value: new THREE.Vector2(1, 1) },
                texture1: { type: 't', value: this.textures[0] },
                texture2: { type: 't', value: this.textures[1] },
                disp: { type: 't', value: this.disp }
            },
            transparent: true,
            vertexShader: this.vert,
            fragmentShader: this.frag
        })

        const geometry = new THREE.PlaneBufferGeometry(
            this.el.offsetWidth,
            this.el.offsetHeight,
            1
        )

        const mesh = new THREE.Mesh(geometry, this.mat)

        this.scene.add(mesh)
    }

    transitionNext() {
        TweenMax.to(this.mat.uniforms.dispPower, 2.5, {
            value: 1,
            ease: Expo.easeInOut,
            onUpdate: this.render,
            onComplete: () => {
                this.mat.uniforms.dispPower.value = 0.0
                this.changeTexture()
                this.render.bind(this)
                this.state.animating = false
            }
        })

        const current = this.slides[this.data.current]
        const next = this.slides[this.data.next]

        const currentImages = current.querySelectorAll('.js-slide__img')
        const nextImages = next.querySelectorAll('.js-slide__img')

        const currentText = current.querySelectorAll('.js-slider__text-line div')
        const nextText = next.querySelectorAll('.js-slider__text-line div')

        const currentBullet = this.bullets[this.data.current]
        const nextBullet = this.bullets[this.data.next]

        const currentBulletTxt = currentBullet.querySelectorAll('.js-slider-bullet__text')
        const nextBulletTxt = nextBullet.querySelectorAll('.js-slider-bullet__text')

        const currentBulletLine = currentBullet.querySelectorAll('.js-slider-bullet__line')
        const nextBulletLine = nextBullet.querySelectorAll('.js-slider-bullet__line')

        const tl = new TimelineMax({ paused: true })

        if (this.state.initial) {
            TweenMax.to('.js-scroll', 1.5, {
                yPercent: 100,
                alpha: 0,
                ease: Power4.easeInOut
            })

            this.state.initial = false
        }

        tl
            .staggerFromTo(currentImages, 1.5, {
                yPercent: 0,
                scale: 1
            }, {
                yPercent: -185,
                scaleY: 1.5,
                ease: Expo.easeInOut
            }, 0.075)
            .to(currentBulletTxt, 1.5, {
                alpha: 0.25,
                ease: Linear.easeNone
            }, 0)
            .set(currentBulletLine, {
                transformOrigin: 'right'
            }, 0)
            .to(currentBulletLine, 1.5, {
                scaleX: 0,
                ease: Expo.easeInOut
            }, 0)

        if (currentText) {
            tl
                .fromTo(currentText, 2, {
                    yPercent: 0
                }, {
                    yPercent: -100,
                    ease: Power4.easeInOut
                }, 0)
        }

        tl
            .set(current, {
                autoAlpha: 0
            })
            .set(next, {
                autoAlpha: 1
            }, 1)

        if (nextText) {
            tl
                .fromTo(nextText, 2, {
                    yPercent: 100
                }, {
                    yPercent: 0,
                    ease: Power4.easeOut
                }, 1.5)
        }

        tl
            .staggerFromTo(nextImages, 1.5, {
                yPercent: 150,
                scaleY: 1.5
            }, {
                yPercent: 0,
                scaleY: 1,
                ease: Expo.easeInOut
            }, 0.075, 1)
            .to(nextBulletTxt, 1.5, {
                alpha: 1,
                ease: Linear.easeNone
            }, 1)
            .set(nextBulletLine, {
                transformOrigin: 'left'
            }, 1)
            .to(nextBulletLine, 1.5, {
                scaleX: 1,
                ease: Expo.easeInOut
            }, 1)

        tl.play()
    }

    prevSlide() {

    }

    nextSlide() {
        if (this.state.animating) return

        this.state.animating = true

        this.transitionNext()

        this.data.current = this.data.current === this.data.total ? 0 : this.data.current + 1
        this.data.next = this.data.current === this.data.total ? 0 : this.data.current + 1
    }

    changeTexture() {
        this.mat.uniforms.texture1.value = this.textures[this.data.current]
        this.mat.uniforms.texture2.value = this.textures[this.data.next]
    }

    listeners() {
        window.addEventListener('wheel', this.nextSlide, { passive: true })
    }

    render() {
        this.renderer.render(this.scene, this.camera)
    }

    init() {
        this.setup()
        this.cameraSetup()
        this.loadTextures()
        this.createMesh()
        this.setStyles()
        this.render()
        this.listeners()
    }
}

// Toggle active link
const links = document.querySelectorAll('.js-nav a')

links.forEach(link => {
    link.addEventListener('click', (e) => {
        e.preventDefault()
        links.forEach(other => other.classList.remove('is-active'))
        link.classList.add('is-active')
    })
})

// Init classes
const slider = new Slider()

index.html

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
<nav class="nav nav--left js-nav">
    <ul>
        <li>
            <a href="#"><aspan>Mens</aspan></a>
        </li>
        <li>
            <a href="#"><span>Womens</span></a>
        </li>
        <li>
            <a href="#" class="is-active"><span>Collections</span></a>
        </li>
    </ul>
</nav>

<figure class="logo">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/logo_copy_copy.svg">
</figure>

<nav class="nav nav--right">
    <ul>
        <li>
            <a href="https://twitter.com/Jesper_Landberg?lang=en" target="_blank"><span>Say hi</span></a>
        </li>
        <li>
            <a href="#">
                <span>Cart</span>
                <div class="cart-total">0</div>
            </a>
        </li>
    </ul>
</nav>

<div class="slider js-slider">
    <div class="slider__inner js-slider__inner"></div>

    <div class="slide js-slide">
        <div class="slide__content">
            <figure class="slide__img js-slide__img">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/photo1.jpg">
            </figure>
            <figure class="slide__img js-slide__img">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/photo2.jpg">
            </figure>
        </div>

        <div class="slider__text js-slider__text">
            <div class="slider__text-line js-slider__text-line">
                <div>Black is</div>
            </div>
            <div class="slider__text-line js-slider__text-line">
                <div>timeless. Black is</div>
            </div>
            <div class="slider__text-line js-slider__text-line">
                <div>the colour of</div>
            </div>
            <div class="slider__text-line js-slider__text-line">
                <div>Eternity.</div>
            </div>
        </div>

    </div>

    <div class="slide js-slide">
        <div class="slide__content">
            <figure class="slide__img js-slide__img">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/photo3.jpg">
            </figure>
            <figure class="slide__img js-slide__img">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/photo4.jpg">
            </figure>
        </div>
    </div>

    <div class="slide js-slide">
        <div class="slide__content">
            <figure class="slide__img js-slide__img">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/photo5.jpg">
            </figure>
            <figure class="slide__img js-slide__img">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/photo6.jpg">
            </figure>
        </div>
    </div>

    <nav class="slider__nav js-slider__nav">
        <div class="slider-bullet js-slider-bullet">
            <span class="slider-bullet__text js-slider-bullet__text">01</span>
            <span class="slider-bullet__line js-slider-bullet__line"></span>
        </div>
        <div class="slider-bullet js-slider-bullet">
            <span class="slider-bullet__text js-slider-bullet__text">02</span>
            <span class="slider-bullet__line js-slider-bullet__line"></span>
        </div>
        <div class="slider-bullet js-slider-bullet">
            <span class="slider-bullet__text js-slider-bullet__text">03</span>
            <span class="slider-bullet__line js-slider-bullet__line"></span>
        </div>
    </nav>

    <div class="scroll js-scroll">Scroll</div>

</div>

<div class="vert-text">
  <span>
    Wings+Horns<br>
    X Kyoto Black
  </span>
</div>

黑色是
永恒的。黑色是
颜色
永恒。
01
02
03
纸卷
翅膀+角

京都黑

只有在加载DOM并准备就绪后，才能插入下面的JS代码

document.querySelector（'.js slider'）

解析为null，这使得执行脚本和下一行时

this.el为null

this.inner = this.el.querySelector('.js-slider__inner')

若要抛出错误，请

无法读取null的属性“querySelector”

// Init classes
const slider = new Slider()

类滑块{
构造函数（）{
this.bindAll（）
this.vert=`
可变vec2 vUv；
void main（）{
vUv=紫外线；
gl_位置=projectionMatrix*modelViewMatrix*vec4（位置，1.0）；
}
`
此.frag=`
可变vec2 vUv；
均匀的二维纹理1；
均匀的2D纹理2；
均匀取样器；
均匀浮动功率；
均匀浮动强度；
均匀的vec2大小；
均匀矢量2；
vec2 backgroundCoverUv（vec2屏幕大小、vec2图像大小、vec2 uv）{
浮动屏幕比率=屏幕大小.x/屏幕大小.y；
浮动图像比率=imageSize.x/imageSize.y；
vec2 newSize=屏幕比率<图像比率
？vec2（imageSize.x*（screenSize.y/imageSize.y），screenSize.y）
：vec2（screenSize.x，imageSize.y*（screenSize.x/imageSize.x））；
vec2 newOffset=（屏幕比率<图像比率
？vec2（（newSize.x-screenSize.x）/2.0,0.0）
：vec2（0.0，（newSize.y-screenSize.y）/2.0））/newSize；
返回uv*screenSize/newSize+newOffset；
}
void main（）{
vec2-uv=vUv；
vec4 disp=纹理2D（disp，uv）；
vec2 dispVec=vec2（disp.x，disp.y）；
vec2 distPos1=uv+（显示向量*强度*显示功率）；
vec2 distPos2=uv+（dispVec*-（强度*（1.0-dispPower））；
vec4_texture1=texture2D（texture1，distPos1）；
vec4_texture2=texture2D（texture2，distPos2）；
gl_FragColor=混合（_texture1，_texture2，dispPower）；
}
`
this.el=document.querySelector（“.js slider”）
this.inner=this.el.querySelector（'.js-slider__inner'））
this.slides=[…this.el.querySelectorAll（'.js slide'）]
this.bullets=[…this.el.querySelectorAll（'.js滑块项目符号'）]
this.renderer=null
this.scene=null
此时钟为空
此参数为空
这是一张图片=[
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg1.jpg',
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg2.jpg',
'https://s3-us-west-2.amazonaws.com/s.cdpn.io/58281/bg3.jpg'
]
此参数。数据={
电流：0，
下一个:1,，
总计：this.images.length-1，
增量：0
}
此.state={
动画：错误，
文本：false，
首字母：正确
}
this.textures=null
this.init（）
}
bindAll（）{
['render'，'nextSlide']
.forEach（fn=>this[fn]=this[fn].bind（this））
}
设置样式（）{
this.slides.forEach（（幻灯片，索引）=>{
如果（索引==0）返回
TweenMax.set（幻灯片，{autoAlpha:0}）
})
this.bullets.forEach（（bullet，index）=>{
如果（索引==0）返回
const txt=bullet.querySelector（'.js-slider-bullet\uuu text'）
const line=bullet.querySelector（'.js-slider-bullet\uu line'）
TweenMax.set（txt{
阿尔法：0.25
})
TweenMax.组（线{
scaleX:0，
变换原点：“左”
})
})
}
摄像机设置（）{
this.camera=新的三点正交摄影机(
这是1.el.offsetWidth/-2，
本图为el.offsetWidth/2，
这是el.offsetHeight/2，
这个。el。离光/-2，
1.
1000
)
这个。摄影机。看（这个。场景。位置）
此.camera.position.z=1
}
设置（）{
this.scene=new THREE.scene（）
this.clock=新的3.clock（真）
this.renderer=new THREE.WebGLRenderer（{alpha:true}）
this.renderer.setPixelRatio（window.devicePixelRatio）
this.renderer.setSize（this.el.offsetWidth，this.el.offsetSight）
this.inner.appendChild（this.renderer.doElement）
}
loadTextures（）{
const loader=new THREE.TextureLoader（）
loader.crossOrigin=“”
this.textures=[]
this.images.forEach（（图像，索引）=>{
常量纹理=加载
// Init classes
const slider = new Slider()