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)