IE11 - JS, プロパティの値が無効です, invalid node value, ul, li, childNodes, value

7761 ワード
IE11 JavaScript IE JavaScript テキストリンク

2015/09/04

はじめに

よく検証していない記事です。

IE11 のパースエラー？

ul, li の value を更新したかったが、IE11がパースに失敗したらしい。
li.value を更新しようとすると「プロパティの値が無効です」と言われる。

<ul id="myul">
    <li value="0"></li>
    <li value="1"></li>
    <li value="2"></li>
    <li value="3"></li>
</ul>

li に value を持たせるのは合法とのこと。
http://www.w3schools.com/tags/att_li_value.asp

DOM 操作に使ったコード。

sample.html
<!DOCTYPE html>
<html>
<head>
    <title></title>
<script type="text/javascript">

window.onload = function() {
    var myul = document.getElementById('myul');
    if (myul == null) {
        console.log('not found myul');
        return;
    }
    if (myul.childNodes == null || myul.childNodes.length === 0) {
        console.log('invalid myul');
        return;
    }
    var c = myul.childNodes;

    for (var i = 0, len = c.length; i < len; ++i) {
        var node = c[i];
        if (node == null || node.nodeType !== 1) {
            continue;  // not target
        }
        var val = i + 1;
        node.value = val;
        node.textContent = val;
        console.log(node);
    }
};

</script>
</head>
<body>

<ul id="myul">
    <li value="0">0</li>
    <li value="1">1</li>
    <li value="2">2</li>
    <li value="3">3</li>
</ul>

</body>
</html>

このコードでは再現しなかった。
おそらく IE11 は「なんやかんやあって ul, li のパースに失敗した」。
とりあえず ul/li を span の入れ子にして対応した。

success
<span id="myul">
    <span value="0">0</span>
    <span value="1">1</span>
    <span value="2">2</span>
    <span value="3">3</span>
</span>
第五週プロジェクト二(1)ゲーム中のキャラクター類
分散ロック-redLock And Redisson