JavaScript closest

Question

textをクリックします
その親のformノードへアクセスしたいのですがnullになってしまいます

<table border="0" cellpadding="2" cellspacing="2">を消すとアクセスできます

原因がわかる方教えていただけないでしょうか
そしてどうやればtextの親要素であるformへアクセスできますでしょうか？

window.onclick=function(e){
   element=e.target.closest('form');
  console.log(element);
}

<table border="0" cellpadding="2" cellspacing="2">
<form method="POST" action=".">
<input type="text" name="name">
```

Comments

[m.ts10806]

HTMLも全てコピペで提示されたほうが良いかと思います。
form/inputをそこに置いている意図は何でしょうか？

Answer 1

<table>の直下に <form> や <input> を入れることはできません。HTMLパーザがこれを修正しようとして、結果として <input> は <form> の子供ではなくなります。

ただしフォーム的には所有関係が保たれているので、e.target.closest('form') は動きませんが e.target.form で <form> にアクセスすることができます。

Comments

[fuck_you]

代替え案までありがとうございます
納得しました

Answer 2

HTMLが文法的に間違っているからでしょう。

<table>: 表要素 - HTML: HyperText Markup Language | MDN

上記の許可されている内容に<form>はありません。

下記のように文法的に正しいものに書き換えれば、提示のjsでformを認識できます。

<table border="0" cellpadding="2" cellspacing="2">
  <tr>
    <td>
      <form method="POST" action=".">
        <input type="text" name="name">
      </form>
    </td>
  </tr>
</table>

---

補足
上記のリンク先にも記述がありますが、border cellpadding cellspacing は非推奨の属性です。
CSSでの設定に置き換えた方がいいでしょう。

Comments

[fuck_you]

なるほど、そういうことだったんですね、納得しました
ありがとうございました

Answer 3

inputをformタグ内に挟み込む必要はないので以下のようなやり方もできます

<script>
document.addEventListener('click',e=>{
  console.log(e.target.form);
});
</script>
<form id="frm"></form>

<table border="0" cellpadding="2" cellspacing="2">
<tr>
<td>
<input type="text" name="name" form="frm">
</td>
<td>
<input type="text" name="name" form="frm">
</td>
</tr>
</table>

Answer 4

多分form要素はwindowの親要素じゃないからだと思いますよ〜!下のを試してみてください！

//htmlのname属性で指定しています。
document.getElementsByName("name")[0].onclick = function(e){
    const element = e.target.closest('form');
    console.log(element);
};

Comments

[fuck_you]

nullでした