Rupeng net Study Notes (10) DOM and pengnet study notes dom

Rupeng net Study Notes (10) DOM and pengnet study notes dom

DOM notes
1. Introduction to DOM
Document Object Model
DOM node tree model: the entire document is divided by nodes from large to small. Each content is counted as a node.
The dom api programming interface can be used to manipulate any part of the page content.
Idea of js + DOM programming: The execution logic of the Javascript basic syntax control program is obtained by dom api for element search, and then the elements are added, deleted, modified, and operated.

Learning DOM, apart from learning design ideas, is more about learning the usage of DOM APIs.

Ii. document Object
Document Object,
Is an attribute of a Windows Object,
Indicates the entire HTML page, which is the core object of DOM,
Is a bridge between JavaScript and DOM, so that we can operate the page content in the JavaScript environment,
Provides methods to retrieve element nodes. Therefore, document is the DOM programming portal,
You can also create a new node.

3. How to obtain an object using the document Object
1. getElementById (String) returns the Element that gets the Element based on the Element's id attribute value.

2. getElementsByTagName (String) returns the NodeList array to obtain the element based on the element's tag name.

3. getElementsByName (String) returns the NodeList array to obtain the element based on the element's name attribute value.


NodeList. length contains the number of elements

NodeList. item (index) gets the element at the specified index location

Note: NodeList is dynamically updated. If the deleted element is also in NodeList, it is also deleted from NodeList.

4. How to create new elements in document

Document. creatElement (tagName) creates an element node based on the element Tag Name

5. How to add new elements to a document

1. Create the element to be added first.
Var element = document. createElement (tagName)

2. Get the node to add the element

Var element = document. getElementById (String)

3. Add the element using the appendChild (node) method.

Vi. Attributes of Element operation elements

There are two ways to operate the attributes of an element

1. directly use element. attribute name:
Var variable name = element. attribute name; // get the attribute value
Element. attribute name = attribute value; // assign a value to the attribute

Note:
A. Because class is a keyword, use className instead of class Attribute operations.
B. This method can only operate the properties specified by the HTML standard, but cannot operate custom properties.
C. In js, when the checked attribute of checkbox and radio is operated, true or FALSE is used for the selected Attribute Value of select. This is also true for the disable attribute of form elements.

2. Three other operation attributes can be customized.
A, var variable name = getAttribute ("attribute name"); get Attribute Value
B, removeAttribute ("attribute name"); deletes a specified attribute and no return value
C, setAttribute ("attribute name", "new attribute value"); Modify/Add attributes

VII. Child Nodes of Element operation elements
Child Nodes include child elements and element text content

Element. getElementsByTagName () obtains its internal child element based on the label name of the child element.

Element. innerHTML ("HTML statement to be written"); insert an HTML statement in the subnode as a string

Element. insertBefore (newNode, node); inside the subnode, insert a new subnode before the specified subnode

Element. appendChild (newNode); append the subnode at the end

Element. removeChild (); Delete the specified subnode

8. Operation style attributes

Two methods:
1. Object of the element. style CSSStyleDeclaration type

You can use the element. style. attribute name to directly operate a style attribute.

For example, element. style. backgroundColor = "gray ";

Note: "-" is used for style attributes in CSS to connect two words. In js, uppercase is used for subsequent words !!

2, element. className = "another className"; effect: Empty strings can be deleted, and can be pointed to another class. The effect can be switched through CSS control.

9. DOM Event Mechanism
Some events are triggered when the browser status changes and user operations are performed. For example, if you click a button and start the time when the button is clicked, the button is called an event source.

When a time is triggered, the browser creates an event object, which contains various information related to the time. For example, the time object of the click Time contains information about the clicked text, available for programmers

If you want to perform some processing on this time when a time occurs, you can register an event processing function for this time. When the time is triggered, this function will be called.

Common events include the following:
1. Form Events
Page load completion event
Triggered when the load page is loaded (the window object is the event source)
<Script type = "text/javascript">

Window. onload = function (){
// Only after the page is loaded can the element with id div01 be obtained.
Var element = document. getElementById ("div01 ");
Alert (element );
}

</Script>

Note: load is the name of an event, and onload is the attribute of an element. It is used to register an event handler for an element.

2. mouse events
1,
Triggered when onclick, ondblclick, and double-click
Sample Code:
<Script type = "text/javascript">
Window. onload = function (){
GetElementById ("div01"). onclick = function (){
Alert ("coming to me ");
}
GetElementById ("div02"). ondblclick = function (){
Alert ("double-click ");
}
}
</Script>

Events triggered when the onmouseover or onmouseout cursor goes through or removes an element

Onmousemove triggered when the mouse pointer moves (after entering the element)

Onmousedown, onmouseup: triggered when the mouse is pressed or the mouse is restarted (after the element is entered)

2. The event object of the mouse event contains the following information:
The mouse button clicked by the button (0, 1, 2)
Whether to simultaneously press alt, ctrl, or shift on the keyboard when altKey, ctrlKey, and shiftKey are clicked
Window coordinates of the clientX and clientY mouse pointers
Screen coordinates of the screenX and screenY mouse pointers

