JavaScript DOM Programming Art (2nd edition) Study Note 1 (chapter 1~4)

Source: Internet
Author: User
Tags script tag

chapter I some basic concepts

HTML (Hyper-text markup language), constructs the static structure of the webpage, consists of a series of Dom;

CSS (cascading style sheets), to add style to each part of the page structure;

JavaScript, which allows the user to interact with a static web page by acquiring the DOM to add an action to the static structure;

DOM, an API (application interface) that dynamically accesses and modifies structures or styles through this interface.

The browser kernel, the rendering engine, rendering the compatibility issues between different browsers. The rendering engine is responsible for interpreting the HTML and JS documents and determining how the browser displays the content and style of the Web page. There are several browser engines commonly used, safari&chrome--webkit,firefox--gecko,ie--trident.

chapter II JavaScript syntax

The basic structure of HTML:

<! DOCTYPE HTML > <  lang= "en"><head>
<meta charset= "Utf-8"/>
<title></title>
</head><body></body > </ HTML >

JS code must be implemented through HTML, in two ways:

1. Put the code inside the script tag in the head

2, save the code as a JS file, in the script tag reference js file path, the script tag can be placed in head or body, put in the body more efficient

The second chapter of this book is simply a review of Liaoche's basic JavaScript tutorial.

third to fourth. Methods and properties for manipulating the DOM

1, node is divided into three kinds, element node, text node, attribute node, text node and attribute node are contained in element node

2,CSS is responsible for adding styles to each element, adding the class attribute or id attribute to the element in order to pinpoint the unique element.

The class attribute can be applied to multiple elements, and CSS uses the. Class name to add a style to a class of elements;

The id attribute can only be applied to unique elements, and CSS uses #id名 to add styles to unique elements;

3, the method that gets the element , belongs to the Document object

Getelementbyid;getelementsbyclassname;getelementsbytagname

The ID corresponds to a unique element, so the method is singular element;class and tag corresponds to multiple elements, so the method is plural elements

How to use:

var Test=document.getelementbyid (' id name '); Returns the element node, where each element node is an object, so the data type returned is an object

The tag and class methods can iterate through a set of elements with a for loop

4, gets and sets the element's attributes , which belong to the element node object

Gets the property name of the attribute getattribute, a parameter that needs to be obtained.

Set the property SetAttribute, two parameters, need to modify the property name, the modified value.

Note:1) When a property does not exist, create a property and assign a value to the property

2) After modifying the value of the property through SetAttribute, in the browser to view the source code is still displayed before the modified value, this is due to the DOM working mode, static loading of the page structure and dynamic refresh, dynamic refresh does not affect the static structure, not refresh the page in the browser to improve the speed of the page open

5. properties of some common element node objects

ChildNodes, gets all the child nodes of an element

Note: An array is returned, but the number of PIP elements in the node cannot be obtained with length, because ChildNodes returns not only the element nodes, all nodes are counted.

Two simplified formulations:

FirstChild, equivalent to Childnodes[0], the first element

LastChild, equivalent to Childnodes[childnodes.length-1], the last element

NodeType, returns the type of the number judgment node, element node 1; attribute node 2; text Node 3

NodeValue, gets the value of the node

JavaScript DOM Programming Art (2nd edition) Study Note 1 (chapter 1~4)

Related Article

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.