getElementByIdによるif条件分岐で囲んだ関数が、PCでは動くがiOSでは動かないのはなぜ？

当初の目的

タブ切り替えを実現するため、
「特定の要素をクリックすると別の要素にclassを付けたり削除したりする」という、よくあるコードを書きました。
特定のIDが存在するページでのみ作動するようにしたいため、コードの全体をif文で囲み、getElementByIDによって特定のIDが存在するかどうかを判別するようにしました。

Javascript
1// 特定のIDが存在するページでのみ作動する
2if(document.getElementById('tab_A') != null) {
3
4  const tabA = document.getElementById('tab_A');
5  const tabB = document.getElementById('tab_B');
6  const contentA = document.getElementById('content_A');
7  const contentB = document.getElementById('content_B');
8
9  function openTabB() {
10    tabA.classList.remove('active');
11    contentA.classList.remove('visible');
12    tabB.classList.add('active');
13    contentB.classList.add('visible');
14  }
15
16  function openTabA() {
17    tabA.classList.add('active');
18    contentA.classList.add('visible');
19    tabB.classList.remove('active');
20    contentB.classList.remove('visible');
21  }
22
23  tabA.addEventListener('click', openTabA);
24  tabB.addEventListener('click', openTabB);
25
26}

上記のコードでPC/Chrome、Edge環境だと想定通りに作動するのですが、iPad/Chrome、Safariではいずれも動作しません。

###試したこと
iPadのような画面をタッチするような端末では、clickで発火する関数が実行されない場合があるという情報を見かけたため、
まずは関数を以下のように修正し、そもそも関数がきちんと実行されているのか、実行されているとしたらどこで止まっているのかを調べました。

Javascript
1  function openTabB() {
2    alert('start');
3    tabA.classList.remove('active');
4    contentA.classList.remove('visible');
5    tabB.classList.add('active');
6    contentB.classList.add('visible');
7    alert('end');
8  }
9
10  function openTabA() {
11    alert('start');
12    tabA.classList.add('active');
13    contentA.classList.add('visible');
14    tabB.classList.remove('active');
15    contentB.classList.remove('visible');
16    alert('end');
17  }

するとiOSではいずれの関数実行時も**「start」のアラートは出るが「end」のアラートは出ない**という結果になりました。click条件でも発火はしているが、関数が途中で上手く処理できなくなっているということだと考えました。

###getElementByIDによるif条件分岐を削除したら解決したが……
いろいろ調べてみても原因が分からなかったので、やけくそでif文を丸ごと削除したら、iPadでも正常に動作するようになりました。

Javascript
1// 特定のIDがある場合のみ作動する
2// if(document.getElementById('tab_A') != null) {
3
4  const tabA = document.getElementById('tab_A');
5  const tabB = document.getElementById('tab_B');
6  const contentA = document.getElementById('content_A');
7  const contentB = document.getElementById('content_B');
8
9  function openTabB() {
10    tabA.classList.remove('active');
11    contentA.classList.remove('visible');
12    tabB.classList.add('active');
13    contentB.classList.add('visible');
14  }
15
16  function openTabA() {
17    tabA.classList.add('active');
18    contentA.classList.add('visible');
19    tabB.classList.remove('active');
20    contentB.classList.remove('visible');
21  }
22
23  tabA.addEventListener('click', openTabA);
24  tabB.addEventListener('click', openTabB);
25
26// }

しかしこれではtab_AのIDが存在しないページではエラーが出てしまいます。
JSファイルを分けて、tab_AのIDが存在するページでのみ上記JSファイルを読み込むようにするという手もありますが、あまり良いやり方ではないように思いますし、どうにも納得できないため質問させていただきました。
どうしてiOSでは上記のような条件分岐で囲んだとき、関数が途中で上手く処理できなくなるのでしょうか？
お分かりの方がいれば教えていただきたいです。よろしくお願いいたします。