You don't know. Javascript--dom Basics 2

Reprint: http://blog.csdn.net/i10630226/article/details/49785165

Let's take a look at some of the Dom's method properties in a few pictures:

Probably these are commonly used, the following specific chat.

The judgment of the node type

It is the most important to determine the element node elements, and the following 4 main methods are given.

1. How to tell if a node is an element node

You can use the Iselement () method

<DivId="Test" >aaa</div><!--This is a comment node--><< Span class= "Hljs-title" >script>var iselement = function  (EL) { Return!! El && El.nodetype = = = 1;} var a = {nodeType: 1}console.log (Iselement ( document.getElementById ( "test")); //trueconsole.log (Iselement (document.getElementById ( "test "). nextSibling)); //false//but it's easy to forge a fake "Object node" Console.log (Iselement (a)); Span class= "Hljs-tag" ></SCRIPT>        

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

So to avoid this forgery, you can rewrite the Iselement () method

<DivId="Test" >aaa</Div><!--This is a comment node--<Script>var testdiv = document.createelement (' Div ');var iselement =function(obj) {if (obj && obj.nodetype = = = =1) {First, filter the simplestif (window. Node && (objInstanceof Node) {If it is IE9, determine if it is an instance of nodereturn true; //because obj may be from another document object, it cannot easily return false} try {//the final decision Testdiv.appendchild (obj) in this very inefficient but certainly feasible scheme; Testdiv.removechild (obj); } catch (e) {return false;} return true;} return FALSE;} var a = {nodeType: 1}console.log (Iselement ( document.getElementById ( "test")); Console.log (Iselement (document.getElementById ( Span class= "hljs-string" > "test"). nextSibling); Console.log (Iselement (a)); </SCRIPT>         

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23
• 24
• 25
• 26

2. How to tell if a node is an HTML or XML element node

Both XML and HTML objects support the CreateElement () method, which determines which document object is the same as the nodename of the element, if it compares the "case" of the argument to the created element. If the nodename is the same, the HTML object, and vice versa, is an XML object.

1, first look at the sizzle, jquery comes with the selector engine

Sizzle, jquery comes with a selector enginevar isxml =function (Elem) {var documentelement = Elem && (elem.ownerdocument | | elem). documentelement;return documentelement? documentelement.nodename!==  "HTML": Span class= "Hljs-literal" >false;}; console.log (Isxml (document.getelementbyid (" test ")); //but this is not rigorous, because the root node of the XML, may also be an HTML tag, such as creating an XML document try {var doc = document.implementation.createdocument ( null,  ' HTML ', null); console.log (doc.documentelement); console.log (Isxml (DOC));} catch (e) {console.log (              

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

2, we look at MooTools's slick selector engine source code:

var isxml =function (document) {return (!! Document.xmlversion) | | (!! Document.xml) | | (Tostring.call (document) = =  [object XMLDocument] ') | | (Document.nodetype = = 9 && document.documentElement.nodeName! = //Lite version var isxml = window. HTMLDocument? function (DOC) {return! (Doc instanceof HTMLDocument);} : function (DOC) {return in doc;    

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

3, the method of their own implementation-the simplest

var isXML = function(doc) {    return doc.createElement("p").nodeName !== doc.createElement("P").nodeName;}

• 1
• 2
• 3

Then it's very simple to judge the HTML node.

var isHTML = function(doc) {   return doc.createElement("p").nodeName === doc.createElement("P").nodeName;}console.log(isHTML(document));

• 1
• 2
• 3
• 4

3. Determine the containment relationship between nodes:

Modern browsers can use the contains () method, Anode.contains (BNode) to determine if a>b are included.

<div id= "P-node" > <div id=" C-node " > child node Content </div></div><script> Span class= "Hljs-keyword" >var pnode = document.getElementById ( "P-node"); var CNode = document.getElementById (" C-node "). Childnodes[0"; Alert (Document.contains (Pnode)); //but the IE8 browser does not support alert (Pnode.contains (CNode)); </SCRIPT>          

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

But IE does not support the document type node and the text type node contains the relationship of the judgment, you can customize the implementation of a compatible browser of the Judgment method.

The custom Implementation Fixcontains () method is a fix for this problem.

  <DivId="P-node" ><DivId="C-node" > Child node Content</Div></Div><Script>The method of determining Node A contains node B, that is, the parent node comparison of A and B;functionfixcontains (A, b) {try {while ((b = b.parentnode)) {if (b = = = a) {return Span class= "Hljs-literal" >true; }} return FALSE;} catch (e) {return false;}} var pnode = document.getElementById (var CNode = document.getElementById (" C-node "). Childnodes[0];alert (Fixcontains (Pnode, CNode)); //alert (Fixcontains (document, CNode)); </SCRIPT>         

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22

Node inheritance hierarchy and nested rule 1, Dom node inheritance hierarchy

1, text node inheritance hierarchy--there are 6 layers of relationship

2, element node inheritance hierarchy--there are 7 layers of relationship

console.log(Object.getOwnPropertyNames(document.createElement("p").__proto__));//第一层有两个属性console.log(Object.getOwnPropertyNames(document.createElement("p").__proto__.__proto__));//第二层有82个属性

• 1
• 2

There are so many of the 1 empty Div's own properties

So there are now some MVVM frameworks to manage these DOM node hierarchies, such as Reactjs Virtual DOM acceleration.

2. HTML Nesting Rules

1. Block elements and inline elements

Block element

It is generally a container for other elements that can hold inline elements and other blocky elements, and block elements repel other elements to the same line, with width (width) height (height) in effect.

Block-level elements of common block elements- h1,h2,h3,h4,h5,h6,hr,div,fieldset,form,dl,address,ol,p,table,ul,pre etc.

Features of the block element:

• 1. Always start from another line;
• 1. Height, row height and top and bottom margin can be controlled;
• 1. The width default is 100% of the container in which it is located, unless you set a width.

Inline elements

Inline elements can only hold text or other inline elements, which allow other inline elements to be on the same line, but the width height (height) does not work.

Common inline elements- a,b,br,em,i,img,input,strong,textarea,span,label such as common

Features of the inline element:

• 1. And the other elements are on one line;
• 1. Height, row height and top and bottom margin can not be changed;
• 1. Width is the width of the text or picture that it holds, and it cannot be changed.

The difference between them two:

1. Block-level elements are commonly used to build site architecture, layout, hosting content
2. Inline elements are generally used in the site content of some of the details or parts, to "emphasize, distinguish style, superscript, subscript, Anchor Point" and so on.
3. They can be converted to each other.display:inline|block
4. Features of block-level elements: each block-level element is displayed starting with a new line, followed by an element that requires another line

All right, let's just say something about block-level elements and inline elements, and here's our focus--nesting rules:

3. Nesting rules

Block-level elements can contain inline elements or some block-level elements, but inline elements cannot contain block-level elements, which can contain only other inline elements.
Block-level elements cannot be placed inside p.
There are several special block-level elements that can contain only inline elements and cannot contain block-level elements. As h1,h2,h3,h4,h5,h6,p,dt
A div can be included in Li
Block-level elements are tied to block-level elements, inline elements, and inline elements. (Wrong: <div> )

A picture of outhtml and innertext, InnerHTML:

You don't know. Javascript--dom Basics 2