Getting Started with JavaScript (ii) variables, getting elements, manipulating elements

Source: Internet
Author: User

One, variable

Javascript has five basic data types number, String, boolean, undefined, null a composite type: Object

Second, using the getElementById method to obtain the element

Way One:

Here the element, refers to the HTML tag, through the built-in docuement ' getElementById ' method to get the element that set the id attribute on the page, get an HTML object, and assign a value to it,

Do not assign a value to see an example:

<!DOCTYPE HTML><HTMLLang= "en"><Head>     <Scripttype= "Text/javascript">        varDiv1=document.getElementById ('Div1'); </Script></Head><Body>    <DivID= ' Div1 'title= "This is a label">The IS label</Div></Body></HTML>

Then open the browser, the mouse point on the label (DIV1) above: There will be a hint, this is the DIV1 this element of the title stored information

Then the title of the tag is modified by the acquisition, but the following method will fail, because the page scanning way from top to bottom, first scan the non-existent variables can not be changed, will error.

<!DOCTYPE HTML><HTMLLang= "en"><Head>     <Scripttype= "Text/javascript">        varDiv1=document.getElementById ('Div1'). Title= 'I got it!'; </Script></Head><Body>    <DivID= ' Div1 '>The IS label</Div></Body></HTML>

So, put the script under the div tag.

<!DOCTYPE HTML><HTMLLang= "en"><Head>     <Scripttype= "Text/javascript">             </Script></Head><Body>    <DivID= ' Div1 '>The IS label</Div>    <Scripttype= "Text/javascript">document.getElementById ('Div1'). Title= 'I got it!'; </Script></Body></HTML>

Effect of modifying title

If you change the <script> in the

<!DOCTYPE HTML><HTMLLang= "en"><Head>     <Scripttype= "Text/javascript">window.onload= function() {document.getElementById ('Div1'). Title= 'I got it!'; }    </Script></Head><Body>    <DivID= ' Div1 '>The IS label</Div> </Body></HTML>

Iii. Elements of Operation

JS can be modified by acquiring elements and attributes of elements;

---operation method: 1, the operation of the point: '. ' ;

2, parentheses operation: ' [] ';

---Property modification method: 1, JS, the property of the same notation as HTML;

Example 1: Modifying properties:

<!DOCTYPE HTML><HTMLLang= "en"><Head>window.onload = function () {var input = document.getElementById (' input1 ');        var target = document.getElementById (' Text1 ');         attribute var val = input.value;         var type = Input.type;         var name = Input.name;        Change attribute Target.style.color = ' red ';     Target.style.fontSize = ' Val '; }    </Script></Head><Body>     <inputtype= "text"name= "SetSize"ID= "INPUT1"value= "20px">     <H1ID= "Text1">SetSize</H1> </Body></HTML>

effect, below the SetSize

Getting Started with JavaScript (ii) variables, getting elements, manipulating elements

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.