Learning route
javascript functions
Function syntax
HTML DOM
- DOM full name: Document Object Model
- Document tree
- node
- The whole document is a document node
- Each HTML element is an element node
- The text within an HTML element is a text node
- Each HTML attribute is an attribute node
- Comments are comment nodes -
- Find HTML elements
- Find elements by id
- Find elements by tag name
- Find elements by class name -
- Change HTML content
- innerHTML attribute
- document.getElementById(id).innerHTML = "<p>...</p>";
- Property innerText
- document.getElementById(id).innerText="....";
- Attribute attribute
- document.getElemetById(id).attribute = attribute value;
- style.property attribute
- document.getElementById(id).style.property= New style -
- innerHTML attribute
- Creating and deleting nodes
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
font: 700 14px/1.5 arial;
margin: 0;
padding: 0 10px;
}
table{
clear: both;
border: 1px solid #000000;
}
td{
color: #FFFFFF;
cursor: pointer;
text-align: center;
border: 1px solid #000000;
padding: 5px;
}
#setting{
float: left;
clear: left;
line-height: 28px;
margin: 10px 0;
}
#setting input{
width: 50px;
font-family: inherit;
border: 2px solid #CCCCCC;
}
#btn{
font-size: 14px;
line-height: 18px;
color: #FFFFFF;
text-decoration: none;
background: #353535;
border-top: 1px #A9A9A9 solid;
border-radius: 5px;
padding: 4px 6px;
}
#msg{
float: left;
clear: both;
height: 25px;
display: none;
line-height: 25px;
margin-bottom: 10px;
}
#msg em{
width: 25px;
height: 25px;
display: inline-block;
margin-right: 5px;
}
#setting label,#setting input,#setting a,#msg span,#msg em{
float: left;
}
</style>
<script>
//Create table dynamically
function createTable(){
var row = document.getElementById("row").value;
var col = document.getElementById("col").value;
var div = document.createElement("div");//Create a div node. Objective to store our dynamically generated table
div.setAttribute("id","table");//Set the div's attribute id and its value
var divTable = document.getElementById("table");//Determine whether div has been added
if(divTable != null){
document.body.removeChild(divTable);//Delete div
}
var aRow = [];//Array, defining table rows
var aCol = [];//Array, defining table columns
//Loop dynamic generation of table elements
for(var i = row - 1;i--;){
aCol.length = 0;//Initializes the length of columns in the table
for(var j = col;j--;){//Build each column in the table
aCol.push("<td style=\"background:"+getRandomColor()+";\">"+randomRange(1,15)+"</td>");//How to insert elements
}
aRow.push("<tr>"+aCol.join("")+"</tr>");
}
div.innerHTML = "<table><tbody>"+aRow.join("")+"<tbody></table>";
document.body.appendChild(div);//Add div to body and table to Div
}
//Randomly generate numbers between 1 and 15 to fill cells
function randomRange(lower,upper){
return Math.floor(Math.random()*(upper-lower+1)+lower);
}
//Randomly generated color codes
function getRandomColor(){
return '#'+Math.floor(Math.random()*0xffffff).toString(16);
}
</script>
</head>
<body>
<div id="setting">
<label>Number of rows</label><input type="text" id="row"/>
<label>Number of columns</label><input type="text" id="col" />
<a href="javascript:;" id="btn" onclick="createTable()">Generating tables</a>
</div>
</body>
</html>
- DOM basic operation case
Case description: draw a rectangular div, a simple Sketchpad will pop up on the right side of the rectangle div, and change the div inside the rectangle through the operation on the sketchpad
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.main{
position: absolute;
width: 400px;
height: 400px;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
border: 1px solid black;
}
.top{
width: 100%;
height: 50px;
background: green;
text-align: center;
color: white;
line-height: 50px;
}
.drawing{
position: relative;
width: 150px;
height: 200px;
top: -50px;
left: 400px;
}
span{
text-align: center;
border-radius: 5px;
border: 1px solid black;
padding: 5px;
}
p{
text-align: center;
}
.content{
position: absolute;
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 5px;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="main">
<div class="top">Click on the sketchpad</div>
<div class="drawing">
<p>Choose a color</p>
<p>
<span style="background: red;" id="c01">gules</span>
<span style="background: yellow;" id="c02">yellow</span>
<span style="background: blue;" id="c03">blue</span>
</p>
<p>Select width</p>
<p>
<span id="s01">100</span>
<span id="s02">150</span>
<span id="s03">200</span>
</p>
<p>Select height</p>
<p>
<span id="h01">100</span>
<span id="h02">150</span>
<span id="h03">200</span>
</p>
</div>
</div>
<div class="content" id="content"></div>
</body>
<script>
/**
* Draw a rectangular div, a rectangular Div
* A simple Sketchpad will pop up on the right,
* Change the div inside the rectangle through the operation on the drawing board
*/
window.onload = function(){
var s01 = document.getElementById("s01");
var s02 = document.getElementById("s02");
var s03 = document.getElementById("s03");
var h01 = document.getElementById("h01");
var h02 = document.getElementById("h02");
var h03 = document.getElementById("h03");
var c01 = document.getElementById("c01");
var c02 = document.getElementById("c02");
var c03 = document.getElementById("c03");
s01.onclick = function(){
var content = document.getElementById("content");
content.style.width = 100 + "px";
}
s02.onclick = function(){
var content = document.getElementById("content");
content.style.width = 200 + "px";
}
s03.onclick = function(){
var content = document.getElementById("content");
content.style.width = 300 + "px";
}
h01.onclick = function(){
var content = document.getElementById("content");
content.style.height = 100 + "px";
}
h02.onclick = function(){
var content = document.getElementById("content");
content.style.height = 200 + "px";
}
h03.onclick = function(){
var content = document.getElementById("content");
content.style.height = 300 + "px";
}
c01.onclick = function(){
var content = document.getElementById("content");
content.style.background="red";
}
c02.onclick = function(){
var content = document.getElementById("content");
content.style.background="yellow";
}
c03.onclick = function(){
var content = document.getElementById("content");
content.style.background="blue";
}
}
</script>
</html>
DOM events
usage method
- Using html DOM to assign events
- html event properties
Event classification
- Mouse events
- Keyboard events
- Form Events
- Drag events
Please pay attention to "zhiluotang learning community", address: http://www.zhiliaotang.com/portal.php