Today is June 25, 2019, nothing else, write an article to look at his head and filled the number of JavaScript knowledge!
Here it is the first chapter:
Speaking of JavaScript, what is it? Back-end scripting language? Front-end programming language? Or running on the web browser programming language? I feel it is considered that! I can only say that it is closer to the site now!
It is to give us HTML, css plus behavior, the site has his own ideas, their own computing power and operational effectiveness!
Today I want to talk about the inside of JavaScript DOM model:
DOM model is called "Document Object Model" (Document Object Model) concept: a web page into a JavaScript object, which can perform various operations with scripts (such as add or delete content);
The minimum constituent unit of the DOM model called nodes (node). Tree structure (DOM tree) of the document, that is the various types of nodes. Each node can be seen as a leaf document tree.
Next, we start from the node attributes:
1, nodeTypeproperty returns an integer value representing the type of the node.
2, nodeNameproperty returns the name of the node.
3, nodeValueproperty returns a string that represents the current value of the text node itself, the read-write property.
4, textContentproperty returns the text content of the current node and all its descendant nodes.
5, the baseURIproperty returns a string that represents the absolute path of the current page. Browser Based on this property, calculate the relative URL path on the page. This attribute is read-only.
6, ownerDocumentproperty returns the top-level document object of the current node is located, that documentobject.
7、nextSiblingProperty returns immediately behind the first sibling node of the current node. If there is no sibling node after the current node is returned null.
8, previousSiblingthe attribute of the return to the previous current node, nearest sibling node. If there is no sibling nodes ahead of the current node is returned null.
9, parentNodeproperty returns the parent of the current node. For a node, its parent node may be only three types: Node element (Element), document node (document) and the document fragments node (documentfragment).
10, firstChildproperty returns the first child of the current node, if the current node has no children, it is returned null.
11, childNodesproperty returns a similar array of objects ( NodeListsets), including members of all the child nodes of the current node.
12, isConnectedproperty returns a Boolean value that indicates whether the current node in the document.
The last node is our method:
1, appendChildthe method accepts a node object as a parameter, which as the last child node, the current node is inserted. The return value is the child node into the document.
E.g:var p = document.createElement('p');document.body.appendChild(p);
2, hasChildNodesthe method returns a Boolean value indicating whether the current node has children.
3, cloneNodea method for cloning a node. It accepts as a parameter a Boolean value indicating whether node while clones. Its return value is a new node cloned.
E.g:var cloneUL = document.querySelector('ul').cloneNode(true);
4, insertBeforea method for a node is inserted into the specified position inside the parent node ( insertBeforemethod takes two parameters, the first parameter is the node to be inserted newNode, the second parameter is the parent node of parentNodea child of internal node referenceNode. newNodeWill be inserted in referenceNodethis in front of child nodes. the return value is the new node is inserted newNode.).
5, removeChildaccepts a child node as a parameter, for removing the child from the current node. The return value is a child node to remove.
6, replaceChilda method for a new node to replace a child of the current node.
Almost On the right! Well, call it a day!