zoukankan      html  css  js  c++  java
  • 《DOM启蒙》 随笔

    使用 Javascript 字符串创建并向 DOM 中添加元素与文本节点


    innerHTML、outerHTML、textContent 及 insertAdjacentHTML() 属性和方法提供了使用 Javascript 字符串创建并向 DOM 中添加节点的功能。

    复制代码<!DOCTYPE html>
    <html lang='en'>
      <body>
        <div id='A'></div>
        <span id='B'></span>
        <div id='C'></div>
        <div id='D'></div>
        <div id='E'></div>
    
        <script>
          // 创建一个 strong 元素和文本节点,并添加到 DOM
          document.getElementById('A').innerHTML = '<strong>Hi</strong>';
    
          // 创建一个 div 元素和文本节点来替换 <span id='B'></span>
          // 注意 span#B 被替换掉了
          document.getElementById('B').outerHTML = '<div id="B">replace</div>';
    
          // 创建一个文本节点并用它更新 div#C
          document.getElementById('C').textContent = 'update';
    
    
          // 下面是非标准的扩展 例如,innerText 和 outerText
    
          // 创建一个文本节点,并用它更新 div#D
          document.getElementById('D').innerText = 'Keep it';
    
          // 创建一个文本节点,并用它替换 div#E (注意 div#E 没了)
          document.getElementById('E').outerText = 'real!';
    
        </script>
      </body>
    </html>

    经过 Javascript 部分的操作后,部分 DOM 树变成了这个样子:

    复制代码<div id="A"><strong>Hi</strong></div>
    <div id="B">replace</div>
    <div id="C">update</div>
    <div id="D">Keep it</div>
    real!

    innerHTML 属性会将字符串中找到的 HTML 元素都转换成实际的 DOM 节点,而 textContent 只能用来构造文本节点。如果你传给 textContent 的字符串包含 HTML 元素,它会直接按文本格式吐出来。

    insertAdjacentHTML() 方法仅在 Element 节点上有效,是个比前述方法精准得多的方式。使用这个方法,就可以将节点插入到开标签之前,开标签之后,闭标签之前,以及闭标签之后:

    复制代码<!DOCTYPE html>
    <html lang='en'>
      <body>
        <i id='elm'>最近</i>
    
        <script>
          var elm = document.getElementById('elm');
    
          elm.insertAdjacentHTML('beforebegin', '<span>A</span>');
          elm.insertAdjacentHTML('afterbegin', '<span>B</span>');
          elm.insertAdjacentHTML('beforeend', '<span>C</span>');
          elm.insertAdjacentHTML('afterend', '<span>D</span>');
        </script>
      </body>
    </html>

    执行完 inline 的 Javascript 后, 部分 DOM 树如下:

    复制代码<span>A</span>
    <i id="elm">
      <span>B</span>
      最近
      <span>C</span>
    </i>
    <span>D</span>

    next:

    复制代码<!DOCTYPE html>
    <html lang='en'>
      <body>
        <div id='A'>
          <strong>hanzichi</strong>
        </div>
    
        <script>
          console.log(document.querySelector('#A').innerHTML); //   <strong>hanzichi</strong>
          console.log(document.querySelector('#A').textContent); //   hanzichi
          console.log(document.querySelector('#A').innerText); // hanzichi
    
        </script>
      </body>
    </html>

    将 NodeList 或者 HTMLCollection 转换成 Javascript 数组


    将节点列表与 HTML 集合转换成真正的 Javascript 数组可以有许多好处。其一,考虑到 NodeList 和 HTMLCollection 都是实时列表,这么做使得我们能够创建该列表的快照,不与实时 DOM 绑定。其二,转换列表成数组可以使用 Array 对象提供的方法。

    复制代码// IE8 及之前无效
    var arrayOfNodes = Array.prototype.slice.call(someNode.childNodes, 0);
    
    // 兼容
    function convertToArray(nodes) {
      var array = null;
      try {
        array = Array.prototype.slice.call(nodes, 0);
      } catch(ex) {
        array = [];
        for (var i = 0, len = nodes.length; i < len; i++)
          array.push(nodes[i]);
      }
    
      return array;
    }

    获取文档中当前聚焦/激活节点的引用


    使用 document.activeElement,我们可以快速取得文档中聚焦/激活节点的引用。在如下代码中,当页面加载,我们将文档聚焦设为 <textarea> 节点然后使用 activeElement 属性取得该节点的引用:

    复制代码<!DOCTYPE html>
    <html lang='en'>
      <body>
        <textarea></textarea>
    
        <script>
          document.querySelector('textarea').focus();
    
          console.log(document.activeElement); // <textarea>
        </script>
      </body>
    </html>

    使用 document.hasFocus() 方法,可以知道用户当前是否聚焦在加载该 HTML文档的窗口上(并不是判断某元素是否是焦点)。在如下代码中,你可以看到当我们执行代码,然后聚焦在另一个窗口、标签或者应用程序时,getFocus() 会返回 false。

    复制代码setTimeout(function() {
      console.log(document.hasFocus());
    }, 5000);
  • 相关阅读:
    课程设计——五子棋(201521123038)
    JAVA课程设计——单机版五子棋
    201521123038 《Java程序设计》 第十四周学习总结
    201521123038 《Java程序设计》 第十三周学习总结
    网络15软工个人作业5——软件工程总结
    201521123035-个人作业4——alpha阶段个人总结
    201521123035个人作业3
    201521123035结对编程
    201521123035软工阅读作业2
    软件工程个人阅读作业1
  • 原文地址:https://www.cnblogs.com/zhengxingpeng/p/6678777.html
Copyright © 2011-2022 走看看