Chapter III JavaScript manipulating DOM objects

Common methods:

1. Access node: Obtain a specified node through DOCUMENT.GETELEMENTBYXXX () and then access the node through the following attribute nodes:
First part: Node properties
A:parentnode returns the parent node of the node
B:childnodes returns a collection of child nodes that can be traversed for a loop
C:firstchild returns the first child node of a node, with blank content counted as the first text node
D:lastchile returns the last child node ibid.
E:nextsibling returns the next node blank content count the first text node
F:previoussibling return to previous node ibid.

Part II: Element properties
A:firstelementchild The first is the child node of the element, avoiding the empty node
B:lastelementchild the last one is the child of the element, avoiding the empty node
C:nextelementsibling Next is the sibling node of the element, avoiding the empty node
D:previouselementsibling the sibling node of the element, avoiding the empty node

Part III: Properties of the action node
A:getattribute ("property name") Gets the value of the property
B:setattribute ("Property name", "property value") to set the value of the property

There are many types of nodes: General: Label node attribute node text node
NodeType 1 2 3
NodeName Tag Name Property name #text
NodeValue Null property value text content
corresponding to: Element Attribute Text

Consider browser compatibility with | | Example: var Node=node.firstchild | | Node.firstelementchild;

2. Creating and Accessing nodes
A:createelement (TagName) Create a node
B:fathernode.append (childnode) Add child nodes to the end of the parent node
C:insertbefore (b) before adding a node to the B node
D:clonenode (node) copies the specified node and returns the new node

3. Deleting and replacing nodes
A:removechild (TagName) operation deletes the specified child node of a parent node
B:replacechild (Newchild,oldchild) replaces the specified child node of a parent node as a new child node

4. Operation node Style
A: Get and modify the style attribute example: Gets the node. style.color= "Red"; Description: Gets the style property of the internal styles
B: Get and modify the ClassName attribute example: Gets the node. classname= "MyClass";
C: Get External styles Style property
Syntax: element. currentstyle. style attributes; IE browser support
Syntax: Document.defaultView.getComputedStyle (element, null). property; Non-IE browser support

5. Get element position is generally read-only property
Reference: http://www.w3school.com.cn/jsref/dom_obj_all.asp
Example: Document.offsetheight Gets the height of an element
Note: compatibility issues when getting scroll bars: Document.documentElement.scrollTop | | Document.body.scrollTop

6. Supplement:
The onclick event, in addition to being placed directly within the input tag, can also: event source. onclick=function () {JS code};
scroll bar Event Window.onscroll = function () {};

Find element

Indirect lookup

Manipulating elements

List of events:

Chapter III JavaScript manipulating DOM objects