0

「圧縮したHTMLの状態」では正常動作するのですが、HTMLを整形展開すると、下記エラーとなります。

Uncaught TypeError: Cannot read property 'childNodes' of undefined

hoge.childNodes[1].childNodes[0],

・恐らく改行が入るからだと思うのですが、改行にも対応するにはどうすれば良いですか?


追記

・コードのどの部分に該当するのか把握できていないので、例えば下記コードだった場合、input要素を取得するとき、改行「あり」「なし」何れにも対応させることはできますか?
・childNodesでまとめて取得して、ループで何か出来ないのかな、と思ったのですが…

・改行なし

<form class="a1"><p class="a2">ファイルを選択</p><p class="a3"><input accept="image/*" class="a4" type="file"></p></form>

・改行あり

<form class="a1">
  <p class="a2">ファイルを選択</p>
  <p class="a3">
    <input accept="image/*" class="a4" type="file">
  </p>
</form>

元コードがchildNodeを使用していたのでなるべくそれに沿うようにしようと思ったのですが、例えば、下記のようなコードで取得しても良い?

document.getElementsByClassName( "a4" )
4
  • 4
    第三者が問題を正確に把握できるように、エラーが起きるコードとエラーが起きないコードの両方を併記してくださいませんか? 現状だと結局どういうコードでエラーが出るのかも理解しづらいです。
    – nekketsuuu
    Commented 2018年9月8日 16:24
  • コードのどの部分に該当するか分からないので、ダミーの前提コードを追記しました
    – re9
    Commented 2018年9月10日 6:55
  • 改行の有無で変化するのって生のHTMLですか?なんらかのテンプレートエンジン等利用しており、そちらの仕様が影響して改行の有無で挙動が変化しているような気がします。
    – PicoSushi
    Commented 2018年9月10日 7:31
  • もしかしたら、テンプレートエンジン等利用しているのかもしれないのですが、作成経緯が分からない圧縮されたコードがあって、それ以外は何も分からない状態です
    – re9
    Commented 2018年9月11日 3:41

2 件の回答 2

2

状況によって対策は変わります。いくつかありがちな対策を書いてみます。

<input type=file>id 属性をつけれられる場合

document.getElementById('id-of-input-type-file');

Document内にクラスa4を持つ要素が2つ以上存在しないことが保証されている場合

document.getElementsByClassName('a4')[0]

hoge内にクラスa4を持つ要素が2つ以上存在しないことが保証されている場合

hoge.getElementsByClassName('a4')[0]

document内に<input type=file>が2つ以上存在しないことが保証されている場合

document.querySelector('input[type=file]')

hoge内に<input type=file>が2つ以上存在しないことが保証されている場合

hoge.querySelector('input[type=file]')
1
  • クラスa4を持つ要素が2つ以上存在しないことが保証されている場合、というのが今回の件に該当していました。大変参考になりました
    – re9
    Commented 2018年9月11日 3:46
1

Mozilla による childNodes のドキュメントには以下のように書かれています。

childNodes にはテキストノードやコメントノードなどの非要素ノードを含むすべての子ノードが含まれます。要素のみのコレクションを取得するには、代わりに ParentNode.children を使用してください。

HTML 側に改行やスペースなどのテキストが入ると、テキストノードが増えるので childNodes のインデックスがずれます。下の例でも、エラーは出ませんが出力が変わります。

let x = document.getElementById("foo").childNodes[1].childNodes[0];
console.log(x);
<form id="foo"><p class="a2">ファイルを選択</p><p class="a3"><input accept="image/*" class="a4" type="file"></p></form>

let x = document.getElementById("foo").childNodes[1].childNodes[0];
console.log(x);
<form id="foo">
    <p class="a2">ファイルを選択</p>
    <p class="a3">
        <input accept="image/*" class="a4" type="file">
    </p>
</form>

ドキュメントに書かれているとおり、代わりに children を使うとテキストノードは無視されます。

let x = document.getElementById("foo").children[1].children[0];
console.log(x);
<form id="foo">
    <p class="a2">ファイルを選択</p>
    <p class="a3">
        <input accept="image/*" class="a4" type="file">
    </p>
</form>

ただし、本当にノードの数を数えて参照する必要があるのか考えてください。すべての子ノードに対してイテレートしたいときなどは childNodeschildren が使いたくなるでしょうが、ただひとつのノードを指定したいために使うのは混乱のもとです。HTML 側が少し変わるだけで参照できなくなりますし、JS 側の可読性も落ちます。目的のノードがひとつしかないと決まっているなら、そのノードに id を振って getElementById するほうが良いでしょう。あるいは場合によっては document.getElementById("foo").getElementsByClassName("a4")[0] というやり方が便利かもしれません。

1
  • 元のソースコードがノードを参照していたので何か難しい処理をしなければいけないのかと思っていたのですが、 目的のノードが一つの場合は、単純にid を振って参照すればよいわけですね
    – re9
    Commented 2018年9月11日 3:45

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。