JavaScript DOM Programming Art-Reading notes

Last Update:2016-12-10 Source: Internet

Author: User

Tags array length

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1.JavaScript syntax

Preparatory work

A plain text editor, a Web browser.

The first way JavaScript code must be executed through an HTML document is to place the JavaScript code between the <script> tags in the document

But the best thing to do is put the <script> tag before the last,</body> tag in the HTML document:

<!DOCTYPE html><HtmlLang= "en"><Head><MetaCharSet= "Utf-8"/><Title>example</title></head><< Span style= "color: #800000;" >body> ... <script src= "file.js" ></script ></body></html>

JavaScript is an interpreted language, and the Web browser is its interpreter, responsible for completing the interpretation and execution of the work. The JavaScript interpreter in the browser is read directly into the source code and executed. An error in an interpreted language code can only be discovered when the interpreter executes to the relevant code.

　　Grammar

JavaScript is a weakly typed language that does not require a type declaration on a variable. This means that the data type of the variable can be changed at any stage.

　　String

var mood = "Don ' t ask";            // If the string contains double quotes, enclose the entire string in single quotation marks, and if the string contains single quotes, put the entire string in double quotes var mood = ' don\ ' t ask ';        // If the string contains a single quotation mark and you want to enclose it in single quotation marks, you must use it to escape var height = "About 5 ' 10\" tall ";

　　Array

var beatles = Array (4);//You can specify the array length while declaring an arrayvar beatles = Array ();//You can also not give the number of elementsvar beatles = Array ("John", "Paul", "George", "Ringo"); // assign values at the same time to declare arrays var Beatles = ["John", "Paul", "George", "Ringo"]; //var lennon = [" John ", 1940, false"; // different data types are stored in an array var Beatles = [];beatles[0] = Lennon; //var Lennon = Array (); //;lennon["year"] = 1940;lennon["living"] = false

　　Object

var Lennon = Object ();        // Create an object using the object keyword Lennon.name = "John"; lennon.year = 1940false;  var lennon = {Name: "John", year:1940, Living:// Create object with curly braces

Conditional statements

　　Comparison operators

var a =false; var b = "; if (A==b) {alert ("a equals B"); //true because = = considers an empty string to mean the same as false }var a = false; var b = ";b) {alert ("a equals B"); //true because the congruent operator = = = Not only to determine the value of the variable, but also to determine the type of the variable }// same for! =,!== is more strictly unequal

　　Object

　　built-in objects such as array, Date, Math

　　Host object such as form, Image, Element, document

2.DOM

The DOM represents a document as a tree.

Node

ELEMENT node

Text node

Attribute node

<title= "A gentle reminder">don ' t forget to and this stuff. </P>//p is an element node, title is an attribute node, and Don ' t ... is a text node

　　Get element

There are 3 DOM methods that can get element nodes

　　getElementById

<!DOCTYPE html><HtmlLang= "en"><Head><MetaCharSet= "Utf-8"/><Title>example</Title></Head><Body><UlId= "Purchases"><Li>a Tin of beans</Li><LiClass= "Sale">cheese</Li><LiClass= "Sale">milk</Li></ul> <script> alert (typeof document.getElementById ( "purchases ); </script></body></< Span style= "color: #800000;" >html>//output:object

　　getElementsByTagName

document.getElementsByTagName ("Li");      // It returns an array of objects.

var shopping = document.getElementById ("purchases");  var items = shopping.getelementsbytagname ("*"); alert (items.length);  output:id The number of list items contained by an element with a property value of purchases

　　Getelementsbyclassname

Set and get element properties

　　GetAttribute

var paras = document.getelementsbytagname ("P");  for (var i=0; i<paras.length; i++) {    var title_text = Paras[i].getatrribute ("title"If(title _text) alert (title_text);}

　　SetAttribute

var shopping = document.getElementById ("purchases"); Shopping.setattribute ("title", "a list if goods");  If you do not have this attribute, create this property first, then set its value, and if you have this property, the value of this property will be overwritten //setattribute The changes made will not be reflected in the source code of the document itself. This is because the DOM works: load the static content of the document, and then dynamically refresh, dynamic refresh does not affect the static content of the document // This is the true power of the DOM: Refresh the content of the page without having to refresh the page in the browser

JavaScript DOM Programming Art-Reading notes

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More