読者です 読者をやめる 読者になる 読者になる

iOS7 の Safari はゆるふわな HTML に厳しい

HTML JavaScript iOS7

こんなゆるふわでファウルな HTML があったとしまして

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>

<div id="firstunko">
  <p id="unko">unko</p>
</div>
<div id="secondunko">
  <p id="unko">unko</p>
  <p id="unko">unko</p>
  <p id="unko">unko</p>
  <p id="unko">unko</p>
  <p id="unko">unko</p>
</div>
  
</body>
</html>

これに対して、さらにゆるふわな以下のような JS を走らせますと

console.log(document.querySelectorAll('#unko').length);
// 6
console.log(document.querySelector('#firstunko').querySelectorAll('#unko').length);
// 1
console.log(document.getElementById('firstunko').querySelectorAll('#unko').length);
// 1

となるのが、これまでの寛容なブラウザ様のふるまいでありました。 ChromeFirefoxIE もそうです。

しかし iOS7 の Safari は、

console.log(document.querySelectorAll('#unko').length);
// 6
console.log(document.querySelector('#firstunko').querySelectorAll('#unko').length);
// 6
console.log(document.getElementById('firstunko').querySelectorAll('#unko').length);
// 6

です。 HTML 中に一個しかないはずの ID 探査をコンテキストで囲ったって、俺、そんなの知らんかんね。ということみたい。あ、もちろん iOS7 の Chrome もそうですね。

だからどうと言うことはありません。 HTML Validator をかけましょう…。

jsbin でチェック

Sizzle と Zepto

ちなみに上の jsbin の例で弄ってみていただきたいんですが、あ、もちろん iOS7 Safari で。

console.log($('#firstunko').find('#unko').length);

この結果、 Zepto だと 6 ですが、 jQuery ( Sizzle ) だと 1 です。 Sizzle 、なんかやってますね。中で。