JQuery3.1.1 Source code Interpretation (16) "Dom-html" __html

The previous chapter talked about several inserts of the DOM, although the inserts are in a variety of ways, but as long as you understand the native methods, the code does not look very complicated. A more interesting function is the Buildfragment method, which converts an HTML string to a DOM fragment. This chapter looks at other ways of Dom. HTML, text method

When it comes to elem operations, it's necessary to mention the type of elem. NodeType, the NodeType of one node is 1 for the element node, 3 for the text node, and 9 for document,11 for DocumentFragment, which is the document fragment described in the previous chapter. Probably know these a few to be possible.

Native Elem methods include Innerhtml,outerhtml,innertext,outertext, however, before starting this chapter, be sure to be familiar with these methods. Decrypt the jquery kernel Dom operation method (ii) Html,text,val.

A significant difference between InnerHTML and outerhtml is that outer will also include the current Elem and get an HTML string, inner not.

There is no significant difference between innertext and Outertext acquisition, but when set, outer will delete the current elem, or use caution.

Sometimes because of browser compatibility problems, you can use textcontent instead of innertext. Access function Source

The following is jQuery.fn.html and text of the source code, read it must have something to say:

JQuery.fn.extends ({
  html:function (value) {return
    access (this, function (value) {
      ...//callback function 
  
   }, null, value, Arguments.length)
  },
  text:function (value) {return
    access (this, function (value) {
   
    ...//callback function }, NULL, value, Arguments.length)}) ;
   
  

Well, I admit, it's the same routine, I'll give it to the access function, then callback the function, and I guess this time the callback function must be called to bind this to the current elem. This routine is familiar, yes, is the Dommanip function.

In fact, access has been introduced before, but it is worthwhile to reproduce the introduction.

Like HTML, text, CSS functions of these functions, there is a feature that can take parameters, or without parameters, first use the Access function to correct the parameters, execution callback.

var access = function (Elems, FN, key, value, chainable, Emptyget, raw) {var i = 0, Len = elems.length, bulk =

  key = null;
    Key values multiple situations if (jquery.type (key) = = = "Object") {chainable = true;
    For (i in key) {Access (Elems, FN, I, key[i], true, Emptyget, raw);
    }//Sets condition} else if (value!== undefined) {chainable = true;
    Value is a function and I don't know what the situation is if (!jquery.isfunction (value)) {raw = true;
        } if (bulk) {//Execute callback if (raw) {Fn.call (elems, value);

      fn = null;
        ... except when executing function values} else {bulk = fn;
        fn = function (Elem, key, value) {return Bulk.call (JQuery (elem), value);
      };
          }//CSS Go this step if (FN) {for (; i < Len; i++) {fn (elems[i), key, Raw?
     Value:value.call (elems[i], I, FN (elems[i], key)); }}//chainable represents the parameter length 0 or 1 if (chainable) {return elems;
  }//Gets if (bulk) {return fn.call (elems); Return len?
FN (elems[0], key): Emptyget; };

In Access, a value is a function of the situation, did not encounter, temporarily do not know what meaning. Access functions basically do not make too much of a change in processing to look, it does not look very difficult. (Haha, found, behind the CSS operation, key can be object) fn.html Source

Now this is the main way to look at this callback function, the current this makes point to the JQuery object, and does not point to a separate Elem element, HTML must be judged:

JQuery.fn.extends ({html:function (value) {return access (this, function (value) {var elem = this[0] | |
      {}, i = 0, L = this.length;
      If the argument is empty, get if (value = = undefined && Elem.nodetype = 1) {return elem.innerhtml; The//Set operation if (typeof value = = = "string" &&!rnoinnerhtml.test (value) &&!wrapmap [(Rtagname.exec (value) | | [ "", "" ] )

        [1].tolowercase ()]) {value = Jquery.htmlprefilter (value); try {for (; I < L; i++) {elem = this[i] | |

            {}; remove element nodes and prevent memory leaks if (Elem.nodetype = 1) {//Cleandata is clear
              The DOM binds the cache data Jquery.cleandata (GetAll (Elem, false));
            elem.innerhtml = value;

        } elem = 0; If using InnerHTML throws a exception, use the fallback method to} catCH (e) {}} if (Elem) {this.empty (). append (value);
  }, NULL, value, arguments.length); }
} );

Fn.text Source

The following is the text source code, about HTML and text in the beginning has been introduced, is a comparison of the basic DOM operation Bar, direct look at the source code bar:

JQuery.fn.extends ({
  text:function (value) {return
    access (this, function (value) {
      //earlier already said, this in the callback function) Point to JQuery object return
      value = = undefined?
        Get
        Jquery.text (This):
        //Set
        This.empty (). each (function () {
          if (This.nodetype = 1 | | this.nodet ype = = 11 | | This.nodetype = = 9) {
            this.textcontent = value;
          }}
        ;
    }, NULL, value, arguments.length);
} );

First look at the set of the case, here is a empty function, the source code in the following, two functions, first empty the DOM content, in the delete data cache to save. Instead of using the InnerText method, we use the Textcontent method, which seems to be better for set, textcontent compatibility.

JQuery.fn.extends ({
  empty:function () {
    var elem,
      i = 0;

    for (; (Elem = this[i])!= null; i++) {
      if (Elem.nodetype = = 1) {

        //Prevent memory leaks jquery.cleandata
        (GetAll (Elem, false));

        Empty
        elem.textcontent = "";
      }
    }

    return this;
  },
});

The Set method knows, then get. Get first called the Jquery.text method, looking for a long time to find where it is, the original call is Sizzle in the method:

Jquery.text = Sizzle.gettext;

var getText = Sizzle.gettext = function (elem) {
  var node,
    ret = "",
    i = 0,
    nodeType = elem.nodetype;
  
   if (!nodetype) {
    //Elem is an array of Dom while
    (node = elem[i++]) {
      //to step up the
      ret = getText (node); 
   } return

  ret;

  

Summary

I tested it myself in the browser, found that the Textcontent method does not delete the blank, and JQuery's text method has not done filtering, each browser parsing is not the same, may lead to browser differences, the actual use of time, or to be careful, how long a mind. Reference

Node.nodetype

Decrypt the jquery kernel Dom operation method (ii) Html,text,val