DOM基础(四)

  每次写DOM的时候,就觉得好像没什么好写,因为涉及到知识点的方面的确不多,对于DOM来说,更多的还是练习为主。在练习的时候,最好能结合着js基础语法的知识点来学习。这样,在学习DOM的时候就不会那么枯燥了。

  在DOM基础(三)里我提到了追加子元素的概念,也就是appendChild()方法,这个方法是用来给节点的子节点中的最后添加一个元素。之前我提到的是把克隆的节点添加到节点的末尾。但是,如果我们对原本就存在的节点使用这种方法呢?比如下述代码:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="ul">
<li>111111</li>
<li>222222</li>
<li id="li3">333333</li>
<li>444444</li>
</ul>
<script>
var ul = document.getElementById("ul");
var lis = ul.children;
ul.appendChild(lis[2]);
</script>
</body>
</html>

  这段代码在页面中打印的结果为

DOM基础(四)

  我们可以看到,原本应该是333333的位置变成了444444,而333333却到了最后。这是因为appendChild()这个实际上是剪切一个元素。也就是说,在执行的过程中,appendChild()方法先把第三个li剪切了一份,然后再放到了ul的最后。要使得他不被剪切的方法就是先复制一份,然后再加到ul的最后。也就是:

ul.appendChild(lis[2].cloneNode(true));

  这样,我们就实现了复制一次第三行代码,然后把他追加到了ul的最后。

  不过这种方法有他的局限性,那就是我们只能把剪切下来的元素放到最后一个位置,而不能放到任意位置。这时候,我们就要用到另一个方法了,就是insertBefore();这个方法有两个参数,第一个参数是用来控制要插入的内容的,而第二个参数则是用来控制要插入的位置的。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="list">
<li>111111</li>
<li>222222</li>
<li>333333</li>
<li>444444</li>
</ul>
<script>
var ul = document.getElementById("list");
var lis = ul.children;
var n1 = lis[2];
ul.insertBefore(n1, lis[0]);
</script>
</body>
</html>

  这段代码在页面中的输出结果为

DOM基础(四)

  我们可以看到,跟appendChild一样,他也是把节点直接剪切到了第一个元素前面。所以,要解决这个问题就只能让元素先克隆一份,然后在追加到ul的最前面。也就是改变n1的值。

var n1 = lis[2].cloneNode(true);

  这样,我们就能实现元素添加到任意位置了。

  好了,解决了之前遗留的问题,接下来就可以说说其他的知识了。DOM除了可以获取和改变页面中的元素之外,还可以动态的创建元素,而且在创建了元素之后,还可以动态的给元素添加属性和方法。其实在我之前的文章中,就已经有涉及到过一些动态创建元素的概念了。document.write();这个方法是直接向页面中输出一句话,不过除了它输出普通的字符串之外,还能输出其他的内容:

document.write("<input type='text' value='456'>");

  这句话在页面打印的结果为一个值为456的input输入框。因为在解析的时候,页面自动把这句话进行了转译,解析成了一个input标签,所以我们才能在页面上看到一个文本框。

除了document.write()之外,我们还可以用innerHTML的方式给页面添加元素。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="d"></div>
<script>
var d = document.getElementById("d");
for (var i = 0; i < 10; i++) {
d.innerHTML += "<input type='text' value='123'><br/>";
}
</script>
</body>
</html>

上述代码在页面中循环打印了是个input标签。我们在开发人员工具中查看页面结构

DOM基础(四)

  从上图我们可以看到,这些input标签都被放在id为d的这个div下面了,它作用的原理跟document.write()相同,都是把d.innerHTML的内容转译成了html的标签。使它能在页面中打印出来。

  除了上述两种动态创建元素的方法外,DOM还给我们提供了内置的方法来动态的创建元素。document.createElement(),这个方法直译过来就是在文档中创建元素,所以看着这么一串其实记忆起来并不难,它的作用是在内存中生成一对标签。既然是生在内存中,我们就要用一个变量去接收他

var ul = document.createElement("ul");

  在这里,我动态的生成了一个ul标签,括号直接填写要生成的标签的标签名就好了,并用双引号引起来,然后把他赋给一个变量。这样,我们就动态的生成了一个ul标签。生成了之后要怎么把他添加到页面中呢?这时候,就要用到appendChild方法了。下面是一个完整的例子:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="d"></div>
<script>
var ul = document.createElement("ul");
var li1 = document.createElement("li");
var li2 = document.createElement("li");
var d = document.getElementById("d");
d.appendChild(ul); ul.appendChild(li1);
ul.appendChild(li2);
li1.innerHTML = "这是动态创建的元素";
li2.innerHTML = "这是动态创建的元素";
</script>
</body>
</html>

  上述例子中,我动态的生成了一个ul标签,两个li标签,然后把ul标签剪切到了id为d的div盒子的末尾。在把两个li标签添加到了ul中。最后再给两个li标签设置了内容。这段代码,在页面中打印的结果为

DOM基础(四)

  我们在来看看它的页面结构

DOM基础(四)

  在页面中,也动态的生成了ul标签和li标签,这样,动态的创建元素就完成了。

上一篇:《HTTP 权威指南》笔记:第十六章&第十七章 国际化、内容协商与转码


下一篇:Python 第五阶段 学习记录之--- Web框架