javascript - 你可以使用 getElementByClassName 来获取你用 jquery 添加的类吗？

Question

你可以使用 getElementByClassName 来获取你用 jquery 添加的类吗？我用 jquery 添加了一个类，但我似乎无法使用 getElementByClassName 检索它。当我控制台日志 classList.value 时，我得到的只是标题。然而，当我控制台日志 classList 时，我可以看到:

只是好奇是否可以瞄准它。我尝试获取 classList.list(1) 但它返回为 null。

这是我的代码:

import React from 'react';
import jQuery from 'jquery';
import $ from 'jquery';

export default class ProjectsHeader extends React.Component {

    constructor() {
         super()
    }

    componentDidMount() {

        let head = $(".header");
        let stick = "sticky";

        $(window).scroll(function() {
            $(window).scrollTop() > 400
                ? head.addClass(stick)
                : head.removeClass(stick)
        })

     let projHead = document.getElementById("projHead");




     console.log(projHead.classList);
     console.log(projHead.classList.value);

   }

     render() {
        return (
            <div id="projHead" className="header">
                <div className="not-sticky-div">
                   <div>"This is My Projects Page" McGill</div>
                </div>
                <div className="hidden-span">
                    <span>Something1</span>
                    <span>Something2</span>
                    <span>Something3</span>
                </div>
            </div>
        )
    }
}

Answer 1

您无法在控制台中看到它，因为您在添加类之前正在记录它。

当您滚动到大于 400px 的位置时，您正在添加类，但是一旦安装了组件，您就会记录类列表。尝试将您的 console.log 移至滚动事件的回调。

另请记住，JavaScript 事件是异步的，因此即使它们在您的 componentDidMount 函数完成执行之前被触发，您的回调也不会在调用堆栈变空之前被调用。

关于 JavaScript 事件循环的精彩讨论:https://www.youtube.com/watch?v=8aGhZQkoFbQ

还有题外话:如果你使用 React，请尝试摆脱 jQuery ;)