1. Node operation
1.1 what is a node
According to the W3C HTML DOM standard, all contents in HTML documents are nodes:
The entire document is a document node document
Each HTML An element is an element node
The text within an HTML element is a text node
Each HTML attribute is an attribute node
Annotations are annotation nodes
1.2 node type
The noteType property allows you to obtain the type of node
Node type of document -- 9
console.log(document.nodeType);//9
Node type of label -- 1
var box1=document.getElementById("box1"); console.log(box.nodeType);//1
Node type of attribute -- 2,getAttributeNode("attribute"): get the attribute node of the element
var attr1=box!.getAttributeNode("class"); console.log(attr1.nodeType);//2
Text node type -- 3. The first child node of the element is the text node
console.log(box.firstChild.nodeType);//3
1.3 node name
You can get the node name of the element through nodeName
Node name of document --#document
console.log(document.nodeName);//#document
Node name of the label ---# upper case label name
console.log(box1.nodeName);//DIV
Node name of attribute --- attribute name
consold.log(attr1.nodeName);//class
Node name of text ---#text
console.log(box1.fristChild.nodeName);//text
1.4 node value
nodeValue allows you to get the value of the node of the element
Node value of document -- null
console.log(document.nodeValue);//null
Node value of label -- null
console.log(box1.nodeValue);//null
Node value of attribute --- attribute value
console.log(attr1.nodeValue);//boxC1
Node value of text --- content of text
console.log(box1.firstChild.nodeValue);//I'm a div element
2. Relationship between nodes
2.1 HTML DOM node tree
The HTML DOM regards the HTML document as a tree structure, which is called a node tree:
Through HTML DOM, all nodes in the tree can be accessed through javaScript. All HTML elements (nodes) can be modified, or nodes can be created or deleted
2.2 relationship between nodes
The relationship between nodes is nested relationship (parent-child relationship) / juxtaposition relationship (sibling relationship). Pay attention to the difference between nodes and element nodes
Parent node-- parentNode
Parent element node -- parentElement
Child node = childNodes: label node / text node / comment node The result is a pseudo array
Child element node -- children Label node
First child node -- firstChild text
First child element node -- firstElementChild First label
Last child node -- lastChild text
Last child element node -- lastElementChild Last label
Previous child node -- previousSibling text
Previous child element node-- previousElementSibling Previous label
Next child node -- nextSibling text
Next child element node -- nexterementsibling Next label
Summary: fristChild/lastChild/previousSibling/nextSibling get all text, if not, it is the text node name #text. Firstelementchild / lastelementchild / previouselementsibling / nexterelementsibling get all labels, if not, it is empty
2.3 node interlaced color change
The interlaced color change we have learned is to traverse the pseudo array and then judge the odd and even number. If the cyclic accumulation is + 2, now we use the relationship between nodes and the name and value of nodes to achieve the effect of interlaced color change
The first: odd even judgment
for(var 1=0;i<liObj.length;i++){ if (i % 2 == 0) { liObj[i].style.backgroundColor = "red"; } }
The second: accumulation 2
for (var i = 0; i < liObj.length; i += 2) { liObj[i].style.backgroundColor = "red"; }
Third: child element node
for (var i = 0; i < ulObj.children.length; i++) { if (i % 2 == 0) { liObj[i].style.backgroundColor = "red"; } }
The fourth is node operation
for (var i = 0; i < ulObj.childNodes.length; i++) { // console.log(ulObj.childNodes[i]); // Judge whether it is a label node and extract the label node if (ulObj.childNodes[i].nodeType == 1 && ulObj.childNodes[i].nodeName == "LI") { console.log(ulObj.childNodes[i]); newObj.push(ulObj.childNodes[i]); } } for (var i = 0; i < newObj.length; i++) { if (i % 2 == 0) { newObj[i].style.backgroundColor = "red"; } }
2.4 inserting nodes
The insertBefore() method inserts a new child node before the existing node
Japanese: if you want to create a new text column option, you should add the text node of the element after the LI element
Then add the LI element to the list
You can also use the inserBefore method to insert / overflow and existing elements
node.inserBefore(newnode,existingnode) parameter Newnode is the node object to be inserted, and existingnode is the child node before the new node is added
var node=document.getElementById("myList2").lastChild; var list=document.getElementById("myList1"); list.insertBefore(node,list.childNodes[0]);
3. Three ways to create elements
3.1document.write()
Disadvantages: you can only add elements to the body
document.write('<div class="box1">I am div</div>');
3.2innerHTML
Disadvantages: only one element can be added under the same level, and multiple elements will be overwritten
document.getElementById("divObj").innerHTML = "<p>Ha ha ha</p>";
3.3document.createElement()
Parent element. AppendChild (child element): adds child elements to the end of the parent element
var pObj = document.createElement("p"); divObj1.appendChild(pObj);
3.4 dynamic creation list
Click the button to dynamically create an unordered list and render it in the box with red border
Idea: 1. Create a content array
- Get the element and bind the click event to the button
- Create ul tag
- Add ul to box
- Traversal array
- Create li label
- Add content
- Button disabled
4. Advanced events
4.1 three elements of event
Event source: refers to the event triggered by that element. For example, when you click the cdsn icon, you will jump to the cdsn home page. Then the cdsn icon is the event source. Or, it can be understood that when you perform an action on an element, a series of effects (animation, jump...) will be triggered. Then this element is the event source.
Event type: for example, click, mouse over, press the keyboard to get focus.
Event driver: the event driver is the result of execution. For example, when you click the cdsn icon, you will jump to the cdsn home page. Then jump to the cdsn home page is the event processing result.
Steps to execute events: get elements, bind events, and write event drivers
4.2 listening events
Binding listening events addEventListener("type of event", handler of event)
box1.addEventListener("click", myFunc) function myFunc() { this.style.backgroundColor = "blue"; }
Unbind the listening event removeEventListener("event type", event handler)
box1.removeEventListener("click", myFunc);
4.3 event object
Any event has a built-in object event. The compatibility of the event object is written as
var event = event || window.event; // Type of event console.log(event.type); // ID of the element console.log(event.target.id); // Content of text console.log(event.target.innerText); // The trigger point of the event is the abscissa and ordinate to the left of the browser console.log("Abscissa:" + event.clientX + "," + "Ordinate:" + event.clientY); console.log("Abscissa:" + event.pageX + "," + "Ordinate:" + event.pageY); console.log("I click header!");
4.4 event bubbling
What is a bubbling event
Event bubbling stage: the event starts from the event target and bubbles up to the top label of the page.
Suppose an element div has a subordinate element p.
<div>
<p>Element</p>
</div>
Both elements are bound click event , if the user clicks p, it triggers on both div and p click event , which of the two event handlers executes first? What is the sequence of events?
How to prevent bubbling (compatibility exists)
e.stopPropagation(); Google and Firefox support,
window.event.cancelBubble=true; IE specific, supported by Google, not supported by Firefox
5.BOM
5.1BOM concept
BOM(Browser Object Model) refers to the browser object model, which provides an object structure independent of content and can interact with the browser Window. The BOM consists of multiple objects. The Window object representing the browser Window is the top-level object of the BOM, and other objects are sub objects of the object.
Some of our operations in the browser can be programmed using BOM,
For example: refresh the browser, back, forward, enter the URL in the browser, etc
5.2 top level object of BOM
Window is the top-level object of the browser. When calling the properties and methods under window, you can omit window. Note: a special property under window, window.name
5.3 dialog box
alert()
prompt()
confirm()
5.4. Loading events
onload event
The onload event occurs immediately after the page or image is loaded.
onload is usually used for < body > elements to execute script code after the page is fully loaded (including images, css files, etc.).
5.5 Location object
Common properties
// //Contents on # and after the address bar // console.log(window.location.hash); // //Host name and port number // console.log(window.location.host); // //Host name // console.log(window.location.hostname); // //File path --- relative path // console.log(window.location.pathname); // //Port number // console.log(window.location.port); // //Agreement // console.log(window.location.protocol); // //What to search for // console.log(window.location.search);
5.6 history object
//Jump my$("btn1").onclick = function () { window.location.href = "15test.html"; }; //forward my$("btn2").onclick = function () { window.history.forward(); }; //back off my$("btn").onclick = function () { window.history.back(); };
5.7 Navigator object
adopt userAgent You can determine the type of user browser console.log(window.navigator.userAgent); //The platform can be used to determine the system platform type of the browser //console.log(window.navigator.platform);
6. Timer
6.1setlntaval()
The setInterval() method calls a function or evaluates an expression for a specified period (in milliseconds).
The setInterval() method keeps calling the function until clearInterval() Called or window closed. The ID value returned by setInterval() can be used as an argument to the clearInterval() method.
clearInteval()
The clearInterval() method cancels the scheduled execution set by the setInterval() function.
The parameter to the clearInterval() method must be the ID value returned by setInterval().
//Timer
//Parameter 1: function
//Parameter 2: time -- milliseconds -- 1000 milliseconds -- 1 second
//Execution process: after the page is loaded, execute the function code once after 1 second, and then execute the function after 1 second
//The return value is the id value of the timer
6.2setTimeout()
Another timer definition and usage
Method is used to call functions or compute expressions after specified milliseconds.
Tips: 1000 ms = 1 second.
Tips: If you just want to repeat, you can use setInterval() method.
Tips: use clearTimeout() Method to prevent the execution of the function.
Parameter: param1 callback function, param2 time
Return value: Returns an ID (number) that can be passed to clearTimeout() to cancel execution