要素の書き換えについてわからないことがあるのでご教示ください。

前提・実現したいこと

初めまして
javascript初学者です。
現在、DOMの勉強をしており、どうしてもわからない箇所があったので
この場を借りてご質問させていただきます。
やりたいことはテキスト1の文字色をオレンジ色から黒色に変更したいです。
今回はp要素にあえてid,class名を与えずに取得しようとしてますが苦戦している状態です。
ご教示の程よろしくお願いします。

発生している問題・エラーメッセージ

//未定義のプロパティ 'color'を設定できませんとエラ〜メッセージが出る
Uncaught TypeError: Cannot set property 'color' of undefined

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>DOMの操作</title>
7  </head>
8  <body>
9    <h1 id="title">タイトル１</h1>
10    <p id="element1">要素１</p>
11    <p id="element2">要素２</p>
12    <div class="box1">
13      <p class="box1">box１</p>
14      <p>テキスト１テキスト１テキスト１テキスト１テキスト１</p>
15    </div>
16    <div class="box2">
17      <p class="box2">box２</p>
18      <p class="text2">テキスト２テキスト２テキスト２テキスト２テキスト２</p>
19    </div>
20    <script type="text/javascript" src="191019.js"></script>
21  </body>
22</html>

javascript
1//box1とテキスト1の文字色をオレンジ色に変更
2var box1 = document.getElementsByClassName("box1")[0];
3box1.style.color = "orange";

試したこと

javascript
1//テキスト1の文字色をオレンジ色から黒色に変更
2var box1 = document.getElementsByClassName("box1")[0].getElementsByTagName("p")[1].innerHTML;
3box1.style.color = "black";