关于网页显示[object HTML标签名Element]的问题

最新推荐文章于 2023-01-06 15:00:27 发布

theSunAndSnow

最新推荐文章于 2023-01-06 15:00:27 发布

阅读量3.8k

点赞数 2

分类专栏：前端学习笔记 JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_44960253/article/details/106882892

版权

前端学习笔记同时被 2 个专栏收录

8 篇文章

订阅专栏

JavaScript

1 篇文章

订阅专栏

关于网页显示[object HTML标签名Element]的问题

今天学习在 JS红宝书上的 10.1.8 节关于 DocumentFragment 类型时，按照实例，大致上敲了一遍代码想要看看效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul id="myList"></ul>
    <script>
        var fragment = document.createDocumentFragment();
        var ul = document.getElementById('myList');

        (function() {
            for (var i = 0, li = null; i < 3; ++i) {
                li = document.createElement('li');
                var textNode = document.createTextNode('Item' + (li + 1));
                console.log(textNode);
                li.appendChild( textNode );
                fragment.appendChild(li);
            }
            console.log(fragment.childNodes);
        })();
        
        ul.appendChild(fragment);
        console.log(fragment.childNodes);
    </script>
</body>
</html>

结果却发现网页的li标签内容为 Item[object HTMLLIElement]1 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YFicpnuY-1592708203188)(C:\Users\Sun and Snow\AppData\Roaming\Typora\typora-user-images\image-20200621104722839.png)]$

产生错误的原因只是眼睛看花了 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qH6LLepU-1592708203190)(C:\Users\Sun and Snow\AppData\Roaming\Typora\typora-user-images\image-20200621104347013.png)]$

改正后即可正常渲染： $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ztlsQ0J-1592708203191)(C:\Users\Sun and Snow\AppData\Roaming\Typora\typora-user-images\image-20200621104738081.png)]$

但是这个低级错误却显示了一个有趣的问题：在 createTextNode 中添加一个 DOM 对象对页面产生的影响。

来测试一下这种现象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <script>
        var li = document.createElement('li');
        var textNode = document.createTextNode(li);
        console.log(textNode); // 打印文本节点
        console.log(li); // 打印元素节点
        console.log(String(li)); // 将元素节点强制转换为字符串
    </script>
</body>
</html>

浏览器控制台结果：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pLZeumIx-1592708203193)(C:\Users\Sun and Snow\AppData\Roaming\Typora\typora-user-images\image-20200621105230011.png)]$