JavaScript Advanced Learning 7 DOM objects, controlling HTML elements

DOM: The Document Object Model DOM defines a standard way to access and manipulate HTML documents. The DOM renders an HTML document as a tree structure with elements, attributes, and text (the node tree).

Getelementsbyname () Method: Returns the collection of node objects with the specified name.                   syntax: document.getelementsbyname (name) differs from the getElementById () method in that the element is queried by its Name property, not by the id attribute. Note: 1. Because the Name property in the document may not be unique, all getelementsbyname () methods return an array of elements instead of an element.     2. And arrays are similar to the length property, which can be accessed in the same way as an array of accesses, starting with 0.

Getelementsbyname () Method: Returns the collection of node objects with the specified name.                   syntax: document.getelementsbyname (name) differs from the getElementById () method in that the element is queried by its Name property, not by the id attribute. Note: 1. Because the Name property in the document may not be unique, all getelementsbyname () methods return an array of elements instead of an element.     2. And arrays are similar to the length property, which can be accessed in the same way as an array of accesses, starting with 0.

Difference Getelementbyid,getelementsbyname,getelementsbytagname

GetAttribute () Method: Gets the value of the property through the attribute name of the element node.              syntax: Elementnode.getattribute (name) Description: 1. Elementnode: Use methods such as getElementById (), getElementsByTagName () to get to the element node.      2. Name: The attribute name of the element node to be queried

SetAttribute () Method: Add a new property that specifies the name and value, or set an existing property to the specified value.              syntax: Elementnode.setattribute (name,value) Description: 1.name: The name of the property to set.       2.value: The property value to set. Note: 1. Set the specified property to the specified value. If a property with the specified name does not exist, the method creates a new property.       2. Similar to the GetAttribute () method, the SetAttribute () method can only be called by the element node object function.

Node properties: In the Document Object Model (DOM), each node is an object. The DOM node has three important properties: 1. NodeName: Name of the Node 2. NodeValue: The value of the node is 3. NodeType: Node Type one, NodeName property: The name of the node, is read-only. 1. The nodeName of the element node is the same as the label name 2. The nodeName of the attribute node is the name of the property 3. The nodeName of a text node is always #text4. The nodeName of a document node is always #document二, NodeValue property: The value of the node is 1. The nodevalue of an element node is undefined or null2. The nodevalue of a text node is the text itself 3. The nodevalue of an attribute node is the value of the property, the NodeType property: the type of the node, which is read-only. The following common types of nodes: element type    node type  element          1  attribute          2  text          3  Note          8  document          9

Access child node ChildNodes: Accesses the list of all child nodes under the selected element node, the returned value can be considered an array, and he has the length property. Syntax: elementnode.childnodes NOTE: If the selected node has no child nodes, this property returns a NodeList that does not contain a node. Access the first and last entries of the child nodes 1, FirstChild property returns the first child node of the ' ChildNodes ' array. If the selected node has no child nodes, the property returns NULL. Syntax: Node.firstchild description: With Elementnode.childnodes[0] is the same effect. 2. The LastChild property returns the last child node of the ' ChildNodes ' array. If the selected node has no child nodes, the property returns NULL. Syntax: Node.lastchild description: With Elementnode.childnodes[elementnode.childnodes.length-1] is the same effect. Note: In the previous section, we know that Internet Explorer ignores the empty text nodes that are generated between nodes, and other browsers do not. We can filter the child nodes by detecting the node type. (explained in later chapters)

Access parent node ParentNode: Gets the parent node syntax for the specified node: Elementnode.parentnode Note: There can be only one parent node.

Access sibling Node 1. The NextSibling property returns the node immediately following a node (in the same tree hierarchy). Syntax: nodeobject.nextsibling Description: If there is no this node, the property returns NULL. 2. The PreviousSibling property returns the node immediately before a node (at the same tree level). Syntax: nodeobject.previoussibling  Description: If there is no this node, the property returns NULL. Note: Two properties get the node. Internet Explorer ignores white-space text nodes (for example, newline symbols) that are generated between nodes, and other browsers do not ignore them. Workaround: Determine whether the node NodeType is 1, as an element node, skipping.

