2- HTML_DOM_Tutorial (Browser Scripting)-CSDN博客

The HTML Document Object Model (HTML DOM) defines a standard way for accessing and manipulating HTML documents. The DOM presents an HTML document as a tree-structure (a node tree), with elements, attributes, and text.

http://www.w3schools.com/htmldom/default.asp

HTML DOM Tutorial

HTML DOM Introduction

http://www.w3schools.com/htmldom/dom_intro.asp

What You Should Already Know：

Before you continue you should have a basic understanding of the following:

* HTML / XHTML

* JavaScript

What is the DOM?

With JavaScript you can restructure an entire HTML document. You can add, remove, change, or reorder items on a page.

To change anything on a page, JavaScript needs access to all elements in the HTML document. This access, along with methods and properties to add, move, change, or remove HTML elements, is given through the Document Object Model (DOM).

The DOM can be used by JavaScript to read and change HTML, XHTML, and XML documents.

The DOM is separated into different parts (Core, XML, and HTML) and different levels (DOM Level 1/2/3):

* Core DOM - defines a standard set of objects for any structured document

* XML DOM - defines a standard set of objects for XML documents

* HTML DOM - defines a standard set of objects for HTML documents

HTML DOM Nodes

http://www.w3schools.com/htmldom/dom_nodes.asp

Everything in an HTML document is a node.

According to the DOM, everything in an HTML document is a node.

The DOM says that:

* The entire document is a document node

* Every HTML tag is an element node

* The texts contained in the HTML elements are text nodes

* Every HTML attribute is an attribute node

* Comments are comment nodes

Nodes have a hierarchical relationship to each other.

All nodes in an HTML document form a document tree (or node tree). The tree starts at the document node and continues to branch out until it has reached all text nodes at the lowest level of the tree.

HTML DOM Node Tree

http://www.w3schools.com/htmldom/dom_nodetree.asp

All the nodes in a node tree have relationships to each other.

Every node except for the document node has a parent node.

Most element nodes have child nodes.

Nodes are siblings when they share a parent.

Nodes can also have descendants.

Nodes can also have ancestors.

HTML DOM Access Nodes

http://www.w3schools.com/htmldom/dom_nodes_access.asp

With the DOM, you can access every node in an HTML document.

Find and Access Nodes：

You can find the element you want to manipulate in several ways:

* By using the getElementById() and getElementsByTagName() methods

These methods ignore the document structure.

The getElementById() method returns the element with the specified ID:

document.getElementById("someID");

The getElementsByTagName() method returns all elements (as a nodeList) with the specified tag name that are descendants of the element you are on when using this method.

document.getElementsByTagName("tagname");

document.getElementById('someID').getElementsByTagName("tagname");

returns a nodeList of all < tagname > elements that are descendants of the element with id=" someID ".

When working with a nodeList, we usually store the list in a variable, like this:

var x=document.getElementsByTagName("p");

we can access the elements by their index numbers. The index starts at 0.

You can loop through the nodeList by using the length property:

var x=document.getElementsByTagName("p");

for (var i=0;i<x.length;i++)

// do something with each paragraph

access a specific element by using the index number.

var y=x[2];

* By using the parentNode, firstChild, and lastChild properties of an element node

The three properties parentNode, firstChild, and lastChild follow the document structure and allow short-distance travel in the document.

The most common use of firstChild is to access the text of an element:

var text=x.firstChild.nodeValue;

The parentNode property is often used to change the document structure. Suppose you want to remove the node with id="maindiv" from the document:

var x=document.getElementById("maindiv");

x.parentNode.removeChild(x);

First you find the node with the specified id, then you move to its parent and execute the removeChild() method.

* Root Nodes

two special document properties that allow access to the tags:

* document.documentElement (returns the root node of the document; exists in all XML and HTML documents)

* document.body (a special addition for HTML pages, and gives direct access to the <body> tag)

HTML DOM Node Information

http://www.w3schools.com/htmldom/dom_nodes_info.asp

The nodeName, nodeValue, and nodeType properties contain information about nodes.

nodeName:

The nodeName property contains the name of a node.

* The nodeName of an element node is the tag name

* The nodeName of an attribute node is the attribute name

* The name of a text node is always #text

* The name of the document node is always #document

Note: nodeName always contains the uppercase tag name of an HTML element.

nodeValue:

On text nodes, the nodeValue property contains the text.

On attribute nodes, the nodeValue property contains the attribute value.

The nodeValue property is not available on document and element nodes.
nodeType:

The nodeType property returns the type of node.
The most important node types are:

Element type

NodeType

Element

Attribute

Text

Comment

Document

HTML DOM How To

http://www.w3schools.com/htmldom/dom_example.asp

Using JavaScript through HTML DOM to access, change, remove, modify… XML and HTML Pages.

HTML DOM Examples
http://www.w3schools.com/htmldom/dom_examples.asp

HTML DOM Reference

http://www.w3schools.com/htmldom/dom_reference.asp

Learn JavaScript HTML DOM Objects: collections, properties, methods and events.