DOM(Document Object Model) concepts (DOM基础)
1. What is DOM?
DOM is an abbrieviattion for Document Object Model. DOM represent a page as a tree which consists of nodes. therefore , we can manipulate these nodes in order to modify and self-define the representation or appearance of page. That is to say. all elements of a page is regardes as a respective nodes. for example, normally. HTML is the ROOT node.
DOm是文档对象模型的缩写。DOM将页面表示成为由多个节点构成的树。所以，我们可以通过操作树中的节点，来控制或者定义页面的显示样式。 也就是说，在DOM观点下，页面上所有元素都是节点。比如 ，一般来说，HTML是根节点。
2. a classic DOM Tree Demo.
e.g. we got such the following html page, and which html code is shown as follows:
例如，我们有如下所示的html页面，其html代码如下所示
<html>
<head>
<title>DOM Test</title>
</head>
<body>
<h1> welcome to test DOM Tree</h1>
<p id="p1">Welcome ,you are the best one
<a href="http://winston.cnblogs.com">click here to see me</a>
</p>
<p>Dom is so powerful, what do u think about it</p>
</body>
</html>
and , the respevtive DOM tree should be like this:
则其相应的DOM Tree 应该为：（说明：节点中的值也为节点，其为textNode）
more about Nodes:(关于节电的说明)
Rememer, everything in a DOM tree is a node. Elements and text are special kinds of nodes. but they are still nodes. Anytime you have a node, you can get the name of the node with nodeName, and the value of the node with nodeValue.
记住，再DOM 树中所有都是节点，元素和文本是两种不同类型的节点。但是他们都是节点。任何时候对于节点，我们都可以获得节点的value以及name。
you've got to be careful what type of node you're working on, though, or you could end up getting a null value when you'are expecting the name of an element or a string of text. An element node has a name, like "div" or "img", but won't have a value, And a text node won't have a nodeName, but it will have a value: the actual text stored in the node.
尽管如此，我们还是要对所操作的节点类型要清楚。因为对于element node 来说，其没有nodeValue的值；同样，对于textNode来说，其没有nodeName这一值；当然，我们如果要获得其相应的属性不会错，只是我们只能得到null/undefined。
如下所示：
eg.
node node type nodeName nodeValue
p element node "p" null/undefined
|
|
a element node "a" null/undefined
|
|
"click here" text node null/undefined "click here"
3. How to manipulate or get the related Nodes from DOM tree.
怎样获得或者对DOM Tree中的节点进行操作。
skill 1:How to get the whole tree of the page?如何获取整个页面的DOM Tree.
We can get to the whole thing using the "document.docuementElement".
comments: documentElement is a special property of the docuement object , it always return s the root element of the Dom Tree. of course,in a html page, the root node is HTMO without doubt.
skill 2: Find a specific element /node by its "id" attribute:通过ID获得特定的节点。
We can use "document.getElementById(IdVariable) to find an element /node in our web page.
eg.
var p1Node=document.getElementById("p1");
skill 3: Find a specific elment/node by its "tagName" attribute:通过TagName获取特定节点。
we can use "docuemnt.getElementsByTag(tagname)[index] to find an element/node in our web page. just for mention, there are maybe more than one node with the same tagname, such as <a..> <div>, then we can specify the child index to fetch the specified one child node.
eg.
var pNode=document.getElementsByTagName("body")[0];
skill 4: How to get first child, last child, All Child nodes from a parent node.
we can use childNodes property if a specific node to get all child nodes.
firstChild -> first child node
lastChild -> last child node
eg.
p1Node.childNodes;
skill 4:How to get the node name / node value.如何获得节点的name 或者value属性。
we can use p1Node.nodeValue to get the textNode's value, of cs, we can also apply this to element Node, but we will get value of "null/ undefined".
we can use p1Node.nodeName to get the element node's name.
skill 5: How to get the property value of node?如何获得节点的属性值？
we can use getAttributeNode(attributeName).nodeValue to set/get the specific node value.
eg.
p1Node.getAttribute("p1").nodeValue=****.
skill 6: How to create a new element/text node and then add to a existed node as child?怎样创建一个新的节点，并且把该新的节点添加到已存在的节点下面作为孩子节点？
createElement(elementName) --> to create an element node;
createTextNode(textnodeValue) --> to create a text node with value textnodeValue
createAttribute(attributeName) --> to create a attributeNode named attriteName;
setAttribute(pAttributeNode)-->set attribute node for a node;
pNode.appendChild(pchildNode) --> append pchildNode to pNode as a child node;
eg.
var pNewElementChild=document.createElement("span");
var pNewTextNodeChild=document.createTextNode("click me ");
var pAttributeNode=document.createAttribute("name");
pAttributeNode.nodeValue="herengang";
pNewElementChild.appendChild(pNewTextNodeChild);
pNode.appendChild(pNewElementChild);
pNode.setAttribute(pAttributeNode);
the result is like this:
<p>
<span name="herengang">click me</span>
</p>
