gpt4 book ai didi

javascript - 禁用vsCode中的nodejs文件到客户端js文件

转载 作者:太空宇宙 更新时间:2023-11-03 23:47:45 25 4
gpt4 key购买 nike

我在使用 java 脚本进行编码时遇到了巨大的困难。我的Java脚本文件使用的是nodejs,这意味着我无法执行任何DOMS。例如这里的代码:

var form = document.getElementsByClassName('nav-item');
console.log(form.length);

浏览器的开发者工具中显示了 4 个导航项,但长度为 0,而应该是 4。为什么会发生这种情况?有没有办法禁用nodejs或切换?我知道nodejs是服务器端,那么我如何禁用它或创建另一个位于客户端的js文件?

HTML 代码:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="boot.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="boot.js"></script>
</head>

<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>

<!-- Creates the navbar links-->
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Subjects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link float-right" href="#">Sign Up</a>
</li>
</ul>
</div>
</nav>
<br>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox">Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>

BOOT.JS 文件:

var form = document.getElementsByClassName('nav-item');
console.log(form.length);

最佳答案

尝试在文件末尾而不是文件头加载脚本。运行脚本时,DOM 尚未加载。或者将其放入此事件中:

document.addEventListener("DOMContentLoaded", function(event) { 
var form = document.getElementsByClassName('nav-item');
console.log(form.length);
});

关于javascript - 禁用vsCode中的nodejs文件到客户端js文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60444015/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com