Getting Started with JavaScript (3)

I. Knowledge of the DOM

The Document Object Model DOM defines a standard way to access and manipulate HTML documents. The DOM renders an HTML document as a tree structure with elements, attributes, and text (the node tree).

Eg:

To decompose the HTML code into a DOM node hierarchy diagram:

An HTML document can say a collection of nodes, three common DOM nodes:

1, Element node:

2. Text node: Content that is presented to the user, such as JavaScript, DOM, CSS, and other text in <li>...</li>.

3. Attribute nodes: element attributes, such as link properties for <a> tags href= "http://www.imooc.com"

EG2:

<a href= "http://www.imooc.com" >javascript dom</a>

Second, get the element by ID

The id attribute value of the tag is unique, just like " everyone has a social security number, can find the corresponding person through the ID number ", in the Web page first find the label by ID, and then operate

Grammar:

document.getElementById ("id")

Eg:

Result: null or [Object Htmlparagraphelement]

Note: Gets the element is an object, if the element is manipulated, we want to pass its property or method.

Third, innerHTML properties

The innerHTML property is used to get or replace the contents of an HTML element.

Grammar:

Object.innerhtml

Note:

1. Object is the object that gets the element, such as by document.getElementById ("ID");

2, pay attention to write, innerHTML case-sensitive.

Eg: Get <p> elements by id= "con" and output and change elements content

Iv. Changing HTML styles

Grammar:

Object.style.property=new style;

Note: object is an element that gets the element object, such as by document.getElementById ("id").

Partial basic attribute table (property)

Eg: Change the <p> element style, convert the color to red, change the font size to 20, and change the background color to blue.

{

<p id= "Pcon" >hello world!</p>

<script>

var MyChar = document.getElementById ("Pcon");

Mychar.style.color= "Red";

Mychar.style.fontsize= "20";

Mychar.style.backgroundcolor= "Blue";

</script>

}

V. Show and hide (Display properties)

Grammar:

Object.style.display = value

Note: object is an element that gets the element object, such as through document.getElementById ("id")

Value:

Vi. Control class name (ClassName attribute)

ClassName property Sets or returns the Class property of an element

Grammar:

Object.classname = ClassName

Role:

1. Get the class attribute of the element

2. Specify a CSS style for an element within the page to change the appearance of the element

Eg: Get the class attribute of the <p> element and change the classname:

EG2:

Getting Started with JavaScript (3)