이것은 "Uncaught NotFoundError : 존재하지 않는 컨텍스트에서 노드를 참조하려고했습니다."오류가 있습니까?

Question

TLDR :

: 완전 예를 들어 http://codepen.io/andrew-luhring/pen/Dkned .

아래와 같이 주석 처리 된 행의 주석을 제거하면 오류가 발생합니다. "잡히지 않은 NotFoundError : 존재하지 않는 컨텍스트에서 노드를 참조하려고했습니다."

(function() { 
    //==================================================== 
    // globals 
    //  
    // 
    // 
    var div = document.createElement('div'); 
    var bd = document.body; 
    var range = document.createRange(); 
    div.id = 'swagyo'; 


    //==================================================== 
    // surroundTxt 
    // takes a range object and surrounds it with (withThis) 
    // 
    // 
    // 
    function surroundTxt(rangeObj, withThis) { 
     rangeObj.surroundContents(withThis); 
    } 


    //==================================================== 
    // prettyfyText 
    // takes a string, splits it at the regex, prepends keepthis, appends addThis 
    // Returns an array of the newly created substrings. 
    // 
    // 
    function prettyfyText(str, regExp, addThis, keepthis) { 
    var result; 
    if (str.search(regExp) != -1) { 
     var splitted = str.split(regExp), 
      arr = []; 
     if (keepthis) { 
      for (var i = 0; i < splitted.length; i++) { 
       result = keepthis + '' + splitted[i] + ' ' + addThis; 
       arr.push(result); 
      } 
     } else { 
      for (var i = 0; i < splitted.length; i++) { 
       result = splitted[i] + ' ' + addThis; 
       arr.push(result); 
      } 
     } 

    } else { 
     result = 'fail \n ' + str 
     console.log(result); 
     return (false); 
    } 
    return arr; 
} 


    //==================================================== 
    // constructTxt 
    // takes the text that immediately follows div#info and passes it to surroundTxt. 
    // 
    // 
    // 
    function constructTxt() { 
     var txt = info.nextSibling; 
     range.setStart(txt, 0); 
     range.setEnd(txt, txt.length); 
     setTimeout(surroundTxt(range, div), 10); 
    } 


    // grabPreText 
    // takes the text within the pre element (pretext) 
    // sends (pretext) to prettyfyText - names the returned array (result) 
    // 
    // 
    // 
    // 
    //==================================================== 
    //==================================================== 
    //   THIS IS WHERE THE ERRORS ARE 
    //      v 
    //      v 
    //==================================================== 
    //==================================================== 
    function grabPreText() { 
     var pre = info.getElementsByTagName('pre'), 
      parent = info, 
      pretext, 
      result, 
      content, 
      resultArr = [], 
      newrange = document.createRange(), 
      re = new RegExp(('Applications'), 'g'), 
      newline = '\n', 
      keepthis = 'applications', 
      p = document.createElement('p'), 
      newdiv = document.createElement('div'); 

     for (var i = 0; i < pre.length; i++) { 
      pretext = pre[i].innerText; 
     } 
     result = prettyfyText(pretext, re, newline, keepthis); 

     for (var i = 0; i < result.length; i++) { 
      var current = result[i]; 

      resultArr.push(current); 
      console.log(resultArr[i].length); 



    //uncommenting 113- 116 the following will cause the error: 
    /* 
     newrange.setStart(resultArr[i], 0); 
     newrange.setEnd(resultArr[i], resultArr[i].length); 
     console.log(newrange); 
     newrange.surroundContents() 
    */ 

      content = document.createTextNode(result[i]); 
      newdiv.appendChild(content); 

    } 


    if (result) { 
     console.log('\n \n ========= \n' + newdiv.innerText); 
     console.log("if newdiv is: " + newdiv); 
     console.log("and if parent is: " + parent); 
     console.log("and if pre is: "+ pre); 
     console.log("then why does parent.replaceChild(newdiv, pre) produce the error:" + "\n An attempt was made to reference a Node in a context where it does not exist. ?"); 
    //  parent.replaceChild(newdiv, pre); 
     info.appendChild(newdiv); 
     var space = document.createTextNode(newline + ' ' + newline); 
     info.appendChild(space); 

    } 
    } 


    //====================================================  
    // totallyReady (the equivilant of document ready.) 
    //  
    // 
    // 
    function totallyReady() { 
     var info = document.getElementById('info'); 
     grabPreText(); 
     constructTxt(); 
    } 
    setTimeout(totallyReady, 10); 
})(); 

본질적으로 내가하려는 것은 dom에 텍스트 노드로 삽입 된 텍스트를 가져 와서 형식이 지정된 버전으로 바꾸는 것입니다.

html로의 조각은 다음과 같습니다 : 당신은 텍스트 노드 문자열을 혼동하고

<html> 
<body> 
    <div id="info"> 
     <pre> 
    /Applications/Arduino.app/Contents/Resources/Java/hardware/tools/avr/bin/avr-g++ -c -g -Os -w -fno-exceptions -ffunction-sections -fdata-sections -DF_CPU=16000000L -DARDUINO=100 -I/Users/worker_bee/Documents/Arduino/ardu -I/Applications/Arduino.app/Contents/Resources/Java/hardware/arduino/cores/arduino -I/Applications/Arduino.app/Contents/Resources/Java/hardware/tools/avr/avr/include/avr -I/Applications/Arduino.app/Contents/Resources/Java/hardware/arduino/variants/standard -mmcu=atmega328p applet/ardu.cpp -o applet/ardu.o 
     </pre> 
    </div>applet/ardu.cpp:2: error: expected unqualified-id before '/' token applet/ardu.cpp: In function 'void setup()': applet/ardu.cpp:14: error: 'outputPin' was not declared in this scope applet/ardu.cpp: In function 'void printStuff()': applet/ardu.cpp:36: error: 'outputPin' was not declared in this scope applet/ardu.cpp:37: error: 'writeStuff' was not declared in this scope applet/ardu.cpp: In function 'void writeStuff()': applet/ardu.cpp:50: error: 'outputPin' was not declared in this scope make: *** [applet/ardu.o] Error 1 
</body> 
</html> 

Answer 1

Why will uncommenting this cause the error An attempt was made to reference a Node in a context where it does not exist ?

newrange = document.createRange() 
newrange.setStart(resultArr[i], 0); 
newrange.setEnd(resultArr[i], resultArr[i].length); 
newrange.surroundContents() 

. setStart은 인수로 DOM 노드가 필요하지만 result[i] (따라서 resultArr[i])은 일반 문자열입니다. 또한 surroundContents method에는 인수가 필요합니다.