JavaScript DOM Programming Art reading notes (i)

Last Update:2016-12-26 Source: Internet

Author: User

Tags tag name unique id

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

Chapter i, Chapter II

DOM: is a set of methods for abstracting and conceptualizing the contents of a Document.

　　definition: An interface that is independent of the system platform and programming language through which programs and scripts can dynamically access and modify the content, structure, and style of the Document.

DHTML (dynamic html): The short name of animated html, not a new technology, but a combination of HTML CSS and Javascript. The implication behind DHTML is that:

Use HTML to mark Web pages as various elements;
Use CSS to set element styles and where they appear;
Manipulate pages and change styles in real time with Javascript.

But while browser makers are doing the same thing, they do it differently, which is a clash of browsers (browser wars). This results in many scripts having to be written two Times. Like what:

-->netscape DOM uses a proprietary element called the layer "layers", the layer has a unique id, to reference an element needs to do this: document.layers[' myelement ']

and Microsoft's Dom needs to do this: document.all[' myelement '

WebKit (http://webkit.org) is an open source web browser engine used by Safari and Chrome.

Remember to put the <script> tag in the final,<body> tag of the HTML document, allowing the browser to load the page faster!

comments///**/or <!-this is a comment in JavaScript that does not have to be written in <!--this is a comment in html--or a suggested use//or/**/

　　Variable name declaration can use "_" such as My_mood function name declaration can use hump format such as Mymood ()

The type declaration must be explicit that the strongly typed language JavaScript does not need to explicitly make type declarations, so it is a weakly typed language

String single quotes or double quotes are all right, but if you want to output a single quote, you need to escape var my_mood = ' don ' t 'ask ' double quotation marks for the same reason.

Define Array keyword:

var beatles = Array (4), 4 is the length can also not specify assignment is beatles[0] = "josh";

or var beatles = Array ("John", "pual", "George", "Ringo"); You can also var beatles = ["John", "pual", "George", "Ringo"]; Array elements can be mixed up such as var Lennon = ["John", 1940,false]; var lennon = []; You can also

Object: the data in the object is accessed in two Ways: property and Method;-->object.property Object.Method

Built-in objects: such as array,math, date, such as var beatles = new Array () This is actually creating an instance of a Aray object so that you can use Beatles.length to get how many elements

Host objects: These are not provided by javascript, but are provided by his operating environment, such as form, image, and Element. Document is also a host object that can get information about any element on a Web page

　　If Var is used in a function, that variable is considered to be a local variable that exists only in the function and is a global variable if VAR is not used;

Chapter III DOM

　　DOM:D is the Doucument document O is an object (user-defined object, built-in object, host Object) m model

--and mention: The Windows object for the browser window itself, the properties and methods of this object is called the bom, provides methods such as Window.Open Window.blur.

Three important nodes:

Element node: can contain other types of nodes
Text Nodes: Content
Attribute node: A specific description of the element, all attributes are contained by the element

3 ways to get elements: element id, tag name, and class name
　　

getElementById (), The ID value must be placed in single or double quotation marks; document.getElementById ("id"); Returns an object that can be validated with alert (typeof document.getElementById ("id"));
Typeof: the operand is a string, a value, a function, a boolean, or an object.
getElementsByTagName (): Returns an array of objects, enclosed in single or double quotes
Wildcard must be placed in "", for"" to prevent confusion with multiplication sign
Use wildcards to quickly derive how many child elements
You can mix getElementById () with getElementsByTagName () to get an array of elements under a specific ID element, each value being an Object.
-->var shopping = document.getElementById ("purchase"); var items = Shopping.getelementsbytagname ("*"); Alert (items.length);
Getelementsbyclassname (): is a new method of HTML5 Dom that accesses elements through the class name in the Property: the return value is similar to getElementsByTagName ()
To specify more than one class name, you only need to separate the class name with a space in the string argument, whose order is not important, such as Document.getelementsbyclassname ("purchases sale"). length
Each node is an object that has its own properties and methods;

After explaining how to get the nodes, This chapter discusses how to get and set properties, as Follows:

GetAttribute (): The method can only be called through the element node object;
SetAttribute (): This method allows us to make changes to the value of the attribute node

Fourth case study JavaScript picture library

Insert link to reference JavaScript script, put him on </body>

<= "text/javascript" = "showpic.js" > </  script>

Event handlers, such as when the mouse pointer hovers over an element, triggers an action, using onmouseover. Leaving an element is triggered onmouseout Click is the onclick　　

< Li > <       = "images/fireworks.jpg" title = "A Fireworks display" onclick  = "showpic (this); return false" > Fireworks</a></li>  # #return False The default behavior of No-click  simply associate this action to the function Showpic (this)

There are 12 kinds of desirable values for the types of nodes, 3 of which have practical value: nodeType property: The type of the returned node; Node.nodetype (use this to verify that you have the node you want to Select)

The NodeType attribute value of the element node is 1
The NodeType property value of the attribute node is 2
The NodeType property value of the text node is 3

To change the value of a text node, you can use NodeValue Node.nodevalue

<= "description">Choose a image</p>

Alert (description. nodevalue); Return is a null because this is the return of the <p>,<p> element itself nodevalue is null what  we need is Text contained inside <p>

alert(descriptionchildnodes[0].nodevalue); or alert (description. firstchild.nodevalue);

Paste the JS code of this chapter

function　　　　showpic (whichpic) {    var source = Whichpic.getattribute ("href"); Get the resource    path var placeholder = document.getElementById ("placeholder");    Placeholder.setattribute ("src", source);    　　var text = Whichpic.getattribute ("title"); Get content
    var description = document.getElementById ("description");     = text;}

JavaScript DOM Programming Art reading notes (i)

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