getElementsByTagNameで取得したタグにインデックス番号以外で取得すること方法

Question

WPにてhoge.htmlのみ概要部分のHTMLを削除しなければいけないのですが、概要部分はthemesのfooter.phpというファイルに記載されており、いじることが難しいです。

そこで以下のjsコードを記載しました。
概要部分の見出しh３と概要の詳細が記載されてるsummaryarea対してタグを追加して、cssで消す形です。

ですが、これではh３が記事内に増えたときにインデックス番号がずれてh３の見出しだけ表示されてしまいます。
なんとか概要のh３だけ記事内のh３が増えてもcssがきく方法ありませんでしょうか

※正確なHTML構造に変更

	   <h3><img src="img/h3_top_03.png" width="720" height="32" alt="概要" />
		<span>概要</span>
	</h3>
    <div id="summaryarea" class="clearfix">
        <div id="summary" class="clearfix">
            <p id="name_summary">xxxxx</p>
            <dl class="summarytext clearfix">
                <dt>xxxxx</dt><dd>xxxxx<br />xxxxx</dd>
				<dt>xxxxx</dt><dd><a href="tel:xxxxx" style="text-decoration: none"><span id="tel">xxxxx</span></a></dd>
                <dt>xxxxx</dt>
                <dd>xxxxx</dd>
                <dt id="timetable">xxxxx時間</dt>
                <dd><img src="xxxxx" width="333" height="184" alt="診療時間表" /></dd>
            </dl>
        </div><!--summary -->
        <div id="maparea">
            <p id="accessmap">ACCESSMAP</p>
            <p id="gmap"><iframe src="xxxxx"></iframe></p>
        </div><!--maparea -->
    </div><!--summaryarea -->

.summaryareaNone, .h3None {
    display: none !important;
}

window.addEventListener('DOMContentLoaded', function(){
  let url = location.pathname;
  const targetElement = document.getElementById('summaryarea');
  const targetElement2 = document.getElementsByTagName('h3')[3];
  if (url.endsWith("/puberty.html")){
    targetElement.classList.add('summaryareaNone'); 
    targetElement2.classList.add('h3None'); 
  }
  //console.log(url);
 })

Comments

[int32_t]

対象の<h3>と<div id="summaryarea">は常に隣り合う位置関係ですか?

[nanashissss]

HTMLの方を省略から正確なHTMLに変更しました

[yambejp]

結局やりたいことは#summaryareaの直前の（他になんのHTML要素も挟まない）h3に適当なCSSを設定できればよいのでしょうか？

[nanashissss]

hoge.htmlのみの概要部分の見出し（h3）のみに対してcssで消すことができれば大丈夫です。
h3は固定ページの記事内で見出しとしても使用されてる共通のものとなります。
ですので、hoge.htmlの概要部分のh３に対してcssがあたる処理が必要でした

Answer 1

対象の<h3>は<div id="summaryarea">の隣の要素のようなので、

  const targetElement2 = targetElement.previousElementSibling;

でよいでしょう。

Comments

[nanashissss]

希望通りの処理になりました。ありがとうございます。助かりました。

Answer 2

構造や特定できるHTML要素からの相対位置で処理すればよいでしょう

Comments

[nanashissss]

ありがとうございます。