欢迎光临
我们一直在努力

JavaScript | DOM创建节点

DOM的简介就不多说了。本片文章介绍一下DOM创建节点的几种方法以及注意事项。

document.write()

write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。

可列出多个参数(exp1,exp2,exp3,...) ,它们将按顺序被追加到文档中。

<body>
    <h1>这是一段body初始内容</h1>
    <script>
       //DOM 创建节点
       document.write("<h1>这是document.write()添加的内容</h1>");
    </script>
</body>

通过上面的代码可以发现,通过DOM确实成功写入了HTML节点(且不会覆盖已有的HTML内容),这是因为DOM在HTML还没有完成DOM创建时进行了操作。但当我们在DOM创建完成后再进行操作时,会发现我们创建的DOM会覆盖原来的HTML节点:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="domReady.js"></script>
</head>
<body>
    <h1>这是一段body初始内容</h1>
    <script>
        //DOM 创建节点
        myReady(function(){
            document.write("<h1>这是document.write()添加的内容</h1>");
        });  
    </script>
</body>

关于这种情况的解释,可参考下面关于DOM节点与HTML标签的描述:

HTML是一种标记语言, 告诉我们这页面有什么内容。 但行为交互是需要通过DOM操作实现, 不要认为那两个尖括号的内容就是一个DOM

HTML标签要通过浏览器解析才会变成DOM节点。

当我们向地址栏传入一个URL, 开始加载页面到我们看到内容,这期间就有一个DOM节点构建的过程。

节点们是以树的形式组织的, 当页面上所有HTML都转换为节点, 这就叫做DOM树建完, 简称之domReady。

可以理解,我们在DOM树创建完成后,如果对HTML执行document.write()操作会导致原HTML内容被覆盖,这是我们无法容忍的,所以在创建节点时,并不建议通过document.write()方法创建。

create系列方法

  • document.createElement() 用于创建标签
  • document.createTextNode() 用于创建插入的文本节点
  • document.createDocumentFragment() 用于创建文档片段
  • document.createComment() 用于创建注释节点

案例展示:为HTML中的ul添加li节点,我们通过for循环创建多个li标签,并把它添加到fragment中作为文档片段,最后把这个文档片段添加到ul中。

<body>
    <ul id="myList"></ul>
    <script>
        //create系列方法
        var fragment = document.createDocumentFragment();
        var ul = document.getElementById('myList');
        var li = null;
        for(i=0;i<9;i++){
            li = document.createElement('li');
            li.appendChild(document.createTextNode('Item'+(i+1)));
            fragment.appendChild(li);
        }
        ul.appendChild(fragment);
    </script>
</body>

运行结果:

创建注释节点:

//body部分
<div id = 'myList'></div>
var comment = document.createComment("散人研博客代码注释");
        //insertBefore 用于在谁前面插入节点,接受两个参数(被插入节点,相对节点)
        document.body.insertBefore(comment,document.getElementById('myList'));

运行结果:可以看到我们确实成功在div前面插入了注释节点

赞(1) 打赏
未经允许不得转载:散人研 » JavaScript | DOM创建节点
分享到: 更多 (0)

评论 1

7 + 5 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1
    散人研

    除此之外,通过innerHTML、outHTML,innerText、outText插入节点也非常方便,但也要注意不同浏览器的“空格兼容问题”,在此不多说了,有兴趣的自己去查查。

    散人研 8个月前 (03-31) 来自天朝的朋友 回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