This is the second day of my participation in Gwen Challenge
Javascript
Javascript consists of DOM, BOM, and ECMAScript.
The DOM: Document Object Model is the document BOM: The Browser Object Model is the window ECMAScript.
Includes how to define variables, loop statements, operators, expressions, flow control statements, and data types.
DOM
Elements can be obtained through the DOM’s getElementById
Events can be added via dom onClick, onMouseDown, and onmouseup
Styles can be set using the DOM style, and so on…
The composition of the DOM
The DOM is made up of nodes. Elements/tags are just one type of node.
Nodes are divided into 12 types:
There are four things to keep in mind:
1: element type
3: indicates the text type
8: Comment type
9: Document type
All Node types: element Node node.element_node (1Node.ATTRIBUTE_NODE(2Text Node node.text_node (3) CDATA Node node.cdata_section_node (4) entity reference name Node node.entry_reference_node (5) Entity name Node node.entity_node (6PROCESSING_INSTRUCTION_NODE(7Node.COMMENT_NODE(8) document Node node.document_node (9) Document type Node node.document_type_node (10) Document fragment Node node.document_fragment_node (11) DTD declaration Node node.notation_node (12)
Copy the codeThe node type
Every element is a node, but every node is not necessarily an element. An element is just a classification of nodes.
Elements. The nodeType
Text. NodeType
Comments. NodeType
Document. NodeType
.childnodes attribute
It points to a collection of all children of the node that invoked the property.
The DOM structure:
<div id="box">
<div class="one"></div>Hello <! </div> </div>Copy the codeExecution code:
// Get the element
var box = document.getElementById("box");
// Prints all the children of box
console.log(box.childNodes);
Copy the codeConsole results:
After observation, we write 3 nodes, but output 5 nodes. This is because advanced browsers treat whitespace created by whitespace folding as a node of text type.
In IE, since the console won’t open, we print box.childnodes.length
View the results:
At this point, IE works better than the advanced browsers.
Encapsulating wheels unified browser realisation
function ChildNodes(dom) {
// Define an empty array
var arr = [];
// Check whether all child nodes of the element have text types.
// If there is a text type, check whether it is empty text
for (var i = 0; i < dom.childNodes.length; i++) {
// Check the node type
console.log(dom.childNodes[i].nodeType);
if (dom.childNodes[i].nodeType === 3) {
// It is text. Check whether it is empty text
// Use the data attribute to view the content of the text type
// Define a regular expression
var reg = /^\s+$/;
/ / verification
if (reg.test(dom.childNodes[i].data)) {
console.log("The first" + i + "Item" + "It's pure blank.");
17} else {
// If it is not whitespace, it goes into the arrayarr.push(dom.childNodes[i]); }}else {
// Not a text type, directly into the arrayarr.push(dom.childNodes[i]); }}// Return an array
return arr;
}
Copy the codeNode properties
NodeType: This attribute marks the type of the node
NodeName: This attribute marks the name of the node
NodeValue: This attribute marks the value of a node
The Dom structure:
<div id="box">
<div class="one"></div>Hello world <! </div> </div>Copy the codeExecution code:
// Get the element
var box = document.getElementById("box");
// Prints all the children of box
var arr = ChildNodes(box);
for (var i = 0; i < arr.length; i++) {
The nodeType attribute marks the type of the node
console.log(arr[i].nodeType);
// the nodeName attribute marks the nodeName
console.log(arr[i].nodeName);
// the nodeValue attribute marks the value of the node
console.log(arr[i].nodeValue);
}
Copy the codeOutput result:
The node name of the element type, which is the element label name uppercase string// The node name of the text type, always a #text string
// Node name of type comment, always #comment
// The node name of the document type is #document
// The node value of the element type is Null
// The node value of the text type is the written text content
// The value of the annotation type is the content of the annotation
// Document type value, also null
Copy the codeRelationship between nodes
There are three kinds: father and son, son and father, and brother
Father and son
father.childNodes[index] // Get a child node
father.firstChild // Get the first child node
father.lastChild // Get the last child node
Copy the codeThe son of the father
child.parentNode / / the parent node
Copy the codebrother
node.previousSibling // Get the last sibling node
node.nextSibling // Get the next sibling node
Copy the codeCode demo:
// Get the first child of ul
var first = ul.firstChild;
// Get the last child of ul
var last = ul.lastChild;
/ / in the middle of the li is no way to directly access, can through the.childnodes [1 | 2 | 3] to get one.
// Get the parent node
var father = first.parentNode;
var father1 = last.parentNode;
console.log(father === father1);
// The relationship between brothers
var li3 = ul.childNodes[2];
// Get the last sibling node
var li2 = li3.previousSibling;
// Get the next sibling node
var li4 = li3.nextSibling;
Copy the codeElement operation
Create the element
Document.createelement (type)
Type: element type (tag name string)
Return value: created element.
On the tree
Use: father. AppendChild (child)
Child: the child node to append
Father: the parent node
Final effect: Appends child to father as the last child of father’s childNodes
Structure:
<div id="box"></div>
Copy the codeExecution code:
/ / get the box
var box = document.getElementById("box");
// Append the created p element to box
box.appendChild(p);
Copy the codeResults:
Under the tree
Father. RemoveChild (child)
Child: The child node to be removed
Father: the parent node
Return value: child
End effect: Child removed from father’s child node
For example:
// Click BTN to drop the p element from the tree
BTN / /
var btn = document.getElementById("btn");
btn.onclick = function() {
box.removeChild(p);
}
Copy the codeResults:
