以不同方式打印DOM节点

时间:2015-10-29 16:49:32

标签: javascript html dom

如果我有这个非常简单的代码:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title></title>
      <script src = "./ckeditor/ckeditor.js"></script>
      <link rel="stylesheet" type="text/css" href="./css/style.css">
   </head>
   <body>

      <h1 id="h1">CHAPT<s>ER</s> I</h1>

      <script>
         var h1 = document.getElementById("h1");
         console.log(h1);
      </script>

   </body>
</html>

然后我打印节点,我获得:

enter image description here

但是当模具以这种方式出现时:

function editorInit(myatt) { 
   var elemClicked = getElementById("data-clgr-node", myatt, document.body); //clicked Elem by user
   var cloneNode = elemClicked.cloneNode(true); 

   if(activeEditor) { 
      if(activeEditor.element.getAttribute('myatt') == activeId) { 
         return; 
      }
      activeEditor.destroy();
   }
   if(!(activeEditorElement = elemClicked)) {
      return;
   }
   activeEditorElement.setAttribute("contenteditable", true);
   activeEditor = CKEDITOR.inline(elemClicked); 

   activeEditor.on('blur', function() { 

      console.log("\nelemClicked:");
      console.log(elemClicked);
      console.log("\ncloneNode:");
      console.log(cloneNode);

      var res = activeEditor.getData();


      this.element.setAttribute("contenteditable", false);
      activeId = '';
      activeEditor = 0;
      activeEditorElement = 0;
      this.destroy();
   });
   activeEditorElement.focus(); 
}

function getElementByAttribute(attr, value, root) {
    root = root || document.body;
   if(root.hasAttribute(attr) && root.getAttribute(attr) == value) {
        return root;
    }
    var children = root.children; 
    var element;
    for(var i = children.length; i--; ) {
        element = getElementByAttribute(attr, value, children[i]);
        if(element) {
            return element;
        }
    }
    return null;
}

我获得:

enter image description here

第二种情况的解释。 我有一个html页面,其中包含几个段落<p>,每个段落都有自己的属性data-...。当用户点击<p>中的部分文字时,它会打开一个ckeditor内联实例,允许用户编辑文本并格式化<p>的内容。 elemClicked是用户点击的元素。我点击第一个示例中的h1标签,然后按照第一个示例编辑文本。 然而,这两个版画是不同的,当我复制点击的节点时,克隆不是一个精确的副本,因为他们缺少孩子..为什么?

谢谢,我不知道问题是什么..

0 个答案:

没有答案