Front-end Framework learning-node operations

Node operation I. Creation of nodes 1 document.createelement ()

Standard: Pass in a tag name, support non-standard label namedocument.createElement("c")

Ie6-7: Can be passed in together with the user to build

document.createElement("<input name=‘name‘>")

eg

//http://thunderguy.com/semicolon/2005/05/23/setting-the-name-attribute-in-internet-explorer/function createNamedElement(type, name) {    var element = null;    // Try the IE way; this fails on standards-compliant browsers    try {        element = document.createElement(‘<‘ + type + ‘ name="‘ + name + ‘">‘);    } catch (e) {    }    if (!element || element.nodeName != type.toUpperCase()) {        // Non-IE browser; use canonical method to create named element        element = document.createElement(type);        element.name = name;    }    return element;}

2 InnerHTML

innerHTML is created 2 to 10 times times faster than createelement

Test code

var start = new Date();for(var i = 0 ;i<1000;i++){  document.createElement("c");}var end = new Date();console.log(end-start)var start = new Date();var str =""for(var i = 0 ;i<1000;i++){  str += "<c></c>"}  document.innerHTML=str;var end = new Date();console.log(end-start)

The test results are at least twice times faster.

innerHTML can generate a large heap of nodes at a time.

• Using innerHTML in Ie6-8 will trimleft the user string.
• In IE, some element nodes are read-only, and rewriting innerHTML will be an error. Node there.注释，style,script,link,meta,noscript
• innerHTML does not execute scripts in script. (with defer attribute time) can execute script.
• Some labels cannot be separated as sub-elements of a div, such as td,th, and need to be in the most outer layers of bread in order to be put into the innerhtml interpretation. Otherwise the browser will be generated as a normal text node.

3 insertadjacenthtml

insertAdjacentHTML is the product of IE private implementation, the compatibility is poor. Flexible insertion Mode

If the insetadjacenthtml is not supported, the simulation is as follows:

if (typeof htmlelement!== "undefined" &&! HTMLElement.prototype.insertAdjacentElement) {HTMLElement.prototype.insertAdjacentElement = function (where, Parsednode) {switch (Where.tolowercase ()) {case ' beforebegin ': this.parentNode.insertBe            Fore (Parsednode, this) break;                Case ' Afterbegin ': This.insertbefore (Parsednode, this.firstchild);            Break                Case ' BeforeEnd ': This.appendchild (Parsednode);            Break Case ' Afterend ': if (this.nextsibling) This.parentNode.insertBefore (Parsednode, This.nex                tsibling);                else This.parentNode.appendChild (Parsednode);        Break }} HTMLElement.prototype.insertAdjacentHTML = function (where, htmlstr) {var r = This.ownerDocument.createRa        Nge ();        R.setstartbefore (this); var parsedhtml = R.createcontextUalfragment (HTMLSTR);         This.insertadjacentelement (where, parsedhtml)} HTMLElement.prototype.insertAdjacentText = function (where, txtstr) { var parsedtext = document.createTextNode (txtstr) this.insertadjacentelement (where, Parsedtext)}}

Createcontextualfragment:firefox Private Properties

is a strength method of the Range object. Equivalent to insertadjacenthtml the content directly into the DOM tree, Createcontextfragment allows the string to be converted to document fragmentation.

No new instantiation is implemented with two constructors with a prototype, so that chained operations are not interrupted by the new keyword

function $(a, b) { //第一个构造器    return new $.fn.init(a, b); //第二个构造器}//将原型对象放到一个名字更短、更好记的属性中//这是jQuery人性化的体现，也方便扩展原型方法$.fn = $.prototype = {    init: function(a, b) {        this.a = a;        this.b = b;    }}//共用同一个原型$.fn.init.prototype = $.fn;var a = $(1, 2);console.log(a instanceof $); //trueconsole.log(a instanceof $.fn.init); //true

The ability to pass in a large push of characters to grow a bunch of nodes is implemented by the Parsehtml method.

Todo

Things to be aware of when implementing HTML

How to Achieve

corresponding browser handling issues

Front-end Framework learning-node operations