通过id或class获取元素，哪里使用节点？

Question

我需要通过以下代码中的id或class来获取元素，我相信这是function getActualWords(node) {的一部分，我尝试使用function getActualWords(".newsitem_text").get(0)而没有任何成功。类是newsitem_text，这里是小提琴http://jsfiddle.net/y9pw7z0p/4/这里是代码：

// a simple utility function to get only the actual words 
// from the supplied textNode (though this should work for 
// elements also): 


function getActualWords(node) { 

    // gets the textContent of the node, 
    // splits that string on one-or-more ('+') 
    // white-space characters ('\s'); 
    // filters the array returned by split(): 
    return node.textContent.split(/\s+/).filter(function (word) { 
     // word is the current array-element 
     // (a 'word') in the array over 
     // which we're iterating using 
     // Array.prototype.filter(); 
     // here if the word, with leading 
     // and trailing white-space removed 
     // (using String.prototype.trim()) 
     // has a length greater than 0 
     // (a falsey value) the word is kept 
     // in the array returned by filter: 
     return word.trim().length; 

     // note that negative numbers are 
     // also truthy, but no string can 
     // have a negative length; so the 
     // comparison is effectively, if 
     // not explicitly 'greater than zero' 
     // rather than simply 'not-zero' 
    }); 
} 

// named function to insert the specified 
// element after the nth word: 
function insertElemAfterNthWord(opts) { 

    // defining the defaults for the function 
    // (which can be overridden via the opts 
    // Object): 
    var defaults = { 

     // the word after-which to insert the 
     // the new element: 
     'nth': 5, 

     // the text of the new element: 
      'elemText': 'new element', 

     // the type of element (note no '<' or '>'): 
      'elemTag': 'div' 
    }; 

    // iterating over the supplied opts Object to update 
    // the defaults with the user-supplied options using 
    // for...in loop: 
    for (var prop in opts) { 

     // if the opts Object has a property and 
     // that property is not inherited from the 
     // prototype chain: 
     if (opts.hasOwnProperty(prop)) { 

      // we set the defaults property 
      // to the property-value held 
      // in the opts Object: 
      defaults[prop] = opts[prop]; 
     } 
    } 

    // aliasing the defaults object (simply to save 
    // typing; this is not essential): 
    var d = defaults, 

     // ensuring that the supplied string, 
     // specifying the element-type has no 
     // '<' or '>' characters (to ensure validty 
     // this should be extended further to 
     // ensure only alphabetical characters are kept): 
     tag = d.elemTag.replace(/<|>/g, ''), 

     // creating the new element: 
     elem = document.createElement(tag); 

    // setting the textContent of the new element: 
    // ORIGINAL:// elem.textContent = d.elemText; 
elem.innerHTML = d.elemText; 
    // ensuring that the d.nth variable is 
    // a number, not a string, in base-10: 
    d.nth = parseInt(d.nth, 4); 

    // if a node was specified: 
    if (d.node) { 

     // setting the 'n' variable to hold 
     // to the firstChild of the d.node: 
     var n = d.node.firstChild, 

      // using the utility function (above) 
      // to get an Array of only the actual 
      // words held in the node: 
      words = getActualWords(n), 

      // getting the number of words held 
      // in the Array of words: 
      wordCount = words.length; 

     // while (n.nodeType is not a textNode OR 
     // d.nth is a greater number than the number 
     // of words in the node) AND the node has 
     // a following sibling node: 
     while ((n.nodeType !== 3 || d.nth > wordCount) && n.nextSibling) { 

      // we update n to the next-sibling: 
      n = n.nextSibling; 

      // we get an array of words from 
      // newly-assigned node: 
      words = getActualWords(n); 

      // we update the wordCount, in 
      // order to progress through: 
      wordCount = words.length; 
     } 

     // if the number of words is less than 
     // the nth word after which we want to 
     // insert the element, we return from 
     // the function (doing nothing): 
     if (getActualWords(n).length < d.nth) { 
      return; 

     // otherwise: 
     } else { 

      // again we get an Array of actual words, 
      // we slice that Array and then get the 
      // last array-element from that array, 
      // using Array.prototype.pop(): 
      var w = getActualWords(n).slice(0, d.nth).pop(), 

       // here we get the index of that word 
       // (note that this is naive, and relies 
       // upon the word being unique as a 
       // proof-of-concept; I plan to update later): 
       i = n.textContent.indexOf(w); 

       // we split the n textNode into 
       // two separate textNodes, at 
       // supplied index ('i + w.length'); 
       // n remains the shortened 'first' 
       // textNode: 
       n.splitText(i + w.length); 

      // navigating to the parentNode, and 
      // using insertBefore() to insert the 
      // new element ('elem') before the 
      // next-siblin of the n textNode: 
      n.parentNode.insertBefore(elem, n.nextSibling); 

      // doing exactly the same, but adding a 
      // newly-created textNode (of a space character) 
      // between the 'n' textNode (which by definition 
      // ends without a space) and newly-inserted 
      // element: 
      n.parentNode.insertBefore(document.createTextNode(' '), n.nextSibling); 

      // joining adjacent, but unconnected, 
      // textNodes (n and the newly-inserted 
      // space character) together, to become 
      // a single node: 
      n.parentNode.normalize(); 

      // returning the newly-created element 
      // so that it can be modified if required 
      // or simply cached: 
      return elem; 
     } 

    } 
} 



// calling the function, specifying the 
// user-defined properties: 
insertElemAfterNthWord({ 
    // after the tenth word: 
    'nth': 10, 
    // the element-type (a span): 
     'elemTag': 'span', 

    // setting the text of that new element: 
     'elemText': '<img src="https://www.google.com.br/logos/doodles/2015/adolphe-saxs-201st-birthday-6443879796572160.2-res.png" />', 

    // specifying the node into which the element 
    // should inserted: 
     'node': document.querySelector('div > div') 

// chaining the function, to use the Element.classList 
// API to add the 'newlyAdded' class to the 
// newly-created element: 
}).classList.add('newlyAdded'); 

Answer 1

你可以试试这个：

var elem = document.getElementsByClassName('.newsitem_text')[0]; 
getActualWords(elem); 

的getElementById只返回一个节点，但ByClassName返回一个节点列表，所以[ 0]将是第一个元素。 你也可以尝试@Matheus Lopes在评论中提出的方法。

var elem = document.querySelector('.newsitem_text'); 
getActualWords(elem);