Insert Node appendchild (): Adds a new child node after the list of the last child nodes of the specified node. Syntax:  appendchild (newnode) parameter:  newnode: Specifies the appended node. Insert Node InsertBefore (): A new child node can be inserted before the existing child node. Syntax:  insertbefore (Newnode,node); argument: NewNode: The new node to be inserted. Node: Specifies that nodes are inserted before this node.

Delete Node removechild (): Removes a node from the list of child nodes. If the deletion succeeds, this method returns the node that was deleted, such as failure, and returns NULL. Syntax: Nodeobject.removechild (node) parameter: node: required to specify the nodes that need to be deleted. Replace element node ReplaceChild (): Implements the substitution of child nodes (objects). Returns a reference to the object being replaced. Syntax: Node.replacechild (newnode,oldnew) parameter: NewNode: Required to replace the Oldnew object.        oldnew: Required, object replaced by NewNode.

The Create Element node Createelement:createelement () method creates an element node. This method can return an Element object. Syntax: document.createelement (tagName) parameter:  tagName: A string value that is used to indicate the type of element being created. Note: To be used in conjunction with the appendchild () or InsertBefore () method, the element is displayed in the page.

The Create Text node Createtextnode:createtextnode () method creates a new text node that returns the newly created textbox. Syntax: document.createTextNode (data) Parameter: Data: String value, which specifies the text of this node.

The browser window's viewable area size gets the size of the browser window (browser viewport, excluding toolbars and scroll bars): First, for ie9+, Chrome, Firefox, Opera, and Safari:?  Window.innerheight-The internal height of the browser window?  Window.innerwidth-Internal width of the browser window two, for Internet Explorer 8, 7, 6, 5:?  Document.documentElement.clientHeight represents the current height of the window in which the HTML document resides.  Document.documentElement.clientWidth represents the current width of the window in which the HTML document resides. or the Body property of the Document object corresponds to the <body> tag of the HTML documents?  Document.body.clientHeight?  Document.body.clientWidth JavaScript scenarios that are useful in different browsers: Var w= document.documentElement.clientWidth       | | Document.body.clientWidth; var h= document.documentElement.clientHeight       | | document.body.clientHeight;

Page size scrollheightscrollheight and scrollwidth, get Web content height and width. First, for IE, opera:scrollheight is the actual height of Web content, can be less than clientheight. Second, for NS, Ff:scrollheight is the Web content height, but the minimum value is clientheight. In other words, when the content of the Web page is less than clientheight, ScrollHeight returns clientheight. Third, browser compatibility var w=document.documentelement.scrollwidth    | | document.body.scrollWidth; var h= Document.documentElement.scrollHeight    | | document.body.scrollHeight; NOTE: Case sensitive scrollheight and scrollwidth also get the height and width that the content in the DOM element actually occupies.

Page size offsetheightoffsetheight and offsetwidth, gets the height and width of the page content (including edges such as scrollbars, which change depending on the window's display size). One, the value offsetheight = clientheight + scroll bar + border. Second, browser compatibility var w= document.documentElement.offsetWidth     | | document.body.offsetWidth; var h= Document.documentElement.offsetHeight     | | document.body.offsetHeight;

The distance and offset of the page volume ScrollLeft: Sets or gets the distance between the left edge of the given object and the leftmost of the currently visible content in the window, which is the contents of the left gray. ScrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window, which is the top gray content. Offsetleft: Gets the computed left position of the specified object relative to the layout or the parent coordinate specified by the OffsetParent property. OffsetTop: Gets the computed top position of the specified object relative to the layout or the parent coordinate specified by the OffsetParent property. Note: 1. Case sensitivity 2. OffsetParent: The parent container for the Postion property (Relative, Absolute, fixed) is set in the layout, starting with the nearest parent node, and looking up from the top of the layer until the body of the HTML.

JavaScript Advanced Learning 7 DOM objects, controlling HTML elements