There are two ways to change the src attribute of the picture:
1. The setAttribute method is a component of "level 1 DOM", which can set any attributes of the element node.
2, element.src = source; This is the method before the appearance of "level 1 DOM", and it is also effective now.
The advantage of "Level 1 DOM" is its good portability. Those old methods only apply to web documents, while DOM applies to any markup language.
Event handling function
When clicking on a link, I want to stay on this web page instead of going to another window, the code is as follows:
The code copy is as follows:
<a href="http://www.example.com" onclick="showPic(this); return false ;">Click</a>
When clicking this link, because the value returned by the Javascript code triggered by the onclick event handler function is false, the default behavior of this link is not triggered.
childNodes attribute
The childNodes attribute can be used to obtain 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, and even spaces and line breaks are interpreted as nodes, and they are all contained in the array returned by the childNodes property.
But each node has a nodeType property. There are 12 desirable values for nodeType attributes, but only 3 of them have useful values: the nodeType attribute value of the element node is 1, the nodeType attribute value of the attribute node is 2, and the nodeType attribute value of the text node is 3.
If you want to change the value of a text node, then use the nodeValue property provided by the DOM.
The array element childNodes[0] has a more intuitive and easy-to-read synonym, which can be written as firstChild; the DOM also provides a corresponding lastChild attribute.
Example:
The code copy is as follows:
<p id="description">Choose an image</p>
First create a variable to store it:
The code copy is as follows:
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. If you want to get the value of the text contained in the <p> element, you need to use description.childNodes[0].nodeValue or description.firstChild.nodeValue