zoukankan      html  css  js  c++  java

  • javascriptDOM编程艺术_学习笔记_知识点 动态创建标记

    传统技术：document.write 和 innerHTML

    深入剖析DOM方法：createElement、createTextNode、appendChild 和 insertBefore
     
    7.1.1 document.write
    document对象的write()方法可以方便快捷地把字符串插入到文档里。
    document.write的最大缺点是它违背了“行为应该与表现分离”的原则。
    1 document.write("<p>This is inserted.</p>");
    7.1.2 innerHTML属性
    innerHTML 属性可以用来读、写某给定元素里的HTML内容。
    1 window.onload = function(){
2  var testdiv = document.getElementById("testdiv");
3  alert(testdiv.innerHTML);
4 }
    利用这个技术无法区分“插入一段HTML内容”和“替换一段HTML内容”。testdiv元素里有没有HTML内容无关紧要：一旦你使用了innerHTML属性，它的全部内容都将被替换。
    1 window.onload = function(){
2  var testdiv = document.getElementById("testdiv");
3  testdiv.innerHTML = "<p>I inserted <em>this</em> content.</p>";
4 }
    innerHTML属性要比document.writer()方法更值得推荐。使用innerHTML属性，你就可以把JavaScript代码从标记中分离出来。用不着再在标记的<body>部分插入<script>标签。
     
     
    7.2 DOM方法
    DOM是文档的表示。DOM所包含的信息与文档里的信息一一对应。你只要学会问正确的问题（使用正确的方法），就可以获取DOM节点树上任何一个节点的细节。
    DOM是一条双车道。不仅可以获取文档的内容。还可以更新文档的内容。如果你改编了DOM节点树，文档在浏览器里呈现效果就会发生变化。你已经见识过setAttribute方法的神奇之处了。用这个方法可以改变DOM节点树上的某个属性节点，相关文档在浏览器里的呈现就会发生相应的变化。不过，setAttribute方法并未改变文档的物理内容，如果用文本编辑器而不是浏览器去打开这个文档，我们将看不到任何变化。只有在用浏览器打开那份文档时才能看到文档呈现效果的变化。这是因为浏览器实际显示的是那颗DOM节点树。在浏览器看来，DOM节点树才是文档。
    一旦明白了这个道理，以动态方式实现创建标记就不那么难以理解了。你并不是在创建标记，而是在改变DOM节点树。做到这一点的关键是一定要从DOM的角度思考问题。
    在DOM看来，一个文档就是一颗节点树。如果你想在节点树上添加内容，就必须插入新的节点。如果你想添加一些标记到文档，就必须插入元素节点。
     
    7.2.1 createElement 方法
    创建一个新的元素，要用DOM方法createElement来完成。
    1 document.createElement(nodename);
    下面这条语句将创建一个p元素：
    1 document.createElement("p");
    这个方法本身并不能影响页面表现，还需要把这个新创建出来的元素插入到文档中去。为此，你需要有个东西来引用这个新创建出来的节点。
    1 var para = document.creatElement("p");
    变量para现在包含了一个指向刚创建的那个p元素的引用。现在，虽然这个新创建出来的p元素已经存在了，但它还不是任何一颗DOM节点树的组成部分，它只是游荡在JavaScript世界里的一个孤儿。它这种情况称为文档碎片(document fragment)，还无法显示在浏览器的窗口画面里。不过，它已经像任何其他的节点那样有了自己的DOM属性。
     
    7.2.2 appendChild 方法
    把新创建的节点插入某个文档的节点树的最简单的方法是，让它称为这个文档某个现有节点的子节点。
    1 parent.appendChild(child)
2 var para = document.createElement("p");
3 var testdiv = document.getElementById("testdiv");
4 testdiv.appendChild(para);

     

    7.2.3 createTextNode 方法
    创建文本节点，可以使用createTextNode方法来实现它，createElement方法创建元素节点。
    1 document.createTextNode(text)
