li要素全体をクリックしてリンクしたい
例えば下記のようなHTMLリスト（目次）があったとして、このli要素はリンクにならず、a要素がリンクとなります。
<div class="toc-content">
<ol class="toc-list open">
<li><a href="#toc1" tabindex="0">セクション1</a></li>
<li><a href="#toc2" tabindex="0">セクション2</a></li>
<li><a href="#toc3" tabindex="0">セクション3</a></li>
<li><a href="#toc4" tabindex="0">セクション4</a></li>
<li><a href="#toc5" tabindex="0">セクション5</a></li>
</ol>
</div>この場合、文字が表示されていない部分が、クリックしても反応しません。
li要素全体をクリックしてリンクできるようにするには…？
addEventListenerを使う
このコードでは、目次（TOC）の項目をクリックすると、その項目に対応する場所にスクロールするようになっています。
const tocList = document.querySelector(".toc-list");
tocList.querySelectorAll("li").forEach((item) => {
const link = item.querySelector("a");
item.addEventListener("click", () => {
window.location.href = link.getAttribute("href");
});
});このコードは、目次のリストを取得し、それぞれのリストアイテム（li要素）に対して、その子要素のa要素のhref属性を取得して、li要素自体にhref属性を設定しています。
これにより、li要素全体がリンクとしてクリック可能になります。
[rml_read_more]
また、querySelectorAllを使用して、すべてのli要素を取得し、forEachループを使用して各li要素に対して処理を行います。
li要素の中身を空にし、新しいa要素を作成して、リンクのURLを設定し、テキストを設定しています。最後に、新しいa要素をli要素に追加しています。
これで、li部分をクリックした場合でも、子要素のリンクが動いて、クリックして移動できるようになります。
ただし、このままだと、a要素の範囲外が指のアイコンにならないので、調整してみます。
cursor: pointer;
li要素にcursor: pointer;を追加します。
「cursor: pointer;」とは、CSSで使用するプロパティの1つで、マウスカーソルをポインター（指さし手）に変えることができる設定です。
これにより、通常のテキストや画像以外の要素（ボタン、リンク、アイコンなど）をクリック可能な要素であることを示すことができます。
カーソルのスタイルを指定することで、ユーザーに対して要素がクリックできるかどうかを視覚的に伝えることができます。
まとめ
addEventListenerやquerySelectorを駆使してDOM操作できました！
色々とできますね！
