"JavaScript DOM Programming Art" Reading Notes - JavaScript Picture Library_Javascript Skills

Two ways to change the src attribute of an image:

1. The setAttribute method is a component of the "Level 1 DOM", which can set any attribute of the element node.

2, element.src = source; This was the method before the advent of "Level 1 DOM" and it works now.

The advantage of "Level 1 DOM" is its portability. Those old methods are only applicable to Web documents, while DOM is applicable to any markup language.

Event handler function

When a link is clicked, I want to stay on this web page instead of going to another window. The code is as follows:

Copy code The code is as follows:

http://www.example.com" onclick="showPic(this); return false ;">Click

When this link is clicked, because the Javascript code triggered by the onclick event handler returns false, the default behavior of this link is not triggered.

childNodes attribute

The childNodes attribute can be used to get all child elements of any element. The array returned by the childNodes property contains nodes of all types, not just element nodes. In fact, almost everything in the document is a node. Even spaces and newlines are interpreted as nodes, and they are all included in the array returned by the childNodes property.

But each node has nodeType attribute. The nodeType attribute has a total of 12 possible values, but only 3 of them are valuable: the nodeType attribute value of element nodes is 1, the nodeType attribute value of attribute nodes is 2, and the nodeType attribute value of text nodes is 3.

If you want to change the value of a text node, then use the nodeValue attribute provided by DOM.

The array element childNodes[0] has a more intuitive and readable synonym, which can be written as firstChild; DOM also provides a corresponding lastChild attribute.

Example:

Copy code The code is as follows:

Choose an image

First create a variable to store it:

Copy code The code is as follows:

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

The return value of description.nodeValue is null. The nodeValue attribute of the

element itself is a null value. If you want to get the value of the text contained in the

element, use description.childNodes[0].nodeValue or description.firstChild.nodeValue