Js learning notes (13) DOM Document Object Model

1,Node object Element and Document Object inherit from him

Attribute name/method name	Function
ChildNodes	ReturnsNodeList objectIt can also be seen as an array, which indicates all the subnodes under the Node object that calls this attribute. You can useChildNodes []To reference separate elements in the array.
ParentNode	Returns the parent node of a node.
NodeType	Return the node type of the node. IE only supports numeric values, and FF also supports constant values.1: ELEMENT Node,2: ATTRIBUTE node,3: TEXT node,9: DOCUMENT Node
NodeName	Return the node name, that is, the label name.
FirstChild	Returns the first subnode.
LastChild	Returns the last subnode.
Previussibling	Returns the previous sibling node of the node that calls this attribute. If no sibling node exists, null is returned.
NextSibling	Returns the last sibling node of the node that calls this attribute. If no sibling node exists, null is returned.
AppendChild ()	Add a node to the end of the subnode list of the node that calls this method. Note that the parameter is a node rather than a label. This method returns the newly added node. Note that if the node to be added is already part of the document, the existing node in the document will be deleted first.
CloneNode ()	Copy a node. When the parameter is true, all the child nodes of the node will also be cloned. This method returns the copied node.
RemoveChild ()	Delete a specified node from the subnode list. The parameter is the node to be deleted. If the operation succeeds, the deleted node is returned. If the operation fails, null is returned.
ReplaceChild (a, B)	Replace a child node with another node. If the child node succeeds, the replaced node is returned. If the child node fails, null is returned. The first parameter is the new node to be replaced, and the second parameter is the node to be replaced.
InsertBefore (a, B)	Insert a new subnode before a subnode and return a new subnode. The first parameter is the new child node to be inserted, and the second parameter specifies the child node to be inserted before.

 

2, Document Object. The Document object is the root of a Document tree and provides the initial (or top-level) access to Document data. HTMLDocument inherits from him

Attribute name/method name	Function
GetElementsByTagName ()	Returns the Element Node of the specified tag. The type is an array. For example, document. getElementsByTagName ("p ")
GetElementById ()	Returns the Element Node of the specified ID. The type is a single element. For example, document. getElementById ("id ")
CreatElement ()	Create an element node and return it. For example, document. creatElement ("div ")
DocumentElement	Returns the reference to the root element of the document.

 

HTMLDocument object. The Document Object of DOM is put into the HTML Document as the HTMLDocument object.

Attribute name/method name	Function
GetElementsByName ()	Returns the Element Node of the specified name. The type is an array. For example, document. getElementsByName ("name ")

 

Element Object HTMLElement object inherits from it

Attribute name/method name	Function
GetElementsByTagName ()	This method is similar to the method of the same name as the en object. However, this method limits the search scope to the element node that calls this method.
SteAttribute (a, B)	This method is used to change or create the attributes of the node element (when the attribute to be changed is not set). The first parameter is the attribute name, and the second parameter is the attribute value, for example, element. setAttribute ("id", "hcp ")
GetAttribute ()	This method is used to obtain the attribute value of an element node. The parameter is the attribute name. For example, element. getAttribute ("id ")
RemoveAttribute ()	Delete the attribute of an element node. The parameter is the attribute name. For example, element. removeAttribute ("id ")

 

HTMLElement object

Attribute name/method name	Function
ClassName	Class attribute of an element
CurrentStyle	This attribute is an object
InnerHTML	This attribute can be used to set HTML text strings in the element. The HTML code is executed (this attribute is not w3c standard)
InnerText	This attribute can be used to set the plain text in the element. Even if the text contains html code, it will not be executed by the browser, but will be treated as plain text (not w3c standard)
OuterHTML	Set the HTML text string in the element. The element itself is also included (not w3c Standard)
OuterText	Set the plain text in the element. Even if the text contains html code, it will not be executed by the browser, but will be included as plain text. The element itself (not w3c Standard)
OffsetWidth	Returns the width of the visible area of the element. The unit is px. The visible width includes the elements, padding, and border. Margin It does not belong to the visible area. If a scroll bar exists, the part that is not displayed does not belong to the visible area. In IE, if the element is extended, the visible area width after the extended side is calculated. In short, this property returns the actual width of the visible area. This attribute is not w3c standard, but is well supported.
OffsetHeight	Same as above
ClientWidth	The function is similar to offsetWidth, but it only calculates the value of the element itself + padding,
ClientHeight	Same as above
OffsetLeft	Returns the left offset between the boundary of the visible area of an element and the boundary of its parent element (that is, not considering padding, margin, or border). If the parent element (or more advanced parent element) if no relative or absolute positioning attribute exists, the body is regarded as its parent element. When using this attribute, it is best to set the parent element to absolute or relative positioning. In addition,This attribute is applicable to either absolute or static positioning.
OffsetTop	Same as above. No OffsetRight, offsetBottom Statement
OffsetParent	Returns a reference to the nearest parent element with relative or absolute positioning. This attribute is not w3c standard, but is well supported.
ScrollWidth	ReturnsWidthAddPaddingAddScroll width(If there is a scroll bar), note that when there is a scroll bar under IE6 and 7, the width of the left and right sides of the padding will be included, but when there is a scroll bar under IE8 and FF, only the padding on the Left can be used. Therefore, only the width of the Left padding is added.
ScrollHeight	This attribute is not w3c standard, but is well supported.
ScrollTop	Returns or sets the height of the scrolling area.
ScrollLeft	This attribute is not w3c standard, but is well supported.

 

CSS2Properties object,Used to obtain element styles

1,Element. StyleIsCSS2PropertiesThis object only represents the set of inline styles, that is, the styles set by the style attribute in the HTML Tag.

2. element. currentStyle referencesCSS2PropertiesObject, but the object contains the final style of the element. This attribute can only be used in IE browser. This attribute is read-only

Example: var s = element.CurrentStyle. fontSize

3,Window. getComputedStyle ()OrDocument. defaultView. getComputedStyle ()Is a function used to obtain object styles in standard browsers such as FF. This function returnsCSS2PropertiesObject, which includes the final style of the element. This function has two parameters: the first is the element object to obtain the style, and the second parameter is a pseudo element, which is generally set to null. This attribute is read-only.

Example: var s =Window. getComputedStyle (Element,Null). fontSize 

 

DocumentFragment Node

A DocumentFragment node is a special type of node. It does not appear in the document itself. It serves only as a temporary container for a continuous node set and allows these continuous nodes to be operated as an object. When a DocumentFragment is inserted into a document (using the appendChild (), insertBefore (), replaceChild () method), the inserted file is not a DocumentFragment, but a node contained in it.

Example: var f = document. createDocumentFragment (); // obtain an empty DocumentFragment object

F. appendChild (element1) // Add a node to DocumentFragment

F. appendChild (element2) // Add a node to DocumentFragment

Element3.appendChild (f) // insert element1 and element2 as a whole into element3

The advantage of DocumentFragment object is that it can reduce browser backflow and improve efficiency