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 }
  • 相关阅读:
    PAT Advanced 1067 Sort with Swap(0, i) (25分)
    PAT Advanced 1048 Find Coins (25分)
    PAT Advanced 1060 Are They Equal (25分)
    PAT Advanced 1088 Rational Arithmetic (20分)
    PAT Advanced 1032 Sharing (25分)
    Linux的at命令
    Sublime Text3使用指南
    IntelliJ IDEA创建第一个Groovy工程
    Sublime Text3 安装ftp插件
    Sublime Text3配置Groovy运行环境
  • 原文地址:https://www.cnblogs.com/mxc-success/p/4306382.html
Copyright © 2011-2022 走看看