Sample Code:
<Script type = "javascript">
Window. onload = function (){
GetElementById ("div01"). onmousedown = function (){
Alert (event. button); // specifies the button that the mouse presses in the current event.
Alert (event. altKey + event. ctrlKey + event. shiftKey); // print whether the corresponding buttons are pressed when the mouse clicks the current event.
}
}
</Script>

3. Keyboard Events

4. Focus events

5. page loading completion events

Triggered when the onload page is loaded (the window object is the event source)
Sample Code:
<Script type = "text/javascript">
Window. onload = function (){
Var element = document. getElementById ("div01 ");
Alert (element );
}
</Script>

Event handling methods

1. Assign the time processing function to the event attribute (called the registration event processing function) in the DOM mode)
Sample Code:
<Script type = "text/javascript">
Window. onload = function (){
Document. getElementById ("div01"). onclick = function (){
Alert ("this is the way to register event handler functions ");
}
}
</Script>

2. Write the code to be executed directly on the event attribute of the HTML element tag.
Sample Code:
<Div onclick = "alert ('this is the method for writing the execution method directly on the event attribute of the element tags');"> </div>

The first processing method has a higher priority than the second one !!!!!

Note:

If there is a UDF fun1,
The first method is used as element. onclick = fun1; // note that the object of the function fun1 (which cannot contain parentheses) is assigned to onclick.
In the second method, write onclick = fun1 (); // write the function call in the element label.

10. usage of this

Sample Code:
<Script type = "javascript">
Function (){
Alert (this );
}
Window. onload = function (){
Var obj = {"fun1", fun1 };
Var btn = document. getElementById ("btn ");
Btn. onclick = fun1;

Window. fun1 (); // print the window object
Obj. fun1 (); // print the Object
Btn. onclick (); // print the button Object
}
</Script>

Conclusion: if this is in function fun1, function fun1 is executed as the object's attribute value, this indicates the object.


In other cases, if it is not easy to judge, perform the test:
　　　　

Sample Code:
<Input type = "button" onclick = "alert (this)"/> // print the button Object
<Input type = "button" onclick = "fun1 ()"/> // print the window object

11. register multiple event processing functions for an event
1. The method of registering an event handler function will overwrite the method of Directly Writing the code, and multiple handler functions registered at the same time will also be overwritten,
This leads to only one thing we can do when an event occurs"

2. To register multiple event handlers for an event, DOM provides another registration method:
AddEventListener ("event name", Handler );
Sample Code:
<Script type = "javascript">
Div. addEventListener ("click", function (){
Alert ("third method of processing functions ")
});
</Script>

Feature: No overwrite occurs. You can register the same event at the same time.

Note: Only one function can be registered multiple times.

3. delete a processing function.

If you want to delete a registered handler in the future, you should get the reference of the handler.

RemoveEventListener (event name, Handler );

Sample Code:
<Script type = "javascript">
Var fun1 = function (){
Alert ("third method of processing functions ");
};
Div. removeEventListener ("click", fun1 });
</Script>

12. Event bubbling

1. Because HTML elements can be nested, it is inevitable that when a user executes an action, such as clicking, multiple elements will trigger the click event.
To facilitate management and avoid confusion, DOM provides an event bubbling mechanism.

Event bubbling: when several nested elements are "simultaneously" triggered an event, the event of the inmost element is first triggered, and the event is passed out in sequence.
Sample Code:
<Script type = "javascript">
Window. onload = function (){
Var div01 = document. getElementById ("div01 ");
Var div02 = document. getElementById ("div02 ");
Var div03 = document. getElementById ("div03 ");
Div01.onclick = function (){
Alert ("div01 ");
}
Div02.onclick = function (){
Alert ("div02 ");
}
Div03.onclick = function (){
Alert ("div03 ");
Div03.stopProgagation (); // cancel event bubbling
}
// When div03 is clicked in the innermost part, both div02 and div01 of the outer layer will trigger the event, which is event bubbling.
}
</Script>

2. If you want to cancel the event bubble at a certain moment, you can use event. stopProgagation ();


13. Keyboard Events
Keydown: the keyboard is pressed.

The keyup keyboard button is popped up.

Attribute of event object:

The integer code of the key that event. keyCode is pressed


14. Cancel the default browser action for certain events

For characteristic events of some elements, the browser has a default action, for example, when a hyperlink triggers a click event, the page jumps, when a form submission event is triggered, the light data is submitted to the server, and the keyboard is pressed to input characters in the input box.

DOM provides two methods to cancel the default action of the browser:
1. Execute event. preventDefault () in the handler we have registered ();
2, return false;


Note: The default browser action for canceling events is different from that for canceling event bubbles.

15th. Focus event
Focus element to get focus
Blur element loses focus

16. Form Events
Triggered when select input (text) and text in textarea are selected

Triggered when the value of change input (text) and textarea changes

Triggered when the submit form is submitted (triggered before the data is actually submitted to the server)

17. How to obtain the coordinates of an element

<Script type = "javascript">
Var x = div02.offsetLeft;
Var y = div02.offsetTop;

Var parent = div02.offsetParent;

While (parent ){
X + = parent. offsetLeft;
Y + = parent. offsetTop;
Parent. offsetParent;
}
</Script>