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

Question

我需要在以下代码中通过 id 或 class 获取元素，我相信它位于 function getActualWords(node) { 部分，我尝试使用 function getActualWords(".newsitem_text ").get(0) 没有任何成功。该类是 newsitem_text，这里是 fiddle 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);