【IE】子が○○な親 (直下の子要素が a である div/th/td) をセレクトしたい。

Question

前提・実現したいこと

リンク有無により hover 時に左罫線の色を変更する。

|リンク|条件: 例|期待値: 例|イメージ|
|:--|:--:|--:|
|あり|<a> タグが続く <div> タグ|<div> の border-left-color を変更する (グレーにする)||
|なし|<a> タグが続かない <div>|div> の border-left-color を変更しない (赤のまま)| |

発生している問題

JavaScript で選択要素にクラスを付与しているが、
IE に限り、子要素に <a> タグが続いても罫線の色が変わらない。(赤のまま)

子が○○な親を特定でき、かつ IE 不具合も回避できる実装方法を探しています。
 (現状は JavaScript で実装していますが、実現可能なら CSS 単独への手段変更も OK です。)

該当のソースコード

    window.addEventListener('DOMContentLoaded', ()=>{
        document.querySelectorAll('div').forEach(x=>{
            var flg=(x.querySelectorAll('a').length > 0);
            x.classList.toggle('indexLink',flg);
        });
    });
    window.addEventListener('DOMContentLoaded', ()=>{
        document.querySelectorAll('th').forEach(x=>{
            var flg=(x.querySelectorAll('a').length > 0);
            x.classList.toggle('indexLink',flg);
        });
    });
    window.addEventListener('DOMContentLoaded', ()=>{
        document.querySelectorAll('td').forEach(x=>{
            var flg=(x.querySelectorAll('a').length > 0);
            x.classList.toggle('indexLink',flg);
        });
    });

a:hover { color:crimson; }
tr.indexLevel1 {
    background-color: #dedede;
}
td.indexLevel1 {
    border-width: 0px 0px 0px 10pt;
    border-style: none none none solid;
    border-color: black black black crimson;
    border-radius: 1px; 
    vertical-align: middle;
}
td.indexLevel1 a {
    vertical-align: middle;
}
.indexLink:hover {
    border-color:black black black gray;
}

div.tableIndex {
    width: 100%;
    background-color: #dedede;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    font-weight:bold;
    box-shadow:none;
    position:relative;
    padding-left:.5em;
    line-height:1.4;
    font-size:1.1em;
    border-width: 0px 0px 0px 10pt;
    border-style: none none none solid;
    border-color: black black black crimson;
    border-radius: 1px; 
}
div.indexLevel1 {
    display: flex;
    align-items: center;
}

<table width="100%" class="ms-rteTable-default " cellspacing="0">
   <tbody>
      <tr class="ms-rteTableHeaderRow-default indexLevel1">
         <td valign="middle" class="ms-rteTableHeaderLastCol-default indexLevel1">
           <a href="#">
             <h3>
               <span class="ms-rteThemeForeColor-1-5"><strong>■Link&#160;リンクあり【table タグ】</strong></span>
             </h3>
           </a>
         </td>
      </tr>
   </tbody>
</table>
<br>
<table width="100%" class="ms-rteTable-default " cellspacing="0">
   <tbody>
      <tr class="ms-rteTableHeaderRow-default indexLevel1 indexLabel">
         <td class="ms-rteTableHeaderLastCol-default indexLevel1">
            <h3>
               <span class="ms-rteThemeForeColor-1-5"><strong>■Link&#160;リンクなし【table タグ】</strong></span>
            </h3>
         </td>
      </tr>
   </tbody>
</table>
<br>
<div class="tableIndex">
  <div class="indexLevel1">
    <a href="#">
      <h3>
        <strong>■Link&#160;リンクあり【div タグ】</strong>
      </h3>
    </a>
  </div>
</div>
<br>
<div class="tableIndex">
  <div class="indexLevel1">
    <h3>
      <strong>■Link&#160;リンクなし【div タグ】</strong>
    </h3>
  </div>
</div>

試したこと

Google Chrome や Microsoft Edge では想定通りに動く。

補足情報（FW/ツールのバージョンなど）

ターゲット環境: Internet Explorer 11

Answer 1

IEではアロー関数（=>）が使えません。トランスパイルを入れるか、functionに書き直すかをしましょう。

Comments

[AkitoshiManabe]

IEは classList で色を変えることもできませんね
https://developer.mozilla.org/ja/docs/Web/API/Element/classList#Browser_compatibility

[maisumakun]

情報ありがとうございます。

[BetterEveryday]

