JavaScript DOM Objects (2)

Accessing sibling nodes

1. The NextSibling property returns the node immediately following a node (at the same tree level).

Grammar:

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).

Grammar:

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.

Problem Solving methods:

Determines 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.

Grammar:

AppendChild (NewNode)

Parameters:

NewNode: Specifies the appended node.

Let's take a look at creating a new P tag inside the div tag, the code is as follows:

Insert Node InsertBefore ()

The InsertBefore () method inserts a new child node before the existing child node.

Grammar:

InsertBefore (Newnode,node);

Parameters:

NewNode: The new node to be inserted.

Node: Specifies that nodes are inserted before this node.

Let's take a look at the following code, inserting a node before the specified node.

Delete Node removechild ()

The RemoveChild () method 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.

Grammar:

Nodeobject.removechild (node)

Parameters:

Node: required, specify the node that needs to be deleted.

Let's take a look at the code below and delete the child points.

Replace element node ReplaceChild ()

ReplaceChild implements the substitution of child nodes (objects). Returns a reference to the object being replaced.

Grammar:

Parameters:

NewNode: Required to replace the Oldnew object.
Oldnew: Required, object replaced by NewNode.

Let's take a look at the following code:

Creating ELEMENT Nodes CreateElement

The CreateElement () method creates an element node. This method can return an Element object.

Grammar:

Document.createelement (TagName)

Parameters:

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.

Let's create a button with the following code:

<script type= "Text/javascript" >   var body = document.body;    var input = document.createelement ("input");     Input.type = "button";     Input.value = "Create a button";     Body.appendchild (input);   </script>  

Effect: In an HTML document, create a button.

We can also use the setattribute to set the property, the code is as follows:

<script type= "Text/javascript" >     var body= document.body;                var btn = document.createelement ("input");     Btn.setattribute ("type", "text");     Btn.setattribute ("name", "Q");     Btn.setattribute ("value", "Use SetAttribute");     Btn.setattribute ("onclick", "Javascript:alert (' This is a text! ');");          Body.appendchild (BTN);  </script>  

Effect: In an HTML document, create a text box that uses setattribute to set the property value. When you click on this text box, the dialog box "This is a text!" pops up.

Create a text node createTextNode

The createTextNode () method creates a new text node and returns the newly created textual node.

Grammar:

document.createTextNode (data)

Parameters:

Data: A string value that specifies the text for this node.

Let's create a <div> element and add a message to it with the following code:

browser window viewable area size

To get the size of the browser window (the viewport of the browser, excluding toolbars and scroll bars):

First, for ie9+, Chrome, Firefox, Opera and Safari:

? Window.innerheight-Interior height of the browser window

? Window.innerwidth-Interior width of the browser window

Second, 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 ScrollHeight

ScrollHeight and ScrollWidth, get the Web content height and width.

First, for IE, Opera:

ScrollHeight is the actual height of the Web content, which can be less than clientheight.

Second, for NS, FF:

ScrollHeight is the height of the Web content, 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 offsetheight

Offsetheight 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).

First, 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

Let's take a look at the following figure:

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.

Attention:

1. Case-sensitive

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 DOM Objects (2)