Home > Developer > JavaScript
O (∩_∩) o~~ yesterday summed up the "JavaScript knowledge three" forgot to publish, hehe, recently my doctor became very big Ah O (∩_∩) o~~, today is the practice, so this week has not summed up the write down, and everyone to share the exchange.
First of all, the function of the rest of the summary;
Customization of functions:
For example, the problem is to define an array in which the properties of the array can be directly assigned, and here the Sayhi is used as the property of the array.
<script>varp ={name:"Apphia", Age:20, Gender:true,sayhi: function ()
{ //alert (this);//Print out [Object Object] return This. Name;//this refers to the name in the current array . } };
Alert (P.sayhi ()); //Print out the name Apphia</script>
DOM (Document Object Model)
"D" in the DOM: the document, if there is no document, the DOM cannot be discussed. DOM converts a Web document written to a Document object
The "O" in the DOM: the object is a self-contained data collection, the object in JS can be divided into three kinds: user-defined objects (self-created), built-in objects (built in the JS language objects, such as array,date, etc.), Host Object (provided by the browser)
"M" in the DOM: a model, meaning a manifestation of something.
Node: A connection point in the network. An HTML document is a node tree. There are many different types of HTML tags in DOM operations that make up a node, and each node is an object
The nodes are divided into three types:
Get element:
<div><span> singers </span> caged birds <span> song names </span></div> <script>vardiv = document.getElementsByTagName ("div"); //Get by tag namealert (div.length);//get length, shown here 4 for(vari = 0; i < div1.length; i++) {alert (div1[i]. InnerHTML); //Print out <span> singers </span> caged birds <span> song names </span>} </script>
<body> <div name= "div1" > Fruit </div> <div name= "Div1" >APPLE</div> < Script> var div2 = document. Getelementsbyname("Div1"); // based on the Name property to get for (var i = 0; i < div2.length; i++) { alert (div2[i].innerhtml); } // ———————————— print out fruit, APPLE </script></body> <div class= "Div2" > Flowers </div> <script> var div = document. Getelementsbyclassname// based on the class attribute for the for (var i = 0; i < Div.length; i++) { alert (div[i].innerhtml); } // ———————————— print out flowers </script><div id= "Div" >wellcome to xxx</div> <script> var divadd = document. getElementById("div") alert (divadd.innerhtml); // print out Wellcome to xx </script><div> Willow </div> <script> var div = document. Queryselector(". Div"); // based on selectors to get for (var i = 0; i < div.length; i++) { alert (div[i].innerhtml); } </script>Note: Get text node: Grab the element first to find the text node
InnerHTML: Getting HTML and Text innerText: Get plain text (but use only in IE browser)
get attribute node: First FETCH element in Go Fetch property getattribute ()
<div id= "div" class= "divclass" name= "Divname" > <script> var div = document.getElementById ("div"); // get element node first var divattibute = div.getattribute("name"); alert (divattibute); </script>Modify attribute node: SetAttribute ()
<div id= "div" class= "divclass" name= "Divname" > <script> var div = document.getElementById ("div"); // get element node first Div.setAttribute("name", "Mydiv"); var divattibute = Div.getattribute ("name"); alert (divattibute); </script>View child node length, node type, node name, node text content
<div id= "Outdiv" >the outer div<div id= "Centerdiv" >Middle Div.<div id= "Innerdiv" > Inner layer div</div> </div>Last blank node</div>
<script>varDivlengh = Div.childnodes.length;//viewing child node lengths varDivchild =Div.childnodes; alert (Divlengh); //Viewing child node types for(vari = 0; I <divchild.length; i++) {alert (divchild[i]. NodeType);//Print out 3 1 3 (3: Text node 1: element node) } //View child node names for(vari = 0; i < divchild.length; i++) {alert (divchild[i]. NodeName); } //View node text content (text message only, non-text display null) for(vari = 0; i < divchild.length; i++) {alert (divchild[i]. NodeValue); } </script>
Note: There are also common firstchild (first byte point) and LastChild (last byte point) two properties
To create a node dynamically:
<div id= "Textdiv" ></div> <script> document.getElementById ("Textdiv"). InnerHTML = "dynamic Add"; Print out dynamic add </script><div id= "Div" ></div> <script>varDivadd = document.getElementById ("div"); //Writedocument.write ("<p>HELLO</P>");//dynamically generate P tags functionInserp ()//or encapsulated into a method { varstr = "<p>"; varText = "Savatika"; varstr1 = "</p>"; returnstr + text +str1; } document.write (Inserp ()); //write is typically used for large-scale processing</script>
createelement (create element node) createTextNode (Create text node) appendchild (Append child nodes)
<div id= "Outdiv" >the outer div<div id= "Centerdiv" >Middle Div.<div id= "Innerdiv" > Inner layer div</div> </div>Last blank node</div> <script>vardiv = document.getElementById ("Outdiv");//Get parent node First //Append node varp = document.createelement("P");//1 Creating ELEMENT nodes first varText = document.createTextNode("。。。。。。。。。。。。。。。 ");//Create a text nodep.appendchild(text);//text node appended to parent nodeDiv.appendchild (p);//appends the element node p to the parent node Div varAdddiv = document.getElementById ("div"). AppendChild ("div");//Use</script>
O (∩_∩) o~~ because to the coachman, so today can only write to this, the rest of the content next in the summary! Come on! ~~
JavaScript Knowledge Quad (DOM)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
