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

Source: Internet
Author: User

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)

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.