DOM（三）
Ajax---DOM（三）
第三部分：再看Document对象（Big Daddy Document）
让我们重新审视一下一切（元素）的大的父结点---Document，我们已经知道了Document有让我们高兴的获取任何元素的方法，它还能干什么？很多，让它来证明吧！
它可以凭空生成结点，销毁它们，从页面上移除，甚至肆意地破坏。它是邪恶的趣味。并且它完成这些不采用document.write()或者对象的创建（放心，这些方法还好好的在那里），让我们来看一下支持这一切发生的DOM脚本方法吧！
createElement()
createElement()可以生成一个标签。是的！你可以凭空产生这些Html结构，使你的吃惊并留下深刻印象。让我们现在就做一个！
myImg = document.createElement("IMG")
叮咚，易如反掌！我们刚刚生成了一个<img>标签，我们可以用这种方式创建我们想要的任何有效的标签。
等等，我们刚刚创建的标签在很地方？它还不在document中，为什么？因为为了显示刚刚创建的标签，必须告诉它应该添加到文档树的什么地方。
这是用createElement()时必须理解的很重要的事情。这不是象document.write()所做的那样插入Html代码，相反，仅仅是创建了一个新的元素，它有待定义然后作为文档结点的字节点插入。它刚刚诞生，等待给予形状和方式。在上面的例子中，刚刚创建的<img>标签没有ID，没有SRC，也没有在文档中的安身之处，因此我们给它一些定义：
myImg.setAttribute("id","imageOne")
myImg.setAttribute("src","jabberwocky.gif")
现在我们需要把它放到document体中，为此我们要用到document结点的AppendChild()方法
docBody = document.getElementsByTagName("body").item(0)
docBody.appendChild(myImg)
注意我们如何获取<body>标签，利用它而不是直接将元素加到文档中。这样做的原因是<body>是文档里所有元素呈现的地方。
appendChild()方法是所有结点共有的方法，而不只是document。下一个例子中，我们从里向外创建一个3*3的Table,首先创建<body>，行和格元素并把它们加到一个主要的table元素中，最后我们把整个Table加到文档的body中。
docBody = document.getElementsByTagName("body").item(0)
myTable = document.createElement("TABLE")
myTable.id = "TableOne"
myTableBody = document.createElement("TBODY")
for (i = 0; i < 3; i++){
row = document.createElement("TR")
for (j = 0; j < 3; j++){
cell = document.createElement("TD")
row.appendChild(cell)
}
myTableBody.appendChild(row)
}
myTable.appendChild(myTableBody)
docBody.appendChild(myTable)
可以看到，首先创建复杂Html元素然后把它们加到更大的结构中是一件有意义的事情。
createTextNode()
阿哦，我们创建的Table是空的，让我们用DOM方法createTextNode()给它添加一些文本内容。createTextNode()只是简单地创建一个普通的结点，这个结点什么都不是，只是一个字符串。你可以把它加到其他结点中以创建动态的内容。让我们在创建Table的格的时候循环地添加一些代码：
for (j = 0; j < 3; j++){
cell = document.createElement("TD")
textVal = "Cell" + i + "_" + j
textNode = document.createTextNode(textVal)
cell.appendChild(textNode)
row.appendChild(cell)
}
现在table有一些内容了，那么属性呢？比如BGCOLOR 和VALIGN。我们可以用元素的setAttribute()方法分配它们。
for (j = 0; j < 3; j++){
cell = document.createElement("TD")
cell.setAttribute("WIDTH","50")
cell.setAttribute("HEIGHT","50")
textVal = "Cell" + i + "_" + j
textNode = document.createTextNode(textVal)
cell.appendChild(textNode)
row.appendChild(cell)
}
让我们完成它，下面是创建表格的完整代码：
function buildTable(){
docBody = document.getElementsByTagName("body").item(0)
myTable = document.createElement("TABLE")
myTable.id ="TableOne"
myTable.border = 1
myTableBody = document.createElement("TBODY")
for (i = 0; i < 3; i++){
row = document.createElement("TR")
for (j = 0; j < 3; j++){
cell = document.createElement("TD")
cell.setAttribute("WIDTH","50")
cell.setAttribute("HEIGHT","50")
textVal = "Cell" + i + "_" + j
textNode = document.createTextNode(textVal)
cell.appendChild(textNode)
row.appendChild(cell)
}
myTableBody.appendChild(row)
}
myTable.appendChild(myTableBody)
docBody.appendChild(myTable)
}
window.onload = buildTable
我们在window.onload事件中调用函数buildTable()，因为我们必须保证在将table添加到<body>之前<body>已经存在。拷贝粘贴这段代码，放在<script>标签之间，并将其放到空白的Html文档的头部，并IE5.0或者NetScape6.0中打开，就可以看到效果了。
让我们重新审视一下一切（元素）的大的父结点---Document，我们已经知道了Document有让我们高兴的获取任何元素的方法，它还能干什么？很多，让它来证明吧！
它可以凭空生成结点，销毁它们，从页面上移除，甚至肆意地破坏。它是邪恶的趣味。并且它完成这些不采用document.write()或者对象的创建（放心，这些方法还好好的在那里），让我们来看一下支持这一切发生的DOM脚本方法吧！
createElement()
createElement()可以生成一个标签。是的！你可以凭空产生这些Html结构，使你的吃惊并留下深刻印象。让我们现在就做一个！
myImg = document.createElement("IMG")
叮咚，易如反掌！我们刚刚生成了一个<img>标签，我们可以用这种方式创建我们想要的任何有效的标签。
等等，我们刚刚创建的标签在很地方？它还不在document中，为什么？因为为了显示刚刚创建的标签，必须告诉它应该添加到文档树的什么地方。
这是用createElement()时必须理解的很重要的事情。这不是象document.write()所做的那样插入Html代码，相反，仅仅是创建了一个新的元素，它有待定义然后作为文档结点的字节点插入。它刚刚诞生，等待给予形状和方式。在上面的例子中，刚刚创建的<img>标签没有ID，没有SRC，也没有在文档中的安身之处，因此我们给它一些定义：
myImg.setAttribute("id","imageOne")
myImg.setAttribute("src","jabberwocky.gif")
现在我们需要把它放到document体中，为此我们要用到document结点的AppendChild()方法
docBody = document.getElementsByTagName("body").item(0)
docBody.appendChild(myImg)
注意我们如何获取<body>标签，利用它而不是直接将元素加到文档中。这样做的原因是<body>是文档里所有元素呈现的地方。
appendChild()方法是所有结点共有的方法，而不只是document。下一个例子中，我们从里向外创建一个3*3的Table,首先创建<body>，行和格元素并把它们加到一个主要的table元素中，最后我们把整个Table加到文档的body中。
docBody = document.getElementsByTagName("body").item(0)myTable = document.createElement("TABLE")myTable.id = "TableOne"myTableBody = document.createElement("TBODY")for (i = 0; i < 3; i++){ row = document.createElement("TR") for (j = 0; j < 3; j++){ cell = document.createElement("TD") row.appendChild(cell) } myTableBody.appendChild(row)}myTable.appendChild(myTableBody)docBody.appendChild(myTable)可以看到，首先创建复杂Html元素然后把它们加到更大的结构中是一件有意义的事情。
createTextNode()
阿哦，我们创建的Table是空的，让我们用DOM方法createTextNode()给它添加一些文本内容。createTextNode()只是简单地创建一个普通的结点，这个结点什么都不是，只是一个字符串。你可以把它加到其他结点中以创建动态的内容。让我们在创建Table的格的时候循环地添加一些代码：
for (j = 0; j < 3; j++){ cell = document.createElement("TD") textVal = "Cell" + i + "_" + j textNode = document.createTextNode(textVal) cell.appendChild(textNode) row.appendChild(cell)}现在table有一些内容了，那么属性呢？比如BGCOLOR 和VALIGN。我们可以用元素的setAttribute()方法分配它们。
for (j = 0; j < 3; j++){ cell = document.createElement("TD") cell.setAttribute("WIDTH","50") cell.setAttribute("HEIGHT","50") textVal = "Cell" + i + "_" + j textNode = document.createTextNode(textVal) cell.appendChild(textNode) row.appendChild(cell)}让我们完成它，下面是创建表格的完整代码：
function buildTable(){ docBody = document.getElementsByTagName("body").item(0) myTable = document.createElement("TABLE") myTable.id ="TableOne" myTable.border = 1 myTableBody = document.createElement("TBODY") for (i = 0; i < 3; i++){ row = document.createElement("TR") for (j = 0; j < 3; j++){ cell = document.createElement("TD") cell.setAttribute("WIDTH","50") cell.setAttribute("HEIGHT","50") textVal = "Cell" + i + "_" + j textNode = document.createTextNode(textVal) cell.appendChild(textNode) row.appendChild(cell) } myTableBody.appendChild(row) } myTable.appendChild(myTableBody) docBody.appendChild(myTable)}window.onload = buildTable我们在window.onload事件中调用函数buildTable()，因为我们必须保证在将table添加到<body>之前<body>已经存在。拷贝粘贴这段代码，放在<script>标签之间，并将其放到空白的Html文档的头部，并IE5.0或者NetScape6.0中打开，就可以看到效果了。
浙公网安备 33010602011771号