2 document.createTextNode("Hello world");
3 var txt = document.createTextNode("Hello world");
    变量txt现在包含指向新创建的那些文本节点的引用。可以用appendChild方法把这个文本节点插入为某个现有元素的子节点。我将把这个文本节点插入到我在上一小节创建的p元素。
    1 window.onload = function(){
2     var para = document.createElement("p");
3     var testdiv = document.getElementById("testdiv");
4     testdiv.appendChild(para);
5     var txt = document.createTextNode("Hello world");
6     para.appendChild(txt);
7 }
    这个例子是按照以下顺序来创建和插入节点的：
    (1)创建一个p元素节点。
    (2)把这个p元素节点追加到test.html文档中的一个元素节点上。
    (3)创建一个文本节点。
    (4)把这个文本节点追加到刚才创建的那个p元素节点上。
    appendChild方法还可以用来连接那些尚未成为文档树一部分的节点。也就是说，以下步骤顺序同样可以达到目的。
    (1)创建一个p元素节点。
    (2)创建一个文本节点。
    (3)把这个文本节点追加到第1步创建的p元素节点上。
    (4)把这个p元素节点追加到test.html文档中的一个元素节点上。
    下面是按照新步骤编写出来的函数：
    1 window.onload = function(){
2     var para = document.createElement("p");
3     var txt = document.createTextNode("Hello world");
4     para.appendChild(txt);
5     var testdiv = document.getElementById("testdiv");
6     testdiv.appendChild(para);
7 }
    7.2.4一个更复杂的组合
    <p>This is <em>my</em> content.</p>
    这些HTML内容对应着一个p元素节点，它本身又包含着以下子节点。
    一个文本节点，其内容是“This is”
    一个元素节点“em”，这个元素节点本身还包含着一个文本节点，其内容是“my”
    一个文本节点，其内容是“content.”
    把需要创建哪些节点的问题弄清楚后，需要做的步骤。
    1. 创建一个p元素节点并把它赋给变量para。
    2. 创建一个文本节点并把它赋给变量txt1。
    3. 把txt1追加到para上。
    4. 创建一个em元素节点并把它赋给变量emphasis。
    5. 创建一个文本节点并把它赋值给变量txt2。
    6. 把txt2追加到emphasis上。
    7. 把emphasis追加到para上。
    8. 创建一个文本节点并把它赋值给变量txt3。
    9. 把txt3追加到para上。
    10. 把para追加到test.html文档中的testdiv元素上。
     1 window.onload = function(){
 2     var para = document.createElement("p");
 3     var txt1 = document.createTextNode("This is ");
 4     para.appendChild(txt1);
 5     var emphasis = document.createElement("em");
 6     var txt2 = document.createTextNode("my");
 7     emphasis.appendChild(txt2);
 8     para.appendChild(emphasis);
 9     var txt3 = document.createTextNode(" content.");
10     para.appendChild(txt3);
11     var testdiv = document.getElementById("testdiv");
12     testdiv.appendChild(para);
13 }
    另一种思路：可以先把所有节点都创建出来，然后再把它们连接在一起。
    1. 创建一个p元素节点并把它赋值给变量para。
    2. 创建一个文本节点并把它赋值给变量txt1。
    3. 创建一个em元素节点并把它赋值给变量emphasis。
    4. 创建一个文本节点并把它赋值给变量txt2。
    5. 创建一个文本节点并把它赋值给变量txt3。
    6. 把txt1追加到para上。
    7. 把txt2追加到emphasis上。
    8. 把emphasis追加到para上。
    9. 把txt3追加到para上。
    10. 把para追加到test.html文档中的testdiv元素上。
     1 window.onload = function (){
 2     var para = document.createElement("p");
 3     var txt1 = document.createTextNode("This is ");
 4     var emphasis = document.createElement("em");
 5     var txt2 = document.createTextNode("my");
 6     var txt3 = document.createTextNode(" content. ");
 7     para.appendChild(txt1);
 8     emphasis.appendChild(txt2);
 9     para.appendChild(emphasis);
10     para.appendChild(txt3);
11     var testdiv = document.getElementById("testdiv");
12     testdiv.appendChild(para);
13 }
  • 相关阅读:
    com.alibaba.fastjson.JSONException: default constructor not found. class ……
    ActiveMQ伪集群部署
    #{}和${}的区别
    微信小程序——报错汇总
    PHP——base64的图片的另类上传方法
    PHP——base64的图片转为文件图片
    veu——引入iconfont图标
    vue——script内容详解
    webpack——阮一峰webpackDemo分析
    webpack——快速入门【一】
  • 原文地址：https://www.cnblogs.com/mxc-success/p/4306382.html
Copyright © 2011-2022 走看看