此问题已经在这里有了答案：
注意：此问题与帖子中提出的关于什么querySelectorAll和getElementsById的问题不同。因为我也无法更改图像
我正在尝试通过以下方式使用查询选择器来更改HTML内容：
我尝试使用document.querySelector和document.querySelectorAll。我能够成功将h1文本更改为蓝色。但是，我无法更改图像。我也无法将段落更改为黑色。
const blueh1 = document.querySelector('h1');
blueh1.style.color = 'blue'
const mainImage = document.querySelector('.mainmain');
mainImage.src = 'img/jevon_in_barra.jpg';
console.log(mainImage);
const paragraphs = document.querySelectorAll('p');
paragraphs.style.color = 'black';
以下HTML代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Marketing Page Home</title>
<link href="./css/index.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,800&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/a791a74a1f.js" crossorigin="anonymous"></script>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<container>
<nav>
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="#">Sign Up</a>
<a href="https://expat-journal.emilyelri.now.sh/login">Log In</a>
<a href="#">Contact</a>
</nav>
</container>
<container class="h1-container">
<h1 class="logo-font">Expat Journal</h1>
</container>
<section class="top">
<container>
<h2>Show and Tell, except for Expats</h2>
<h3>A platform for travel story-telling</h3>
<button>
<a href="https://expat-journal.emilyelri.now.sh/login" class="mainmain">Get started for free</a>
</button>
</container>
</section>
<section class="middle">
<img src="img/travel-meeting.jpg" alt="">
</section>
<section class="bottom">
<container>
<container class="photos-container">
<i class="far fa-image"></i>
<h3>Photos</h3>
<p>Show off pics of the amazing places you've been around the world. Users can visit site and see photos laid out in a grid, with the ability to like, comment and share!</p>
</container>
<container class="stories-container">
<i class="fas fa-video"></i>
<h3>Stories</h3>
<p>Keep your friends and family updated with beautiful story content. You can select to show for a limited period of time or retain permanently on your profile.</p>
</container>
<container class="connect-container">
<i class="fas fa-user-friends"></i>
<h3>Connect</h3>
<p>Users can follow your profile as well as like, comment and share your content. Inspire others to travel and share their experiences!</p>
</container>
</container>
</section>
<footer>
<nav class="footer">
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="#">Sign Up</a>
<a href="https://expat-journal.emilyelri.now.sh/login">Log In</a>
<a href="#">Contact</a>
</nav>
</footer>
</body>
<script type="text/javascript" src="index.js"></script>
</html>
没有任何记录到控制台。我收到未定义文档的参考错误。
将<script type="text/javascript" src="index.js"></script>放置在body标签内，紧接在结束标签之前：
<body>
...
<script type="text/javascript" src="index.js"></script>
</body>
querySelectorAll返回一个节点列表，而不是单个元素，因此您可以像这样使用它：
const paragraphs = document.querySelectorAll('p');
[...paragraphs].forEach(paragraph => paragraph.style.color = 'black');