JavaScript DOM Programming Art (2nd edition) reading notes (4)

Case study: JavaScript Picture Library

There are two ways to change the src attribute of a picture:

The 1,setattribute method is part of the 1th level DOM, which can set any attribute of an element node.

2,ELEMENT.SRC = Source; This is the method that precedes the advent of the "1th level Dom" and is now valid.

The advantage of "level 1th dom" is portability, and those old methods apply only to Web documents, and the DOM applies to any one of the markup languages.

Event handler function

When I click on a link, I want to stay on this page instead of going to another window with the following code:

<a href= "http://www.example.com" onclick= "showpic (this); return false; " >Click</a>

When this link is clicked, the default behavior of this link is not triggered because the value returned by the JavaScript code triggered by the OnClick event handler is false.

ChildNodes Property

The ChildNodes property can be used to get all the child elements of any one element. The array returned by the ChildNodes property contains all types of nodes, not just element nodes. In fact, almost everything in the document is a node, and even spaces and line breaks are interpreted as nodes, all of which are contained in the array returned by the ChildNodes property.

However, each node has a NodeType property. The NodeType attribute has a total of 12 desirable values, but only 3 of them have value: The NodeType attribute value of the element node is 1, the property node's NodeType property value is 2, and the NodeType property value of the text node is 3.

If you want to change the value of a text node, use the NodeValue property provided by the DOM.

Array element Childnodes[0] There is a more visually readable synonym, which can be written as Firstchild;dom also provides a corresponding LastChild attribute.

Example:

<p id= "description" >choose an image</p>

First create a variable to hold it:

var description = document.getElementById ("description");

The return value of Description.nodevalue is null. The NodeValue property of the <p> element itself is a null value, and if you want to get the value of the text that the <p> element contains, use Description.childnodes[0]. NodeValue or Description.firstChild.nodeValue

JavaScript DOM Programming Art (2nd edition) reading notes (4)