• 《Head First HTML5 javascript》第8章 DOM

    DOM（document object model）

    文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以结构化的方式进行访问，从而改变文档的内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。

    一个 web 页面是一个文档。这个文档可以在浏览器窗口或作为 HTML 源码显示出来。但上述两个情况中都是同一份文档。文档对象模型（DOM）提供了对同一份文档的另一种表现，存储和操作的方式。DOM 是 web 页面的完全的面向对象表述，它能够使用如 JavaScript 等脚本语言进行修改。

    DOM重要的数据类型

    下面的表格简单则描述了这些数据类型。

    document当一个成员返回 document 对象（例如，元素的 ownerDocument 属性返回它所属于 document ) ，这个对象就是 root document 对象本身。 DOM document Reference 一章对 document 对象进行了描述。
    elementelement 是指由 DOM API 中成员返回的类型为 element 的一个元素或节点。例如， document.createElement() 方法会返回一个 node 的对象引用，也就是说这个方法返回了在 DOM 中创建的 element。 element 对象实现了 DOM Element 接口以及更基本的 Node 接口，参考文档将两者都包含在内。
    textelement的文本内容，一定存储在element的子节点里
    nodeListnodeList 是一个元素的数组，如从 document.getElementsByTagName() 方法返回的就是这种类型。 nodeList 中的条目由通过下标有两种方式进行访问：
    • list.item(1)
    • list[1]两种方式是等价的，第一种方式中 item() 是 nodeList 对象中的单独方法。 后面的方式则使用了经典的数组语法来获取列表中的第二个条目。
    attribute当 attribute 通过成员函数 (例如，通过 createAttribute()方法) 返回时，它是一个为属性暴露出专门接口的对象引用。DOM 中的属性也是节点，就像元素一样，只不过可能会很少使用它。
    namedNodeMapnamedNodeMap 和数组类似，但是条目是由 name 或 index 访问的，虽然后一种方式仅仅是为了枚举方便，因为在 list 中本来就没有特定的顺序。出于这个目的， namedNodeMap 有一个 item() 方法，也可以从 namedNodeMap 添加或移除。

    DOM 中核心接口

    在 DOM 编程时，通常使用的最多的就是 Document 和 window 对象。简单的说， window 对象表示浏览器中的内容，而 document 对象是文档本身的根节点。Element 继承了通用的 Node 接口，将这两个接口结合后就提供了许多方法和属性可以供单个元素使用。在处理这些元素所对应的不同类型的数据时，这些元素可能会有专用的接口。

    下面是在 web 和 XML 页面脚本中使用 DOM 时，一些常用的 API 简要列表。

    • document.getElementById(id)document.getElementById

      value性质取值：JS允许我们通过 getElementById()函数以id访问网页元素，但这个函数不会直接取值，需要以JS对象的形式提供HTML域内容，我们通过域的value性质访问数据

      document.getElementById("cakedonuts").value

    • document.getElementsByTagName(name)

      document.getElementsByTagName返回一个包括所有给定标签名称的元素的 HTML 集合HTMLCollection。整个文件结构都会被搜索，包括根节点。返回的 HTML 集合 是动态的，意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用 document.getElementsByTagName()。

      document.getElementsByTagName(”img”)[3];//第4个<img>标签

    • createElement用于创建一个由标签名称 tagName指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素

      1. document.body.onload = addElement;
      2.  
      3. function addElement () {
      4.   // 创建一个新的 div 元素
      5.   let newDiv = document.createElement("div");
      6.   // 给它一些内容
      7.   let newContent = document.createTextNode("Hi there and greetings!");
      8.   // 添加文本节点 到这个新的 div 元素
      9.   newDiv.appendChild(newContent);
      10.  
      11.   // 将这个新的元素和它的文本添加到 DOM 中
      12.   let currentDiv = document.getElementById("div1");
      13.   document.body.insertBefore(newDiv, currentDiv);
      14. }

    • Document.createTextNode()创建一个文本节点。

      var text = document.createTextNode(data);//data 是一个字符串，包含了要放入文本节点的内容。

    Node

    **Node**是一个接口，各种类型的 DOM API 对象会从这个接口继承。它允许我们使用相似的方式对待这些不同类型的对象；比如，继承同一组方法，或者用同样的方式测试。

    Node属性

    1. [Node.nodeValue]返回或设置当前节点的值，只限文本与属性节点使用（不含元素）。

      document.getElementById("scenetext").nodeValue;

    2. [Node.nodeType]节点类型，返回与该节点类型对应的无符号短整型的值，可能的值：

      NameValue
      ELEMENT_NODE1
      ATTRIBUTE_NODE 已弃用2
      TEXT_NODE3
      CDATA_SECTION_NODE4
      ENTITY_REFERENCE_NODE 已弃用5
      ENTITY_NODE 已弃用6
      PROCESSING_INSTRUCTION_NODE7
      COMMENT_NODE8
      DOCUMENT_NODE9
      DOCUMENT_TYPE_NODE10
      DOCUMENT_FRAGMENT_NODE11
      NOTATION_NODE 已弃用12

    3. Node.childNodes 包含节点下所有的子节点的数组，以出现在HTML代码中的顺序而排列，返回包含指定节点的子节点的集合，该集合为即时更新的集合（live collection）。

    4. [Node.firstChild]返回该节点第一个子节点[Node]，如果该节点没有子节点则返回null。

    5. [Node.lastChild](返回该节点最后一个子节点[Node]，如果该节点没有子节点返回null。

    Node方法

    1. [Node.removeChild()]移除当前节点的一个子节点。这个子节点必须存在于当前节点中。

      1. // 移除一个元素节点的所有子节点
      2. var element = document.getElementById("top");
      3. while (element.firstChild) {
      4.   element.removeChild(element.firstChild);
      5. }

    2. [Node.appendChild()]将指定的 childNode 参数作为最后一个子节点添加到当前节点。 如果参数引用了 DOM 树上的现有节点，则节点将从当前位置分离，并附加到新位置。

      1. // 创建一个新的段落元素 <p>，然后添加到 <body> 的最尾部
      2. var p = document.createElement("p");
      3. document.body.appendChild(p);

    innerHTML

    通过innerHTML 可以取得HTML内容类元素（div、span、p…）内存储的所有内容，包括HTML标签，如下面的案例所示，可以获取文字内容+strong标签及其内容，这与DOM方法不同。

    1. <p id="story">
    2. 	you are standing <strong>alone</strong> in the woods.
    3. </p>

    设置 innerHTML 的值可以让你轻松地将当前元素的内容替换为新的内容。举个例子来说，你可以通过文档 [body]属性删除 body 的全部内容。

    document.body.innerHTML = "";

    只要把文字字符串指派给元素的innerHTML特性，元素内容即可设为HTML文本字符串。新内容将取代任何原本属于元素的内容。它本身没有附加功能，如果要实现附加的效果可以采用串联的方法将新内容加到旧内容上：

    elem.innerHTML += "new content";

    关键字this

    this是Javascript语言的一个关键字，它代表函数运行时,自动生成的一个内部对象，只能在函数内部使用，随着函数使用场合的不同，this的值会发生变化，但是有一个总的原则，那就是this指的是调用函数的那个对象。

    总结：谁调用了这个函数，this指向谁(对象)

    this 在 类 中的表现与在函数中类似，因为类本质上也是函数，但也有一些区别和注意事项。

    在类的构造函数中，this 是一个常规对象。类中所有非静态的方法都会被添加到 this 的原型中：

    1. class Example {
    2.   constructor() {
    3.     const proto = Object.getPrototypeOf(this);
    4.     console.log(Object.getOwnPropertyNames(proto));
    5.   }
    6.   first(){}
    7.   second(){}
    8.   static third(){}
    9. }
    10.  
    11. new Example(); // ['constructor', 'first', 'second']

    函数上下文中的 this

    1. // 对象可以作为 bind 或 apply 的第一个参数传递，并且该参数将绑定到该对象。
    2. var obj = {a: 'Custom'};
    3.  
    4. // 声明一个变量，并将该变量作为全局对象 window 的属性。
    5. var a = 'Global';
    6.  
    7. function whatsThis() {
    8.   return this.a;  // this 的值取决于函数被调用的方式
    9. }
    10.  
    11. whatsThis();          // 'Global' 因为在这个函数中 this 没有被设定，所以它默认为 全局/ window 对象
    12. whatsThis.call(obj);  // 'Custom' 因为函数中的 this 被设置为 obj
    13. whatsThis.apply(obj); // 'Custom' 因为函数中的 this 被设置为 obj

    this 和对象转换

    1. function add(c, d) {
    2.   return this.a + this.b + c + d;
    3. }
    4.  
    5. var o = {a: 1, b: 3};
    6.  
    7. // 第一个参数是用作“this”的对象
    8. // 其余参数用作函数的参数
    9. add.call(o, 5, 7); // 16
    10.  
    11. // 第一个参数是用作“this”的对象
    12. // 第二个参数是一个数组，数组中的两个成员用作函数参数
    13. add.apply(o, [10, 20]); // 34

    原型链中的 this

    对于在对象原型链上某处定义的方法，同样的概念也适用。如果该方法存在于一个对象的原型链上，那么 this 指向的是调用这个方法的对象，就像该方法就在这个对象上一样。

    1. var o = {
    2.   f: function() {
    3.     return this.a + this.b;
    4.   }
    5. };
    6. var p = Object.create(o);
    7. p.a = 1;
    8. p.b = 4;
    9.  
    10. console.log(p.f()); // 5

    这个例子中，对象 p 没有属于它自己的 f 属性，它的 f 属性继承自它的原型。虽然最终是在 o 中找到 f 属性的，这并没有关系；查找过程首先从 p.f 的引用开始，所以函数中的 this 指向p。也就是说，因为f是作为p的方法调用的，所以它的this指向了p。这是 JavaScript 的原型继承中的一个有趣的特性。

    getter 与 setter 中的 this

    再次，相同的概念也适用于当函数在一个 getter 或者 setter 中被调用。用作 getter 或 setter 的函数都会把 this 绑定到设置或获取属性的对象。

    1. function sum() {
    2.   return this.a + this.b + this.c;
    3. }
    4.  
    5. var o = {
    6.   a: 1,
    7.   b: 2,
    8.   c: 3,
    9.   get average() {
    10.     return (this.a + this.b + this.c) / 3;
    11.   }
    12. };
    13.  
    14. Object.defineProperty(o, 'sum', {
    15.     get: sum, enumerable: true, configurable: true});
    16.  
    17. console.log(o.average, o.sum); // logs 2, 6

    作为构造函数

    当一个函数用作构造函数时（使用new关键字），它的this被绑定到正在构造的新对象。

    虽然构造函数返回的默认值是 this所指的那个对象，但它仍可以手动返回其他的对象（如果返回值不是一个对象，则返回 this对象）。

    1. /*
    2.  * 构造函数这样工作：
    3.  *
    4.  * function MyConstructor(){
    5.  *   // 函数实体写在这里
    6.  *   // 根据需要在 this 上创建属性，然后赋值给它们，比如：
    7.  *   this.fum = "nom";
    8.  *   // 等等...
    9.  *
    10.  *   // 如果函数具有返回对象的 return 语句，
    11.  *   // 则该对象将是 new 表达式的结果。
    12.  *   // 否则，表达式的结果是当前绑定到 this 的对象。
    13.  *   //（即通常看到的常见情况）。
    14.  * }
    15.  */
    17. function C(){
    18.   this.a = 37;
    19. }
    20.  
    21. var o = new C();
    22. console.log(o.a); // logs 37
    23.  
    24. function C2(){
    25.   this.a = 37;
    26.   return {a:38};
    27. }
    28.  
    29. o = new C2();
    30. console.log(o.a); // logs 38

    在刚刚的例子中（C2），因为在调用构造函数的过程中，手动的设置了返回对象，与this绑定的默认对象被丢弃了。（这基本上使得语句“this.a = 37;”成了“僵尸”代码，实际上并不是真正的“僵尸”，这条语句执行了，但是对于外部没有任何影响，因此完全可以忽略它）。

    作为一个 DOM 事件处理函数

    当函数被用作事件处理函数时，它的 this 指向触发事件的元素（一些浏览器在使用非 addEventListener 的函数动态地添加监听函数时不遵守这个约定）。

    1. // 被调用时，将关联的元素变成蓝色
    2. function bluify(e){
    3.   console.log(this === e.currentTarget); // 总是 true
    4.  
    5.   // 当 currentTarget 和 target 是同一个对象时为 true
    6.   console.log(this === e.target);
    7.   this.style.backgroundColor = '#A5D9F3';
    8. }
    9.  
    10. // 获取文档中的所有元素的列表
    11. var elements = document.getElementsByTagName('*');
    12.  
    13. // 将 bluify 作为元素的点击监听函数，当元素被点击时，就会变成蓝色
    14. for(var i=0 ; i<elements.length ; i++){
    15.   elements[i].addEventListener('click', bluify, false);
    16. }

    作为一个内联事件处理函数

    当代码被内联 on-event 处理函数 (en-US) 调用时，它的this指向监听器所在的 DOM 元素：

    1. <button onclick="alert(this.tagName.toLowerCase());">
    2.   Show this
    3. </button>

    上面的 alert 会显示 button。注意只有外层代码中的 this 是这样设置的：

    1. <button onclick="alert((function(){return this})());">
    2.   Show inner this
    3. </button>

    在这种情况下，没有设置内部函数的 this，所以它指向 global/window 对象（即非严格模式下调用的函数未设置 this 时指向的默认对象）。

    类中的 this

    和其他普通函数一样，方法中的 this 值取决于它们如何被调用。有时，改写这个行为，让类中的 this 值总是指向这个类实例会很有用。为了做到这一点，可在构造函数中绑定类方法：

    1. class Car {
    2.   constructor() {
    3.     // Bind sayBye but not sayHi to show the difference
    4.     this.sayBye = this.sayBye.bind(this);
    5.   }
    6.   sayHi() {
    7.     console.log(`Hello from ${this.name}`);
    8.   }
    9.   sayBye() {
    10.     console.log(`Bye from ${this.name}`);
    11.   }
    12.   get name() {
    13.     return 'Ferrari';
    14.   }
    15. }
    16.  
    17. class Bird {
    18.   get name() {
    19.     return 'Tweety';
    20.   }
    21. }
    22.  
    23. const car = new Car();
    24. const bird = new Bird();
    25.  
    26. // The value of 'this' in methods depends on their caller
    27. car.sayHi(); // Hello from Ferrari
    28. bird.sayHi = car.sayHi;
    29. bird.sayHi(); // Hello from Tweety
    30.  
    31. // For bound methods, 'this' doesn't depend on the caller
    32. bird.sayBye = car.sayBye;
    33. bird.sayBye();  // Bye from Ferrari

    涉及css样式要点

    1. <style>包含文档的样式信息或者文档的部分内容。默认情况下，该标签的样式信息通常是CSS的格式。

      type：该属性以 MIME 类型（不应该指定字符集）定义样式语言。如果该属性未指定，则默认为 text/css。

    2. 字重 font-weightCSS属性指定了字体的粗细程度。一些字体只提供 normal  和 bold两种值。

      1. /* Keyword values */
      2. font-weight: normal;
      3. font-weight: bold;
      4.  
      5. /* Keyword values relative to the parent */
      6. font-weight: lighter;
      7. font-weight: bolder;
      8.  
      9. /* Numeric keyword values */
      10. font-weight: 1
      11. font-weight: 100;
      12.  
      13. /* Global values */
      14. font-weight: inherit;
      15. font-weight: initial;
      16. font-weight: unset;

    3. 边框 borderCSS的 **border**属性是一个用于设置各种单独的边界属性的简写属性。border可以用于设置一个或多个以下属性的值：border-width、[border-style]()、[border-color]()。

      1. /* style */
      2. border: solid;
      3.  
      4. /* width | style */
      5. border: 2px dotted;
      6.  
      7. /* style | color */
      8. border: outset #f33;
      9.  
      10. /* width | style | color */
      11. border: medium dashed green;
      12.  
      13. /* Global values */
      14. border: inherit;
      15. border: initial;
      16. border: unset;

    4. 间距

      1. 内间距 paddingCSS 简写属性控制元素所有四条边的内边距区域。

        1. /* 应用于所有边 */
        2. padding: 1em;
        3.  
        4. /* 上边下边 | 左边右边 */
        5. padding: 5% 10%;
        6.  
        7. /* 上边 | 左边右边 | 下边 */
        8. padding: 1em 2em 2em;
        9.  
        10. /* 上边 | 右边 | 下边 | 左边 */
        11. padding: 5px 1em 0 2em;
        12.  
        13. /* 全局值 */
        14. padding: inherit;
        15. padding: initial;
        16. padding: unset;

      2. 外间距 margin为给定元素设置所有四个（上下左右）方向的外边距属性

        1. /* 应用于所有边 */
        2. margin: 1em;
        3. margin: -3px;
        4.  
        5. /* 上边下边 | 左边右边 */
        6. margin: 5% auto;
        7.  
        8. /* 上边 | 左边右边 | 下边 */
        9. margin: 1em auto 2em;
        10.  
        11. /* 上边 | 右边 | 下边 | 左边 */
        12. margin: 2px 1em 0 auto;
        13.  
        14. /* 全局值 */
        15. margin: inherit;
        16. margin: initial;
        17. margin: unset;
        18.  
        19. margin: 5%;                 /* 所有边：5% 的外边距 */
        20.  
        21. margin: 10px;               /* 所有边：10px 的外边距 */
        22.  
        23. margin: 1.6em 20px;         /* 上边和下边：1.6em 的外边距 */
        24.                             /* 左边和右边：20px 的外边距  */
        25.  
        26. margin: 10px 3% -1em;       /* 上边：10px 的外边距 */
        27.                             /* 左边和右边：3% 的外边距   */
        28.                             /* 下边：     -1em 的外边距 */
        29.  
        30. margin: 10px 3px 30px 5px;  /* 上边：10px 的外边距 */
        31.                             /* 右边：3px 的外边距  */
        32.                             /* 下边：30px 的外边距 */
        33.                             /* 左边：5px 的外边距  */
        34.  
        35. margin: 2em auto;           /* 上边和下边：2em 的外边距 */
        36.                             /* 水平方向居中            */
        37.  
        38. margin: auto;               /* 上边和下边：无外边距 */
        39.                             /* 水平方向居中        */

      3. 注意事项

        • 当只指定一个值时，该值会统一应用到全部四个边的边距上。
        • 指定两个值时，第一个值会应用于上边和下边的边距，第二个值应用于左边和右边。
        • 指定三个值时，第一个值应用于上边，第二个值应用于右边和左边，第三个则应用于下边的边距。
        • 指定四个值时，依次（顺时针方向）作为上边，右边，下边，和左边的边距。

    5. 显示隐藏效果

      1. visibility样式特性：显示或隐藏元素而不更改文档的布局。该属性还可以隐藏 [

        ]中的行或列。

        1. /* Keyword values */
        2. visibility: visible;
        3. visibility: hidden;
        4. visibility: collapse;
        5.  
        6. /* Global values */
        7. visibility: inherit;
        8. visibility: initial;
        9. visibility: unset;

        visible元素正常显示。

        hidden隐藏元素，但是其他元素的布局不改变，相当于此元素变成透明。要注意若将其子元素设为 visibility: visible，则该子元素依然可见。

        collapse关键字对于不同的元素有不同的效果： • 用于 [

        ]行、列、列组和行组，隐藏表格的行或列，并且不占用任何空间（与将 [display]: none 用于表格的行/列上的效果相当）。但是，计算其他行和列的大小时，仍会像显示折叠行或列中的单元格一样进行计算。此值允许从表中快速删除行或列，而不强制重新计算整个表的宽度和高度。 • 折叠的弹性元素和 ruby 元素会被隐藏，它们本来将要占用的空间会被移除。 • 对于其他元素，折叠处理与隐藏相同。

      2. display样式特性

        CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

        形式上，display 属性设置元素的内部和外部的显示类型。外部类型设置元素参与流式布局；内部类型设置子元素的布局。一些 display 值在它们自己的单独规范中完整定义；例如，在 CSS 弹性盒模型的规范中，定义了声明 display: flex 时会发生的细节。

        1. /* precomposed values */
        2. display: block;
        3. display: inline;
        4. display: inline-block;
        5. display: flex;
        6. display: inline-flex;
        7. display: grid;
        8. display: inline-grid;
        9. display: flow-root;
        10.  
        11. /* box generation */
        12. display: none;
        13. display: contents;
        14.  
        15. /* two-value syntax */
        16. display: block flow;
        17. display: inline flow;
        18. display: inline flow-root;
        19. display: block flex;
        20. display: inline flex;
        21. display: block grid;
        22. display: inline grid;
        23. display: block flow-root;
        24.  
        25. /* other values */
        26. display: table;
        27. display: table-row; /* all table elements have an equivalent CSS display value */
        28. display: list-item;
        29.  
        30. /* Global values */
        31. display: inherit;
        32. display: initial;
        33. display: revert;
        34. display: revert-layer;
        35. display: unset;

        3. 其他知识点

        1. id传参时，构造函数中不能加引号，但是要在调用函数中加引号，这是由于构造函数中的参数需要是一个变量，如果加了引号就变成字符串及固定的id文字了，那样不符合调用的逻辑

        2. className 特性对元素样式进行访问，获取或设置指定元素的 class 属性的值。

          1. let cName = elementNodeReference.className;
          2.  
          3. elementNodeReference.className = cName;

        3. 鼠标事件

          1. onmouseover当鼠标移动到一个元素上时，会在这个元素上触发 mouseover 事件。

            element.onmouseover = event handling code

          2. onmouseout当鼠标离开一个元素上时，会在这个元素上触发 onmouseout 事件。

            1. <!doctype html>
            2. <html>
            3. <head>
            4. <title>onmouseover/onmouseout event example</title>
            5. <script type="text/javascript">
            6.     function initElement()
            7.     {
            8.         var p = document.getElementById("foo");
            9.  
            10.         p.onmouseover = showMouseOver;
            11.         p.onmouseout = showMouseOut;
            12.     };
            13.  
            14.     function showMouseOver()
            15.     {
            16.         var notice = document.getElementById("notice");
            17.         notice.innerHTML = '检测到鼠标移进';
            18.     }
            19.  
            20.     function showMouseOut()
            21.     {
            22.         var notice = document.getElementById("notice");
            23.         notice.innerHTML = '检测到鼠标移出';
            24.     }
            25.  
            26. </script>
            27. <style type="text/css">
            28.     #foo {
            29.     border: solid blue 2px;
            30.     }
            31. </style>
            32. </head>
            33. <body onload="initElement()";>
            34.     <span id="foo">移动鼠标，在该元素上移进移出</span>
            35.     <div id="notice"></div>
            36. </body>
            37. </html>

        4. switch评估一个表达式，将表达式的值与case子句匹配，并执行与该情况相关联的语句。

          1. switch (expression) {
          2.   case value1:
          3.     // 当 expression 的结果与 value1 匹配时，执行此处语句
          4.     [break;]
          5.   case value2:
          6.     // 当 expression 的结果与 value2 匹配时，执行此处语句
          7.     [break;]
          8.   ...
          9.   case valueN:
          10.     // 当 expression 的结果与 valueN 匹配时，执行此处语句
          11.     [break;]
          12.   [default:
          13.     // 如果 expression 与上面的 value 值都不匹配，执行此处语句
          14.     [break;]]
          15. }

          一个 switch 语句首先会计算其 expression。然后，它将从第一个 case 子句开始直到寻找到一个其表达式值与所输入的 expression 的值所相等的子句（使用 严格运算符 (en-US)，===）并将控制权转给该子句，执行相关语句。（如果多个 case 与提供的值匹配，则选择匹配的第一个 case，即使这些 case 彼此间并不相等。）

          如果没有 case 子句相匹配，程序则会寻找那个可选的 default 子句，如果找到了，将控制权交给它，执行相关语句。若没有 default 子句，程序将继续执行直到 switch 结束。按照惯例，default 子句是最后一个子句，不过也不需要这样做。

          可选的 [break]语句确保程序立即从相关的 case 子句中跳出 switch 并接着执行 switch 之后的语句。若 break 被省略，程序会继续执行 switch 语句中的下一条语句。

        案例：一个简单的场景选择小游戏

        1. <html>
        2. 	<head>
        3. 		<title></title>
        4. 		<style>
        5. 			span.decision{
        6. 			font-weight: bold;
        7. 			background-color: aqua;
        8. 			border: thin solid;
        9. 			padding: 5px;
        10. 			margin: 5px;
        11. 			}
        12.  
        13. 			span.decisionhover{
        14. 			font-weight: bold;
        15. 			color: #ffffff;
        16. 			background-color: #000000;
        17. 			border: thin solid #dddddd;
        18. 			padding: 5px;
        19. 			margin: 5px;
        20. 			}
        21.  
        22. 		</style>
        23.  
        24. 		<script type="text/javascript">
        25. 			var curScene = 0;
        26.  
        27. 			/* 用DOM方法+函数实现动态替换文字 */
        28. 			function replaceNodeText(id, newText){
        29. 				var node = document.getElementById(id);
        30. 				while (node.firstChild){
        31. 					node.removeChild(node.firstChild);
        32. 				}
        33. 				node.appendChild(document.createTextNode(newText));
        34. 			
        35. 			}
        36. 	
        37. 			function changeScene(decision)
        38. 			{
        39. 				var message = "";
        40. 				var decision1 = "", decision2 = "";
        41.  
        42. 				switch(curScene){
        43. 					case 0:
        44. 						curScene = 1;
        45. 						message = "Your journey begins at a fork in the road.";
        46. 						decision1 = "Take the Path";
        47. 			  			decision2 = "Take the Bridge";
        48. 						document.getElementById("decision2").style.visibility = "visible";
        49. 						break;
        50. 					case 1:
        51. 						if (decision == 1) {
        52. 							curScene = 2
        53. 							message = "You have arrived at a cute little house in the woods.";
        54. 							decision1 = "Walk around Back";
        55. 							decision2 = "Knock on Door";
        56. 						}
        57. 						else {
        58. 							curScene = 3;
        59. 							message = "You are standing on the bridge overlooking a peaceful stream.";
        60. 							decision1 = "Walk across Bridge";
        61. 							decision2 = "Gaze into Stream";
        62. 						}
        63. 						break;
        64. 					case 2:
        65. 						if (decision == 1) {
        66. 							curScene = 4
        67. 							message = "Peeking through the window, you see a witch inside the house.";
        68. 							decision1 = "Sneak by Window";
        69. 							decision2 = "Wave at Witch";
        70. 						}
        71. 						else {
        72. 							curScene = 5;
        73. 							message = "Sorry, a witch lives in the house and you just became part of her stew.";
        74. 							decision1 = "Start Over";
        75. 							decision2 = "";
        76. 							document.getElementById("decision2").style.visibility = "hidden";
        77.  
        78. 						}
        79. 						break;
        80. 					case 3:
        81. 						if (decision == 1)
        82. 						{
        83. 							curScene = 6;
        84. 							message = "Sorry, a troll lives on the other side of the bridge and you just became his lunch.";
        85. 							decision1 = "Start Over";
        86. 			    			decision2 = "";
        87. 							document.getElementById("decision2").style.visibility = "hidden";
        88.  
        89. 						}
        90. 						else
        91. 						{
        92. 							curScene = 7;
        93. 							message = "Your stare is interrupted by the arrival of a huge troll.";
        94. 							decision1 = "Say Hello to Troll";
        95. 			    			decision2 = "Jump into Stream";
        96. 						}
        97. 						break;
        98. 					case 4:
        99. 						if (decision == 1)
        100. 						{
        101. 							curScene = 8;
        102. 							decision1 = "?";
        103. 			    			decision2 = "?";
        104. 						}
        105. 						else
        106. 						{
        107. 							curScene = 5;
        108. 							message = "Sorry, you became part of the witch's stew.";
        109. 							decision1 = "Start Over";
        110. 			    			decision2 = "";
        111. 							document.getElementById("decision2").style.visibility = "hidden";
        112.  
        113. 						}
        114. 						break;
        115. 					case 5:
        116. 						curScene = 0;
        117. 						decision1 = "Start Game";
        118. 						decision2 = "";
        119. 						document.getElementById("decision2").style.visibility = "hidden";
        120.  
        121. 						break;
        122. 					case 6:
        123. 						curScene = 0;
        124. 						decision1 = "Start Game";
        125. 			  			decision2 = "";
        126. 						document.getElementById("decision2").style.visibility = "hidden";
        127.  
        128. 						break;
        129. 					case 7:
        130. 						if(decision == 1)
        131. 						{
        132. 							curScene = 6;
        133. 							message = "Sorry,you became the troll's tasty lunch.";
        134. 							decision1 = "Start Over";
        135. 			    			decision2 = "";
        136. 							document.getElementById("decision2").style.visibility = "hidden";
        137.  
        138. 						}
        139. 						else
        140. 							curScene = 9;
        141. 							decision1 = "?";
        142. 			    			decision2 = "?";
        143. 						break;
        144. 					case 8:
        145. 						break;
        146. 					case 9:
        147. 						break;
        148. 				}
        149.  
        150. 				document.getElementById("sceneimg").src = "scene" + curScene + ".png";
        151.  
        152. 				replaceNodeText("scenetext",message);
        153. 				replaceNodeText("decision1",decision1);
        154. 				replaceNodeText("decision2",decision2);
        155.  
        156. 				//显示决策路径历史
        157. 				var history = document.getElementById("history");
        158. 				if (curScene != 0){
        159. 					var decisionElem = document.createElement("p");
        160. 					decisionElem.appendChild(document.createTextNode("Decision" + decision + "-> Scene" + curScene + ":" + message));
        161. 					history.appendChild(decisionElem);
        162. 				}
        163. 				else{
        164. 					while(history.firstChild)
        165. 					history.removeChild(history.firstChild);
        166. 				}
        167.  
        168. 				/* 用DOM方法实现 
        169. 				var sceneText = document.getElementById("scenetext");
        170. 				while (sceneText.firstChild){
        171. 					sceneText.removeChild(sceneText.firstChild);
        172. 				}
        173. 				sceneText.appendChild(document.createTextNode(message));
        174. 				*/
        175.  
        176. 				/* 用innerHTML方法实现在页面内显示场景描述信息
        177. 				var sceneDesc;
        178. 				if(message)
        179. 					//alert(message);
        180. 					sceneDesc = document.getElementById("scenetext").innerHTML = message;
        181. 				*/
        182. 			}
        183.  
        184. 			
        185. 			
        186. 		</script>
        187. 		
        188. 	</head>
        189. 	<body>
        190. 		<div style="margin-top:100px; text-align:center">
        191. 			<img id="sceneimg" src="scene0.png" alt="Stick Figure Adventure"/>
        192. 			<br/>
        193. 			<div id="scenetext"></div><br/>
        194. 			Please choose:
        195.  
        196. 			<!-- 用span标签来实现同行显示的动态文字按钮 -->
        197. 			<span id="decision1" class="decision" onclick="changeScene(1)" onmouseover=" this.className = 'decisionhover'" onmouseout=" this.className = 'decision'">Start Game!</span>
        198. 			<span id="decision2" class="decision" onclick="changeScene(2)" onmouseover=" this.className = 'decisionhover'" onmouseout=" this.className = 'decision'" style="visibility:hidden"></span>
        199.  
        200. 			<!-- 用input实现按钮，但无法实现动态按钮上面的信息提示
        201. 			<input type="button" id="decision1" value="1" onclick="changeScene(1)"/>
        202. 			<input type="button" id="decision2" value="2" onclick="changeScene(2)"/>
        203. 			-->
        204.  
        205. 			<div id="history"></div>
        206. 		</div>
        207. 	</body>
        208. </html>

      3. 相关阅读:
        NumPy简单学习（需要结合书本）
        jni-03、CMakeLists、gradle配置
        辛苦各位看看 接口返回二进制txt文件显示到页面
        如何使用CodeceptJS、Playwright和GitHub Actions构建端到端测试流水线
        ImportError: /lib64/libstdc++.so.6: version `CXXABI_1.3.9‘ not found的解决方法
        2.10 - 存储管理 2.11 - 页式存储 2.12 - 段式存储 2.13 - 段页式存储
        mysql8.0数据库中explain查询及优化方案
        Springboot+vue的社区医院管理系统(有报告)，Javaee项目，springboot vue前后端分离项目
        Fast——Nginx
        BAPI 和 RFC 的区别
      4. 原文地址：https://blog.csdn.net/hcud024/article/details/127969311