javascript中DOM元素的属性方法
看例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.phperz.com</title> php程序员站
<script language="javascript">
//删除一个元素或是div
function deldiv(divid){
var div=document.getElementById(divid);
div.parentNode.removeChild(div);
}
//添加一个div
function adddiv(divid){
var div=document.createElement("DIV");
div.id=divid;
document.body.appendChild(div);
}
</script>
<style type="text/css">
#phperz{
border:1px solid #cccccc;
height:300px;
width:300px;}
</style>
</head> www.phperz.com
<body>
<div id="phperz"></div><br />
<span style="cursor:pointer" onClick="deldiv('phperz')">删除div</span>
<br />
<br />
<span style="cursor:pointer" onClick="adddiv('phperz')">添加div</span>
</body>
</html>
1appendChild定义
将元素添加到指定的节点中
target.appendChild(newChild):newChild作为target的子节点插入最后的一子节点之后。
var newElement = Document.createElement('label');
newElement.Element.setAttribute('value', 'Username:');
var usernameText = Document.getElementById('username');
usernameText.appendChild(newElement);
2insertBefore定义
该方法有的子节点前插入一个新的子节点
target.insertBefore(newChild,existingChild)
newChild作为target的子节点插入到existingChild节点之前
existingChild为可选项参数，当为null时其效果与appendChild一样
例如：
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]);
3insertAfter定义
该方法有的子节点后插入一个新的子节点，使用方法类似于inserBefore
例：
function insertAfter(newEl, targetEl)
{
var parentEl = targetEl.parentNode;
if(parentEl.lastChild == targetEl)
{
parentEl.appendChild(newEl);
}else
{
parentEl.insertBefore(newEl,targetEl.nextSibling);
}
}
注意这个一个完整的实例：
<html>
<head>
<script language="javascript">
//insertBeore方法演示
function insertElement()
{
var nod=document.createElement("LI");
nod.innerText="be insert now";
document.getElementById("oUL1").insertBefore(nod, oLIYellow);
}
//appendChild方法演示
function insertElement1(){
var nod1=document.createElement("P");
nod1.innerText="be insert now";
document.getElementById("d").appendChild(nod1);
}
</script>
</HEAD>
<BODY>
<input type="button" onClick="insertElement();" value="insert"><br>
<input type="button" onClick="insertElement1();" value="insert1"><br>
<UL id="oUL1">
<LI id="oLIRed">Red</LI>
<LI id="oLIYellow">Yellow</LI>
<LI id="oLIBlue">Blue</LI>
</UL>
<div id="d" width="100" height="100">
</div>
</BODY>
</html>
3javascript的setAttribute
我们经常需要在JavaScript中给Element动态添加各种属性，这可以通过使用setAttribute()来实现。
setAttribute("name",value):增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
setAttribute("class", value)中class是指改变"class"这个属性，所以要带引号。
value代表对样式赋值。对于IE需要使用"className"来改变对象的class属性。
例如:
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "q");
input.setAttribute("class",bordercss);
4javascript的createElement
createElement创建html元素。
语法：oElement=document.createElement("tag"),tag要创建的元素的名字。如img,select,input等，返回值是新元素的引用。
创建之后我们可以利用insertBefore或appendChild将元素显示在页面中：
例如：创建一个下拉列表
<div id="board"></div>
<script language="javascript>
<!--
var board=document.getElementById("board");
var e=document.creteElement("select");
e.options[0]=new option("追加项","");
var obj=board.appendChild(e);
-->
</script>
创建input
<div id="board"></div>
<script language="javascript">
var board=document.getElementById("board");
var e=document.createElement("inpute");
e.type="radio";
board.appendChild(e);
e.checked=true;
</script>
创建链接
<script language="javascript">
var o = document.body;
//创建链接
function createA(url,text)
{
var a = document.createElement("a");
a.href = url;
a.innerHTML = text;
a.style.color = "red";
o.appendChild(a);
}
createA("http://www.webjx.com/","网页教学网");
</script>
创建DIV
<script language="javascript">
var o = document.body;
//创建DIV
function createDIV(text)
{
var div = document.createElement("div");
div.innerHTML = text;
o.appendChild(div);
}
createDIV("网页教学网：http://www.webjx.com/");
</script>
创建表单项
<script language="javascript">
var o = document.body;
//创建表单项
function createInput(sType,sValue)
{
var input = document.createElement("input");
input.type = sType;
input.value = sValue;
o.appendChild(input);
}
createInput("button","ooo");
</script>
创建表格
<script language="javascript">
var o = document.body;
//创建表格
function createTable(w,h,r,c)
{
var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.width = w;
table.height = h;
table.border = 1;
for(var i=1;i<=r;i++)
{
var tr = document.createElement("tr");
for(var j=1;j<=c;j++)
{
var td = document.createElement("td");
td.innerHTML = i + "" + j;
//td.appendChild(document.createTextNode(i + "" + j));
td.style.color = "#FF0000";
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
o.appendChild(table);
}
createTable(270,270,9,9);
</script>
注意：一定要有tbody，否则IE下不能创建表格，FireFox下可以！
innerHTML
另外用JavaScript创建页面元素还可以使用innerHTML，所有流行的Web浏览器的DOM元素都支持称作innerHTML的属性，允许以一种非常简单的方式来为元素增加任意的内容。innerHTML是一个字符串，以HTML标记的形式表示一个节点中的内容。如：
function add(el,text){
el.innerHTML+="<div class='c1'>"+text+"</div>";
}
注意这里使用+=操作来添加属性，而不是直接赋值。
5Screen对象包含客户端屏幕相关信息
availHeight，屏幕高度（不包含任务栏）
availWidth,屏幕宽度(不包含任务栏)
height，获取屏幕的垂直分辨率
width,获取屏幕的水平分辨率
6动态创建内容时所用的W3C DOM属性和方法
属性：
childNodes，返回当前元素所有子元素的数组
firstChild，返回当前元素的第一个下级子元素
lastChild，返回当前元素的最后一个子元素
nextSibling，返回紧跟在当前元素后面的元素
nodeValue，指定表示元素值的读/写属性
parentNode，返回元素的父节点
previousSibling，返回紧邻当前元素之前的元素
注意当使用nextSibling，previousSibling找到元素的紧邻的元素时，即使是空格( )也会被作为紧邻的元素。
方法：
document.createElement(tagName)，文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数就会生成一个div元素。
document.createTextNode(text)，文档对象的createTextNode方法会创建一个包含静态文本的节点。
<element>.appendChild(childNode)，appendChild方法将指定的节点增加到当前元素的子节点列表。例如可以增减一个option元素作为select元素的子节点。
<element>.getAttribute(name)，<element>.setAttribute(name,value)这些方法分别获得和设置元素中name属性的值。
<element>.insertBefore(newNode,targetNode)，这个方法将节点newNode作为当前元素的子节点插到targetNode)元素前面。
<element>.removeAttribute(name)，这个方法从元素中所以删除属性name
<element>.replaceChild(childNode),这个方法从元素中删除子元素childNode
<element>.replaceChild(newNode,oldNode)，这个方法将节点oldNode替换为节点newNode
<element>.hasChildnodes()，这个方法返回一个布尔值，指示元素是否有子元素。
<element>.removeChild(childNode),这个方法从元素中删除子childNode
getElementsByName(Name) //获得指定Name值的对象,返回的是一个数组。
getElementsByTagName(Tag) //获得指定标签元素,它返回是一个数组//getElementBysTagName("checkbox").length
注意getElementById只能document调用。而getElementsByName和getElementsByTagName可以被任何DOM对象调用。
document.body.appendChild(oTag)
7JavaScript中的nodeName nodeType nodeValue区别
在JavaScript中，存在有nodeName 、nodeType、 nodeValue这三个属性，今天我们来了解下JavaScript中的nodeName 、nodeType 、nodeValue区别
nodeName
nodeName 属性含有某个节点的名称。
* 元素节点的 nodeName 是标签名称
* 属性节点的 nodeName 是属性名称
* 文本节点的 nodeName 永远是 #text
* 文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的.
nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：
元素类型 节点类型
元素element 对应的nodeType值是1
属性attr 对应的nodeType值是2
文本text 对应的nodeType值是3
注释comments 对应的nodeType值是8
文档document 对应的nodeType值是9
例如：
function test(aa){
aa.href="google.com";
//将输出20
alert(aa.previousSibling.value);
}
<input type="text" size="2" value="20"/><a href='baidu.com' onClick='test(this)'>点击</a>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.phperz.com</title> php程序员站
<script language="javascript">
//删除一个元素或是div
function deldiv(divid){
var div=document.getElementById(divid);
div.parentNode.removeChild(div);
}
//添加一个div
function adddiv(divid){
var div=document.createElement("DIV");
div.id=divid;
document.body.appendChild(div);
}
</script>
<style type="text/css">
#phperz{
border:1px solid #cccccc;
height:300px;
width:300px;}
</style>
</head> www.phperz.com
<body>
<div id="phperz"></div><br />
<span style="cursor:pointer" onClick="deldiv('phperz')">删除div</span>
<br />
<br />
<span style="cursor:pointer" onClick="adddiv('phperz')">添加div</span>
</body>
</html>
1appendChild定义
将元素添加到指定的节点中
target.appendChild(newChild):newChild作为target的子节点插入最后的一子节点之后。
var newElement = Document.createElement('label');
newElement.Element.setAttribute('value', 'Username:');
var usernameText = Document.getElementById('username');
usernameText.appendChild(newElement);
2insertBefore定义
该方法有的子节点前插入一个新的子节点
target.insertBefore(newChild,existingChild)
newChild作为target的子节点插入到existingChild节点之前
existingChild为可选项参数，当为null时其效果与appendChild一样
例如：
var oTest = document.getElementById("test");
var newNode = document.createElement("p");
newNode.innerHTML = "This is a test";
oTest.insertBefore(newNode,oTest.childNodes[0]);
3insertAfter定义
该方法有的子节点后插入一个新的子节点，使用方法类似于inserBefore
例：
function insertAfter(newEl, targetEl)
{
var parentEl = targetEl.parentNode;
if(parentEl.lastChild == targetEl)
{
parentEl.appendChild(newEl);
}else
{
parentEl.insertBefore(newEl,targetEl.nextSibling);
}
}
注意这个一个完整的实例：
<html>
<head>
<script language="javascript">
//insertBeore方法演示
function insertElement()
{
var nod=document.createElement("LI");
nod.innerText="be insert now";
document.getElementById("oUL1").insertBefore(nod, oLIYellow);
}
//appendChild方法演示
function insertElement1(){
var nod1=document.createElement("P");
nod1.innerText="be insert now";
document.getElementById("d").appendChild(nod1);
}
</script>
</HEAD>
<BODY>
<input type="button" onClick="insertElement();" value="insert"><br>
<input type="button" onClick="insertElement1();" value="insert1"><br>
<UL id="oUL1">
<LI id="oLIRed">Red</LI>
<LI id="oLIYellow">Yellow</LI>
<LI id="oLIBlue">Blue</LI>
</UL>
<div id="d" width="100" height="100">
</div>
</BODY>
</html>
3javascript的setAttribute
我们经常需要在JavaScript中给Element动态添加各种属性，这可以通过使用setAttribute()来实现。
setAttribute("name",value):增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。
setAttribute("class", value)中class是指改变"class"这个属性，所以要带引号。
value代表对样式赋值。对于IE需要使用"className"来改变对象的class属性。
例如:
var input = document.createElement("input");
input.setAttribute("type", "text");
input.setAttribute("name", "q");
input.setAttribute("class",bordercss);
4javascript的createElement
createElement创建html元素。
语法：oElement=document.createElement("tag"),tag要创建的元素的名字。如img,select,input等，返回值是新元素的引用。
创建之后我们可以利用insertBefore或appendChild将元素显示在页面中：
例如：创建一个下拉列表
<div id="board"></div>
<script language="javascript>
<!--
var board=document.getElementById("board");
var e=document.creteElement("select");
e.options[0]=new option("追加项","");
var obj=board.appendChild(e);
-->
</script>
创建input
<div id="board"></div>
<script language="javascript">
var board=document.getElementById("board");
var e=document.createElement("inpute");
e.type="radio";
board.appendChild(e);
e.checked=true;
</script>
创建链接
<script language="javascript">
var o = document.body;
//创建链接
function createA(url,text)
{
var a = document.createElement("a");
a.href = url;
a.innerHTML = text;
a.style.color = "red";
o.appendChild(a);
}
createA("http://www.webjx.com/","网页教学网");
</script>
创建DIV
<script language="javascript">
var o = document.body;
//创建DIV
function createDIV(text)
{
var div = document.createElement("div");
div.innerHTML = text;
o.appendChild(div);
}
createDIV("网页教学网：http://www.webjx.com/");
</script>
创建表单项
<script language="javascript">
var o = document.body;
//创建表单项
function createInput(sType,sValue)
{
var input = document.createElement("input");
input.type = sType;
input.value = sValue;
o.appendChild(input);
}
createInput("button","ooo");
</script>
创建表格
<script language="javascript">
var o = document.body;
//创建表格
function createTable(w,h,r,c)
{
var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.width = w;
table.height = h;
table.border = 1;
for(var i=1;i<=r;i++)
{
var tr = document.createElement("tr");
for(var j=1;j<=c;j++)
{
var td = document.createElement("td");
td.innerHTML = i + "" + j;
//td.appendChild(document.createTextNode(i + "" + j));
td.style.color = "#FF0000";
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
o.appendChild(table);
}
createTable(270,270,9,9);
</script>
注意：一定要有tbody，否则IE下不能创建表格，FireFox下可以！
innerHTML
另外用JavaScript创建页面元素还可以使用innerHTML，所有流行的Web浏览器的DOM元素都支持称作innerHTML的属性，允许以一种非常简单的方式来为元素增加任意的内容。innerHTML是一个字符串，以HTML标记的形式表示一个节点中的内容。如：
function add(el,text){
el.innerHTML+="<div class='c1'>"+text+"</div>";
}
注意这里使用+=操作来添加属性，而不是直接赋值。
5Screen对象包含客户端屏幕相关信息
availHeight，屏幕高度（不包含任务栏）
availWidth,屏幕宽度(不包含任务栏)
height，获取屏幕的垂直分辨率
width,获取屏幕的水平分辨率
6动态创建内容时所用的W3C DOM属性和方法
属性：
childNodes，返回当前元素所有子元素的数组
firstChild，返回当前元素的第一个下级子元素
lastChild，返回当前元素的最后一个子元素
nextSibling，返回紧跟在当前元素后面的元素
nodeValue，指定表示元素值的读/写属性
parentNode，返回元素的父节点
previousSibling，返回紧邻当前元素之前的元素
注意当使用nextSibling，previousSibling找到元素的紧邻的元素时，即使是空格( )也会被作为紧邻的元素。
方法：
document.createElement(tagName)，文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数就会生成一个div元素。
document.createTextNode(text)，文档对象的createTextNode方法会创建一个包含静态文本的节点。
<element>.appendChild(childNode)，appendChild方法将指定的节点增加到当前元素的子节点列表。例如可以增减一个option元素作为select元素的子节点。
<element>.getAttribute(name)，<element>.setAttribute(name,value)这些方法分别获得和设置元素中name属性的值。
<element>.insertBefore(newNode,targetNode)，这个方法将节点newNode作为当前元素的子节点插到targetNode)元素前面。
<element>.removeAttribute(name)，这个方法从元素中所以删除属性name
<element>.replaceChild(childNode),这个方法从元素中删除子元素childNode
<element>.replaceChild(newNode,oldNode)，这个方法将节点oldNode替换为节点newNode
<element>.hasChildnodes()，这个方法返回一个布尔值，指示元素是否有子元素。
<element>.removeChild(childNode),这个方法从元素中删除子childNode
getElementsByName(Name) //获得指定Name值的对象,返回的是一个数组。
getElementsByTagName(Tag) //获得指定标签元素,它返回是一个数组//getElementBysTagName("checkbox").length
注意getElementById只能document调用。而getElementsByName和getElementsByTagName可以被任何DOM对象调用。
document.body.appendChild(oTag)
7JavaScript中的nodeName nodeType nodeValue区别
在JavaScript中，存在有nodeName 、nodeType、 nodeValue这三个属性，今天我们来了解下JavaScript中的nodeName 、nodeType 、nodeValue区别
nodeName
nodeName 属性含有某个节点的名称。
* 元素节点的 nodeName 是标签名称
* 属性节点的 nodeName 是属性名称
* 文本节点的 nodeName 永远是 #text
* 文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的.
nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：
元素类型 节点类型
元素element 对应的nodeType值是1
属性attr 对应的nodeType值是2
文本text 对应的nodeType值是3
注释comments 对应的nodeType值是8
文档document 对应的nodeType值是9
例如：
function test(aa){
aa.href="google.com";
//将输出20
alert(aa.previousSibling.value);
}
<input type="text" size="2" value="20"/><a href='baidu.com' onClick='test(this)'>点击</a>