maisumakun さん、AkitoshiManabe さん、
迅速に返信いただきましてありがとうございます。
以下に修正してみましたが、動きは変化しません。
window.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('div').forEach(function(x) {
var flg=(x.querySelectorAll('a').length > 0);
x.classList.toggle('indexLink',flg);
});
});

IE11 では子要素を判断してクラスを追加できない、ということなのでしょうか?
ターゲット環境が IE11 の場合、リンクの有無判断は諦め、あらかじめ
各要素に異なるクラス (リンクありとリンクなし) を定義するしかない、ということなのでしょうか?

[think49]

「IE11ではtoggle()を使えない」とAkitoshiManabeさんが指摘しているように読めます。
コンソールでエラーが出力されていると思います。
https://www.google.com/search?q=ie11+%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB&oq=ie11+%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB

[AkitoshiManabe]

IE に対応した class属性の操作を考えるなら、maisumakun さんの回答どおり「トランスパイル」を介するのが現在の王道でしょう。他、Pure JavaScript を意識するなら Prototype.js の実装（ソースコード==先人の知恵）を参考にする事でしょうか。
https://github.com/prototypejs/prototype/blob/5fddd3e/src/prototype/dom/dom.js#L2425

[think49]

classListだけなら、Polyfillで対応してもいいですね
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Polyfill
https://github.com/eligrey/classList.js

[AkitoshiManabe]

think49 さん、情報ありがとうございます

[BetterEveryday]

think49 さん、AkitoshiManabe さん、
ご検討ありがとうございます。

みなさんの会話に catch up できていません。
自分で確認/理解できたことは以下のみの状態です。
1. コンソールでエラーが出力されること
2. 対応方法は 3 種類ある。(1.「トランスパイル」2. Prototype.js 3. Polyfill)

具体的にどうすればよいのか、が理解できていないのですが、
以下を試してみたら
- アロー関数を function に変更
- AkitoshiManabe さんが示していただいた dom.js を参照してみた
- think49 さんが示していただいた Polyfill のコードを内包してみた

以下のエラーになりました。
「オブジェクトは 'forEach' プロパティまたはメソッドをサポートしていません。」

「トランスパイル」でなければ対応できない、ということなのでしょうか?
「トランスパイル」をキーワード検索してみましたが、
「トランスパイルを入れる、介する」とは、なにをすべきなのか、に辿り着けていません。
砕いた説明を探したいのですが、なにかヒントはありませんか?

お手数をお掛けしまして申し訳ございません。
どうぞよろしくお願いいたします。

[think49]

そこまで切り分け出来たのなら、forEachのPolyfillを探したり、
https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach#Polyfill
forEach以外の手段で列挙させるなり、
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for
考えを昇華できませんか。

トランスパイルでなければ対応できないのは「アロー関数」のような新しい構文に対応する事です。
旧来の構文で書く分には問題ありませんし、新しいメソッド(classList.toggle)がないなら古いメソッド/プロパティ(className)で対応しても良いはずです。

[BetterEveryday]

think49 さん、
ガイドどうもありがとうございます。
(forEach についても探すべきなのか、どのように探せるものなのか、を自分では明確に判断できませんでした。)
forEach を NodeList の対象 element 分インクリメントする for 文に変更することで実現できました。
<script type='text/javascript' src='https://github.com/eligrey/classList.js/blob/master/classList.js'></script>
<script>
window.addEventListener('DOMContentLoaded', function (){
const cIndex = document.querySelectorAll('div');
for (let i = 0; i < cIndex.length; i++) {
if (cIndex[i].querySelectorAll('a').length > 0) {
cIndex[i].className = "indexLink " + cIndex[i].className;
}
}
});
window.addEventListener('DOMContentLoaded', function (){
const cIndex = document.querySelectorAll('th');
for (let i = 0; i < cIndex.length; i++) {
if (cIndex[i].querySelectorAll('a').length > 0) {
cIndex[i].className = "indexLink " + cIndex[i].className;
}
}
});
window.addEventListener('DOMContentLoaded', function (){
const cIndex = document.querySelectorAll('td');
for (let i = 0; i < cIndex.length; i++) {
if (cIndex[i].querySelectorAll('a').length > 0) {
cIndex[i].className = "indexLink " + cIndex[i].className;
}
}
});
</script>

また、構文とメソッドの新旧に関するご説明もどうもありがとうございます。
解説いただいたことにより、私にも通訳のように以下が理解できました。

構文: 記号での記述と function で括ることの違い
メソッド: classList.toggle から className へ変更可能であること

今回も私の理解のためにお時間とお気持ちを、
助けていただきましてどうもありがとうございました。