学步园

• DOM 方法
  
• 创建节点：以下DOM方法的基本用途是创建新的节点。
• • createElement():

createElement()方法将按照给定的标签名创建一个新的元素节点。这个方法的返回值是一个指定新元素节点的引用指针：
reference = document.createElement(element)
这个方法只有一个参数：将被 创建的元素的名字。这是一个字符串：
reference = document.createElement("p")
reference = document.createElement("h1")

• createTextNode()：

createTextNode()方法是创建一个含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点的引用指针：
reference = document.createTextNode(text)

这个方法只有一个参数：新建文本节点所包含的文本字符串：
reference = document.createTextNode("你好，world")
例：
第一步、创建一个包含着文本“试验一”的文本节点，并把由createTextNode()方法返回的引用指针赋值给了变量message。
var message = document.createTextNode("实验一");
第二步、用createElement()方法创建一个 p 元素，并将其引用指针赋值给变量container
var container = document.createElement("p");
第三步、用appendChild()方法把message文本节点插入了container元素节点
container.appendChild(message);
第四步、把刷新后的container元素追加给了文档body元素
document.body.appendChild(container);

• 复制节点：
• • cloneNode()

cloneNode()方法将为给定节点创建一个副本。这个方法的返回值是一个指向新建克隆节点的引用指针
reference = node.cloneNode(deep)
这个方法只有一个布尔值型的参数，它的可取值只能是true或false ，这个参数决定着是否把被复制节点的子节点也一同复制复制到新节点里去。
reference = node.cloneNode(true)
reference = node.cloneNode(false)
例：
var para = document.createElement("p");          创建了一个para文本段元素
var message = document.reateTextNode("实验二");  创建了一个message文本节点
para.appendChild(message);                       把message文本节点插入para元素节点
document.body.appendChild(para);                 把para插入文档的body元素
var newpara = para.cloneNode(true);
调用cloneNode()方法从para节点（及其子节点）复制出了一个新的元素节点newpara
document.body.appendChild(newpara);              把newpara插入文档的body元素
最后的结果是两个相同的文本段被插入了文档。

• 插入节点
• • appendChild()

appendChild()方法将给定元节点追加一个子节点：
reference = element.appendChild(newChild)
给定子节点newchild将成为给定元素节点element的最后一个子节点。这个方法的返回值是一个指向新增子节点的引用指针。
这个方法通常与用来创建新节点的createElement()和createTextNode()方法配合使用。

• insertBefore()

insertBefore()方法是将把一个给定节点插入到一个给定元素节点的给定子节点的前面，他返回一个指定新增子节点的引用指针：
reference = element.insertBefore(newNode,targetNode)
节点newNode将被插入元素节点element并出现在节点targetNode的前面。节点targetNode必须是element元素的一个子节点。如果targetNode节点未给出，newNode节点就将被追加为element元素的最后一个子节点。
insertBefore()方法通常与createElement()和createTextNode()方法配合使用，以便把新创建的节点插入到文档树里。还可以用来挪动文档中的现有节点。

• 删除节点
• • removeChild()

removeChild()方法将从一个给定元素里删除一个子节点：
reference = element.removeChild(node)
这个方法的返回值是一个指向已被删除的子节点的引用指针。当某个节点被removeChild()方法删除时，这个节点所包含的所有子节点将同时被删除。
例：删除id属性值是content的元素中所包含着一个的id属性值为fineprint的元素。
var container = document.getElementById("content");
var message = document.getElementById("fineprint");
container.removeChild(message)
如果想删除某个节点，但不知道它的父节点是哪一个，parentNode属性可以帮忙：
var message = document.getElementById("fineprint");
var container = message.parentNode;
container.removeChild(message);

• 替换节点：
• • replaceChild()

replaceChild()方法把一个给定父元素里的一个子节点替换为另一个节点：
reference = element.replaceChild(newChild,oldChild)
oldChild节点必须是element元素的一个子节点。他的返回值是一个指向已被替换的那个子节点的引用指针

• 设置属性节点
• • setAttribute()

setAttribute()方法将为给定元素节点添加一个新的属性值或是改变它的现有属性的值：
element.setAttribute(attributeName,attributeValue)
属性的名字和值必须以字符串的形式传递给此方法。如果这个属性已经存在，它的值被刷新；如果不存在，setAttribute()方法将创建它再为其赋值。setAttribute()方法只能用在属性节点上。

