是不是有效的dom節點--輪子代碼

時間 2019-12-10

標籤是不是有效 dom 節點輪子代碼欄目 HTML 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>是不是有效的dom節點</title>
    <script type="text/javascript">
        //是不是節點（body有效）
        function isNode(elem) {
            var ts = Object.prototype.toString;
            var reg = /^(\[object HTML).*?(Element\])$/;
            var str = ts.call(elem);

            //IE8下body會識別成[object Object]
            if (reg.test(str)
                    || (elem !== undefined
                            && elem !== null
                            && elem.nodeName !== undefined
                            && elem.nodeName !== '#text'
                            && elem.nodeName !== '#document')) {
                return true;
            }

            return false;
        }
    </script>
</head>
<body>
<ul>
    <li>
        列表節點
    </li>
</ul>
<h4>單測結果輸出：</h4>
<script type="text/javascript">

    //簡單測試框架
    function test(testArr, expectArr, explain) {
        var tStr;
        for (var i = 0, len = testArr.length; i < len; i++) {


            if(explain && explain[i]){
                tStr = explain[i] + ' -> ' + expectArr[i] + ':';
            }

            if (isNode(testArr[i]) === expectArr[i]) {
                tStr += '成功';
            } else {
                tStr += '失敗';
            }


            document.write(tStr + '<br />');
        }
    }

    // 對驗證的說明
    var explain;
    //預期結果
    var expect;
    var ul = document.getElementsByTagName('ul')[0];
    var childNodes = ul.childNodes;
    if (childNodes.length == 3) {
        expect = [false, true, false];
        explain = [
            '標準瀏覽器下childNodes獲取的換行文本節點',
            '標準瀏覽器下childNodes獲取的Dom節點',
            '標準瀏覽器下childNodes獲取的換行文本節點'
        ];
    } else {
        expect = [true];
        explain = ['IE下childNodes獲取的Dom節點'];
    }
    test(childNodes, expect, explain);

    document.write('------------------------<br />');

    var testArr =
            [
                document,
                window,
                document.body,
                undefined,
                null,
                true,
                false,
                '' ,
                0,
                2 / 0,
                new Number(3),
                'str',
                new String('str'),
                new String('')
            ];
    expect =
            [
                false,
                false,
                true,
                false,
                false,
                false,
                false,
                false,
                false,
                false,
                false,
                false,
                false,
                false
            ];
    // 對驗證的說明
    explain = [
        'document',
        'window',
        'document.body',
        'undefined',
        'null',
        'true',
        'false',
        '空字符串',
        '數字0',
        'NaN,如2/0',
        'new Number(3)',
        'str',
        'new String("str")',
        'new String("")'
    ];
    test(testArr, expect, explain);
    document.write('------------------------<br />');

    //這種變態構造就管不了了
    test([
        {nodeName: 'DIV'}
    ], [false]);

</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。