尽管选择器正确，为什么 querySelector 函数返回 null？答案

【问题标题】：why querySelector function return null despite correct selectors?尽管选择器正确，为什么 querySelector 函数返回 null？
【发布时间】：2019-09-24 02:06:15
【问题描述】：

我有 functions.php 文件，其中包含正确获取 js 文件到我的网站的函数，但是当我尝试使用 querySelector('any selector name') 时，该函数返回 null

我尝试使用 querySelector("html")，然后我收到我所有的 html 代码，但在任何其他情况下，我得到 null 值

footer.php 文件

<?php wp_footer(); ?>
</body>
</html>

functions.php 文件

<?php

function university_files() {

  wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Lato:100,300,400,700');
  wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Merriweather:300,400,700');
  wp_enqueue_style('university_main_styles', get_stylesheet_uri());
}

add_action('wp_enqueue_scripts', 'university_files');

function remove_admin_login_header() {
    remove_action('wp_head', '_admin_bar_bump_cb');
}
add_action('get_header', 'remove_admin_login_header');
?>

header.php

<!DOCTYPE html>
<html lang="pl">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body>
    <button class="hamburger"></button>
    <header>
        <nav>
            <ul class="nav">
                <li class="navel"> <a href="/">o firmie</a> </li>
                <li class="navel"> <a href="/oferta">oferta</a> </li>
                <li class="navel"> <a href="/galeria">galeria</a> </li>
                <li class="navel"> <a href="/kontakt">kontakt</a> </li>
            </ul>
        </nav>
    </header>

script.js

const header = document.querySelector('header');
const menu = document.querySelector('.hamburger');


menu.addEventListener("click", ()=>{
menu.classList.toggle("active");
header.classList.toggle("active");
});

【问题讨论】：

您在哪里使用 querySelector？我的猜测是，你不是在等待 document.ready 或 window.onload
stackoverflow.com/questions/14028959/…

标签： javascript wordpress file include

【解决方案1】：

如果您的脚本在关闭body 标记之前插入头部，则需要将您的脚本调用到DOMContentLoaded。

document.addEventListener('DOMContentLoaded', function () {
  const header = document.querySelector('header');
  const menu = document.querySelector('.hamburger');


  menu.addEventListener("click", ()=>{
  menu.classList.toggle("active");
  header.classList.toggle("active");
});
})

【讨论】：