• 查找节点
• • getAttribute()
• • getAttribute()方法将返回一个给定元素的一个给定属性节点的值：
  • attributeValue = element.getAttribute(attributeName)
  • 给定属性的名字必须以字符串的形式传递给这个方法。给定属性的值将以字符串的形式返回。如果给定属性不存在，getAttribute()方法将返回一个空字符串。
• • getElementById()
• • getElementById()方法的用途是寻找一个有着给定id属性值的元素：
  • element = document.getElementById(ID)
  • 这个方法将返回一个有着给定id属性值的元素节点。如果不存在这样元素，他返回null。这个方法只能用于document对象。
• • getElementsByTagName_r()
• • getElementsByTagName_r()方法的用途是寻找有着给定标签名的所有元素：
  • elements = document.getElementsByTagName_r(tagName)
  • 返回一个节点集合，这个集合可以当作一个数组来处理。这个集合的length属性等于当前文档里有着给定标签名的所有元素的总个数。这个数组里的每个元素都是一个对象，他们都有着nodeName 、nodeType 、parentNode 、childNodes 等属性。
• • hasChildNodes

hasChildNodes方法可用来检查一个给定元素是否有子节点：
booleanValue = element.hasChildNodes
这个方法将返回一个布尔值true或false 。如果给定元素有子节点，hasChildNodes方法的返回值将永远是false

DOM属性

• 节点的属性
• • nodeName :将返回一个字符串，其内容是给定节点的名字：

name = node.nodeName
如果给定节点是：一个元素节点          nodeName属性将返回：这个元素的名字
                一个属性节点                              这个属性的名字
                一个文本节点                              一个内容为 #text的字符串
nodeName属性是一个只读属性--只能对它进行查询（读），不能直接对它进行设置（写）。

• nodeType :只读属性。将返回一个整数，这个数值代表着给定节点的类型：

integer = node.nodeType
nodeType 属性有两种可取值。所返回的整数值对应着以下12种节点类型之一

1.   1 .ELEMENT_NODE
2.   2 .ATTRIBUTE_NODE
3.   3 .TEXT_NODE
4.   4 .CDATA_SECTION_NODE
5.   5 .ENTITY_REFERENCE_NODE
6.   6 .ENTITY_NODE
7.   7 .PROCESSING_INSTRUCTION_NODE
8.   8 .COMMENT_NODE
9.   9 .DOCUMENT_NODE
10. 10 .DOCUMENT_TYPE_NODE
11. 11. DOCUMENT_FRAGMENT_NODE
12. 12 .NOTATION_NODE

• nodeValue :属性将返回给定节点的当前值：

value = node.nodeValue
这个属性将返回一个字符串。
如果给定节点是一个：属性节点            nodeValue属性将返回：这个属性的值
                    文本节点                                 这个文本节点的内容
                    元素节点                                 null
nodeValue属性是一个读/写属性。不过，你不能对一个已经被定义为null的值进行设置。换句话讲，你不能为元素节点的nodeValue属性设置一个值。你可以为文本节点的nodeValue属性设置一个值

• 遍历节点树

• childNodes :属性将返回一个数组，这个数组由给定元素节点的子节点构成：

nodeList = node.childNodes
所返回的属性是一个nodeList集合。这个nodeList集合里的每个节点都是一个节点对象。这些节点对象都有着nodeType 、nodeName 、nodeValue 等常见的节点属性。

• firstChild :属性将返回一个给定元素节点的第一个节点：

reference = node.firstChild
这个属性返回一个节点对象的引用指针。这个节点对象都有着nodeType 、nodeName 、nodeValue 等常见的节点属性。

• lastChild :属性是一个只读属性，将返回一个给定元素节点的最后一个子节点：

reference = node.lastChild
这个属性返回一个节点对象的引用指针。这个节点对象都有着nodeType 、nodeName 、nodeValue 等常见的节点属性。

• nextSibling :属性将返回一个给定节点的下一个子节点

reference = node.nextSibling
这个属性返回一个节点对象的引用指针。这个节点对象都有着nodeType 、nodeName 、nodeValue 等常见的节点属性。

• parentNode :属性将返回一个给定节点的父节点

reference = node.parentNode
这个属性返回一个节点对象的引用指针。这个节点对象都有着nodeType 、nodeName 、nodeValue 等常见的节点属性。

• previousSibling :属性将返回一个给定节点的下一个子节点

reference = node.previousSibling
这个属性返回一个节点对象的引用指针。这个节点对象都有着nodeType 、nodeName 、nodeValue 等常见的节点属性。