Get label element

Learning objectives

• Be able to write out the operation of getting label elements

1. Get tag element

You can use getElementById on * * built-in object document * *
Method to get the tag element with id attribute set on the page, get an html object, and then assign it to a variable, such as:

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    alert(oDiv);
</script>
<div id="div1">This is a div element</div>

explain:

The above code will make an error if javascript is written on the element, because it is loaded and executed from top to bottom on the page. When javascript gets the element div1 on the page, the element div1 has not been loaded.

There are two solutions:

The first method: put javascript at the bottom of the page

<div id="div1">This is a div element</div>

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
    alert(oDiv);
</script>

The second method: set the function to be executed after page loading, and get the tag element in the execution function.

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

explain:

Onload is the event that all elements of the page are loaded. When setting the function for onload, the set function will be executed when the event is triggered.

2. Summary

• To get the tag element, wait for the page to load, and use document.getElementById('tag id ');

Action label element properties

Learning objectives

• Be able to know how to get and set label element attributes

1. Attribute operation

First get the page tag element, and then operate on the attributes of the page tag element. The operations of the attributes include:

• Property read
• Property settings

How attribute names are written in js

1. Most attributes in html and js are written in the same way, but the "class" attribute is written as "className"
2. In the "style" attribute, the attributes with horizontal bars are changed to hump type, such as "font size" and "style.fontSize"

<style>
    .sty01{
        font-size:20px;
        color:red;
    }
    .sty02{
        font-size:30px;
        color:pink;
        text-decoration:none;
    }

</style>

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // Read attribute value
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;

        // The operation class attribute needs to be written as "className"
        oA.className = 'sty02';

        // Write (set) properties
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }

</script>

<input type="text" name="setsize" id="input1" value="20px">
<a href="#"Id =" link01 "class =" sty01 "> this is a link</a>

2. innerHTML

innerHTML can read or set the contents of the tag package

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //read
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //write in
        oDiv.innerHTML = '<a href="http://Www.itcast. CN "> podcast < A / > ';
    }
</script>

<div id="div1">This is a div element</div>

3. Summary

Acquisition and setting of label properties:

1. var tag object = document.getElementById('id name '); - > Get label object
2. var variable name = label object. Attribute name - > read attribute
3. Label object. Property name = new property value - > set property

Array and operation method

Learning objectives

• The specified element can be deleted according to the subscript

1. Introduction to arrays

An array is a collection of data. In javascript, the data in the array can be different types of data, such as the list in python.

2. Definition of array

// Create by instantiating objects
var aList = new Array(1,2,3);

// It is recommended to create it in literal mode
var aList2 = [1,2,3,'asd'];

3. Multidimensional array

Multidimensional array means that the members of the array are also arrays. Such an array is called multidimensional array.

var aList = [[1,2,3],['a','b','c']];

4. Array operation

1. Gets the length of the array

var aList = [1,2,3,4];
alert(aList.length); // Pop up 4

2. Value according to subscript

var aList = [1,2,3,4];
alert(aList[0]); // Eject 1

3. Add and remove data from the last array

 var aList = [1,2,3,4];
 aList.push(5);
 alert(aList); //Pop up 1,2,3,4,5
 aList.pop();
 alert(aList); // Pop up 1,2,3,4

4. Add and remove elements based on Subscripts

arr.splice(start,num,element1,.....,elementN)

Parameter resolution:

1. Start: required to start the index deletion.

2. num: optional; number of array elements deleted.

3. elementN: optional, the new element to be inserted at the start index position.

This method deletes num elements starting from the start index and inserts the elementN parameter into the start index position.

var colors = ["red", "green", "blue"];
colors.splice(0,1);  //Delete the first item
alert(colors);  //green,blue

colors.splice(1, 0, "yellow", "orange");  //Insert two items of data from the first index position
alert(colors);  //green,yellow,organge,blue

colors.splice(1, 1, "red", "purple");  //Delete one item and insert two items of data
alert(colors);  //green,red,purple,orange,blue

5. Summary

• The array is defined using a pair of brackets
• Gets the length of the array. Use the length property
• Add the last element from the array using the push method
• Remove the last element from the array using the pop method
• Use the splice method to add and remove elements based on subscripts

come on.

thank!

strive!