动态创建html内容时所用的W3C DOM属性和方法
document的属性和方法:
document.createElement(tagName) :文档对象上的createElement方法可以创建由tagName指定的元素.如果以串div作为方法参数,就会生成一个div元素.
document.createTextNode(text) :文档对象的createTextNode方法会创建一个包含静态文本text的文本节点.
document.createAttribute(): 用指定的名字创建新的Attr节点.
document.createComment() :用指定的字符串创建新的Comment节点.
document.getElementById(): 返回文档中具有指定id的Element节点.
document .getElementsByTagName(): 返回文档中具有指定标记名的所有Element节点.返回为一Element节点数组;
节点的属性和方法:
<element>.appendChild(childNode) :appendChild方法将指定的节点增加到当前元素的子节点列表(作为一个新的子节点).例如,可以增加一个option元素,作为select元素的子节点.
<element>.getAttribute(name) : 该方法用来获得元素中name属性的值.
<element>.setAttribute(name,value) : 该方法用来设置元素中name属性的值.
<element>.insertBefore(newNode,targetNode) :该方法将节点newNode作为当前元素的子节点插到targetNode子节点元素的前面.
<element>.removeAttribute(name) :该方法从元素中删除属性name.
<element>.removeChild(childNode) :该方法从元素中删除子元素childNode.
<element>.replaceChild(newNode,oldNode) :该方法将节点oldNode替换为节点newNode.
<elemnet>.hasChildNodes() :该方法返回一个布尔值,指示元素是否有子元素.
<element>.tagName :元素的标记名称,比如<p>元素为PHTML文档返回的tagName均为大写;
<element>.getAttributeNode() :以Attr节点的形式返回指定属性的值;
<element>.getElementsByTagName() :返回一个Node数组,包含具有指定标记名的所有Element节点的子孙节点,其顺序为在文档中出现的顺序.
<element>.hasAttribute() :如果该元素具有指定名字的属性,则返回true;
<element>.removeAttributeNode() :从元素的属性列表中删除指定的Attr节点.
<element>.setAttributeNode() :把指定的Attr节点添加到该元素的属性列表中．
<element>.cloneNode(true) :复制当前节点,true表示复制当前节点以及它的所有子孙节点.
Node对象常用属性:
<element>.attributes :如果该节点是一个Element,则以namedNodeMap形式返回该元素的属性.
<element>.childNodes :以Node[]的形式存放当前节点的子节点.如果没有子节点,则返回空数组.
<element>.firstChild :以Node的形式返回当前节点的第一个子节点.如果没有子节点,则为null.
<element>.lastChild :以Node的形式返回当前节点的最后一个子节点.如果没有子节点,则为null.
<element>.nextSibling :以Node的形式返回当前节点的兄弟下一个节点.如果没有这样的节点,则返回null.
<element>.previousSibling :以Node的形式返回紧挨当前节点,位于它之前的兄弟节点.如果没有这样的节点,则返回null.
<element>.parentNode :以Node的形式返回当前节点的父节点.如果没有父节点,则返回null.
<element>.nodeType :代表节点的类型.
<element>.nodeName :节点的名字,Element节点则代表Element的标记名称.
备注::
如果使用appendChild将<tr>元素直接增加到<table>中,则在IE中这一行并不出项,但在其他浏览器中却会显示出来.对此的解决之道是,将<tr>元素增加到表的<tbody>元素中,这种解决办法在所有的浏览器中都能正确工作.
关于setAttribute方法,IE也有麻烦.IE不能使用setAttribute正确地设置class属性.对此有一个跨浏览器的解决方法,即同时使用setAttribute("class","newclassName")和setAttribute("className","newClassName").另外,在IE中不能使用setAttribute设置style属性.最能保证浏览器兼容的技术不是<element>.setAttribute("style","font-weight:bold;"),而是<element>.style.cssText="font-weight:bold;".
实践:
<html>
<head>
<title>测试</title>
</head>
<script language="javascript">
function show()
{
var showdiv = document.createElement("div");
showdiv.setAttribute("id","div1");
showdiv.innerHTML = "这就是所谓的动态创建！";
showdiv.style.height = "100px";
showdiv.style.backgroundColor = "yellow";
document.body.appendChild(showdiv);
}
</script>
<body>
<a href="javascript:show();">点我</a>
</body>
</html>
前言：与传统的方法不同，DOM作为一种“手术刀”型的开发工具能够对document做到“细致入微”的照顾。因为DOM是基于文档树模型建立起来的一套方法因此能够对文档做几乎任何方面的修改。不论您是希望修改结构还是在内容，使用DOM都是一个不错的选择。
今天要谈到到了是四个典型的DOM方法以及他们的使用策略：
createElement()方法 createTextNode()方法 appendChild()方法 insertBefore()方法1.creatElement()方法
规则document.creatElement(nodeName)
例如我们可以使用如下的语句来创建一个段落。
document.creatElement("p")
2.creatTextNode()方法
规则document.creatTextNode(text)
例如我们可以使用如下语句来创建一条语句用来问候大家。
document.creatTextNode("Hello World")
3.appendChild()方法
规则parent.appendChild(child)
创建了所需要的结构或内容以后还需要将所创建的东西插入到文档当中才能算成功。例如我们可以使用如下的方法来建立起我们需要创建的HTML内容。请注意这完全是动态建立的。
var para = document.createElement("p");
var testdiv = document.getElementById("testdiv");
var txt = document.createTextNode("Hello World");
testdiv.appendChild(para);
para.appendChild(txt);
这样我们就把之前所建立的结构与内容插如到了我们所需要的地方。不过问题也随之而来，appendChild()方法只能创建已知元素结点的最后一个子结点，如果当父元素已经拥有几个子元素的时候，我们是无法通过appendChild()方法来选择插入点的。
4.insertBefore()方法
规则parentElement.inserBefore(newElemenet,targetElement)
在使用的时候，我们不需要知道父元素到底是谁，因为我们可以通过这样的语法获得父元素：
targetElement.parentNode
这样看上去似乎有点好笑，当别人问你父亲是谁的时候，你却告诉别人，我的父亲就是“我的父亲”。不过在DOM中，它确实就是一个能实际使用的方法。
补充一个有意义的函数：
当看到有insertBefore()方法之后，也许会想当然的认为还有insertAfter()方法。不过要让你失望了，DOM并没有提供这样的方法。我想是因为它可以通过混合使用insertBefore()方法和appendChild()方法来实现吧。但是，我们总希望它能够是对称。所以我们自己动手编写一个insertAfter()方法，把它作为函数存放在我们的文档中。
function insertAfter(newelElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
}else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
至此，我们至少能够用以上的几个DOM方法来创建简单的HTML文档。使用DOM的好处有两点：第一，文档与行为互相分离，这符合现代工程学的先进理念。请时刻记住，混合在一起的永远都不是最好的办法。第二，动态创建的结构与内容并不影响原先的文档内容，这样使得我们能清楚的完成“替换”与“插入”的不同操作。
是的DOM就是这样一种细致的工具。细致而强大的确是DOM能够在世界上成为标准的有力条件。
document.createElement(tagName) :文档对象上的createElement方法可以创建由tagName指定的元素.如果以串div作为方法参数,就会生成一个div元素.
document.createTextNode(text) :文档对象的createTextNode方法会创建一个包含静态文本text的文本节点.
document.createAttribute(): 用指定的名字创建新的Attr节点.
document.createComment() :用指定的字符串创建新的Comment节点.
document.getElementById(): 返回文档中具有指定id的Element节点.
document .getElementsByTagName(): 返回文档中具有指定标记名的所有Element节点.返回为一Element节点数组;
节点的属性和方法:
<element>.appendChild(childNode) :appendChild方法将指定的节点增加到当前元素的子节点列表(作为一个新的子节点).例如,可以增加一个option元素,作为select元素的子节点.
<element>.getAttribute(name) : 该方法用来获得元素中name属性的值.
<element>.setAttribute(name,value) : 该方法用来设置元素中name属性的值.
<element>.insertBefore(newNode,targetNode) :该方法将节点newNode作为当前元素的子节点插到targetNode子节点元素的前面.
<element>.removeAttribute(name) :该方法从元素中删除属性name.
<element>.removeChild(childNode) :该方法从元素中删除子元素childNode.
<element>.replaceChild(newNode,oldNode) :该方法将节点oldNode替换为节点newNode.
<elemnet>.hasChildNodes() :该方法返回一个布尔值,指示元素是否有子元素.
<element>.tagName :元素的标记名称,比如<p>元素为PHTML文档返回的tagName均为大写;
<element>.getAttributeNode() :以Attr节点的形式返回指定属性的值;
<element>.getElementsByTagName() :返回一个Node数组,包含具有指定标记名的所有Element节点的子孙节点,其顺序为在文档中出现的顺序.
<element>.hasAttribute() :如果该元素具有指定名字的属性,则返回true;
<element>.removeAttributeNode() :从元素的属性列表中删除指定的Attr节点.
<element>.setAttributeNode() :把指定的Attr节点添加到该元素的属性列表中．
<element>.cloneNode(true) :复制当前节点,true表示复制当前节点以及它的所有子孙节点.
Node对象常用属性:
<element>.attributes :如果该节点是一个Element,则以namedNodeMap形式返回该元素的属性.
<element>.childNodes :以Node[]的形式存放当前节点的子节点.如果没有子节点,则返回空数组.
<element>.firstChild :以Node的形式返回当前节点的第一个子节点.如果没有子节点,则为null.
<element>.lastChild :以Node的形式返回当前节点的最后一个子节点.如果没有子节点,则为null.
<element>.nextSibling :以Node的形式返回当前节点的兄弟下一个节点.如果没有这样的节点,则返回null.
<element>.previousSibling :以Node的形式返回紧挨当前节点,位于它之前的兄弟节点.如果没有这样的节点,则返回null.
<element>.parentNode :以Node的形式返回当前节点的父节点.如果没有父节点,则返回null.
<element>.nodeType :代表节点的类型.
<element>.nodeName :节点的名字,Element节点则代表Element的标记名称.
备注::
如果使用appendChild将<tr>元素直接增加到<table>中,则在IE中这一行并不出项,但在其他浏览器中却会显示出来.对此的解决之道是,将<tr>元素增加到表的<tbody>元素中,这种解决办法在所有的浏览器中都能正确工作.
关于setAttribute方法,IE也有麻烦.IE不能使用setAttribute正确地设置class属性.对此有一个跨浏览器的解决方法,即同时使用setAttribute("class","newclassName")和setAttribute("className","newClassName").另外,在IE中不能使用setAttribute设置style属性.最能保证浏览器兼容的技术不是<element>.setAttribute("style","font-weight:bold;"),而是<element>.style.cssText="font-weight:bold;".
实践:
<html>
<head>
<title>测试</title>
</head>
<script language="javascript">
function show()
{
var showdiv = document.createElement("div");
showdiv.setAttribute("id","div1");
showdiv.innerHTML = "这就是所谓的动态创建！";
showdiv.style.height = "100px";
showdiv.style.backgroundColor = "yellow";
document.body.appendChild(showdiv);
}
</script>
<body>
<a href="javascript:show();">点我</a>
</body>
</html>
前言：与传统的方法不同，DOM作为一种“手术刀”型的开发工具能够对document做到“细致入微”的照顾。因为DOM是基于文档树模型建立起来的一套方法因此能够对文档做几乎任何方面的修改。不论您是希望修改结构还是在内容，使用DOM都是一个不错的选择。
今天要谈到到了是四个典型的DOM方法以及他们的使用策略：
createElement()方法 createTextNode()方法 appendChild()方法 insertBefore()方法1.creatElement()方法
规则document.creatElement(nodeName)
例如我们可以使用如下的语句来创建一个段落。
document.creatElement("p")
2.creatTextNode()方法
规则document.creatTextNode(text)
例如我们可以使用如下语句来创建一条语句用来问候大家。
document.creatTextNode("Hello World")
3.appendChild()方法
规则parent.appendChild(child)
创建了所需要的结构或内容以后还需要将所创建的东西插入到文档当中才能算成功。例如我们可以使用如下的方法来建立起我们需要创建的HTML内容。请注意这完全是动态建立的。
var para = document.createElement("p");
var testdiv = document.getElementById("testdiv");
var txt = document.createTextNode("Hello World");
testdiv.appendChild(para);
para.appendChild(txt);
这样我们就把之前所建立的结构与内容插如到了我们所需要的地方。不过问题也随之而来，appendChild()方法只能创建已知元素结点的最后一个子结点，如果当父元素已经拥有几个子元素的时候，我们是无法通过appendChild()方法来选择插入点的。
4.insertBefore()方法
规则parentElement.inserBefore(newElemenet,targetElement)
在使用的时候，我们不需要知道父元素到底是谁，因为我们可以通过这样的语法获得父元素：
targetElement.parentNode
这样看上去似乎有点好笑，当别人问你父亲是谁的时候，你却告诉别人，我的父亲就是“我的父亲”。不过在DOM中，它确实就是一个能实际使用的方法。
补充一个有意义的函数：
当看到有insertBefore()方法之后，也许会想当然的认为还有insertAfter()方法。不过要让你失望了，DOM并没有提供这样的方法。我想是因为它可以通过混合使用insertBefore()方法和appendChild()方法来实现吧。但是，我们总希望它能够是对称。所以我们自己动手编写一个insertAfter()方法，把它作为函数存放在我们的文档中。
function insertAfter(newelElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
}else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
至此，我们至少能够用以上的几个DOM方法来创建简单的HTML文档。使用DOM的好处有两点：第一，文档与行为互相分离，这符合现代工程学的先进理念。请时刻记住，混合在一起的永远都不是最好的办法。第二，动态创建的结构与内容并不影响原先的文档内容，这样使得我们能清楚的完成“替换”与“插入”的不同操作。
是的DOM就是这样一种细致的工具。细致而强大的确是DOM能够在世界上成为标准的有力条件。