Head first JavaScript (vi)

accessing page elements

Access to page elements a common practice is to add an ID to the tag, which can then be implemented via the getElementById () function, such as:

<div id = "Sceneimg" >...</div>var scenedescription = document.getElementById ("Scenetext")

Another way is to access the name of the tag, the getElementsByTagName () function can get all the page elements of this tag, stored as an array, according to the order in which the page appears, such as:

//two ways to access the same way Document.get Elementbyid ("Milk") document.getelementsbytagname ("img") [2]

InnerHTML

Through getElementById () can get an object of an ID, to further get the text content inside the tag can be through the innerHTML attribute, you can also modify the content, such as:

document.getElementById ("Cake"). InnerHTML = "So <strong>good</strong>!";

Dom:document Object Model

The structure of a Web page can be said to be composed of nodes, which are large and small tags, including the outermost

Each node has some properties that can help traverse the tree, including

• NodeValue: It's just text or attribute nodes.
• Nodetype:document or text, expressed in numbers
• ChildNodes: An array of all child nodes
• FirstChild
• LastChild

Modify the contents of text by node

Can be divided into three steps to complete:

1. Remove all child nodes from the node
2. Create a new node with the new text you want to replace
3. Add a new node to the original knot to become its child node.

Such as:

var node = document.getElementById ("story"), while (Node.firstchild)    node.removechild (node.firstchild); Node.appendchild (document.createTextNode ("new text");//actually functions quite with a sentence of document.getElementById ("story"). InnerHTML = "New Text ";

CSS and DOM

<span id = "Decision1" class = "decision" Onclick...></span><span id = "Decision2" class = "decision" ONCLI Ck... ></span>

Class is a way for CSS to organize rendering objects, and you can give some style to the "decision" class

<style type = "Text/css" >span.decision{    font-weight ...    ...    } </style>

The ClassName property inside the node object can be accessed to the class of the node and can be modified, such as:

document.getElementById ("Decision1"). ClassName = "Decisioninverse";

Hide an object from a page

You can modify the visibility property inside the style, such as:

document.getElementById ("..."). style.visibility = "visible";d Ocument.getelementbyid ("..."). Style.visibility = " Hidden ";

Head first JavaScript (vi)