Javascript操作DOM元素
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Javascript操作DOM元素相关的知识，希望对你有一定的参考价值。
1、动态创建DOM的步骤
（1）调用document的createElement方法来创建具有指定标签的DOM对象
（2）然后通过调用某个元素的appendChild();方法将新创建的元素添加到相应的元素下。
2、操作DOM的方法
createElement(‘element‘);创建一个节点
document.createElement(‘<input type="button" value="hello" />‘);快速创建元素，并且赋值，但是注意设置的inner部分不会被设置 document.createElement(‘<a href="www.baidu.com">百度</a>‘);注意："百度"这两个字写不进去
appendChild(node);追加一个节点
removeChild(node);移除一个节点
replaceChild(new,old);替换一个节点
insertBefore(new,参照);把节点加到前面（插到某个节点前面）
firstChild
lastChild
3、示例代码
示例代码：添加一个div元素
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>javascript测试</title> <script type="text/javascript"> onload=function(){ document.getElementById(‘btn‘).onclick=function(){ var divObj = document.createElement(‘div‘); document.body.appendChild(divObj); }; }; </script> </head> <body> <input type="button" id="btn" value="创建div"/> </body> </html>
效果图
示例代码：添加一个div元素（带样式）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Javascript测试</title>
<script type="text/javascript">
onload=function(){
document.getElementById(‘btn‘).onclick=function(){
var divObj = document.createElement(‘div‘);
divObj.style.width = "300px";
divObj.style.height="180px";
divObj.style.border="solid 1px red";
divObj.style.margin = "5px";
document.body.appendChild(divObj);
};
};
</script>
</head>
<body>
<input type="button" id="btn" value="创建div"/>
</body>
</html>效果图
示例代码：在div元素中添加按钮和文本框
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Javascript测试</title>
<script type="text/javascript">
var myOrder = 0;
onload = function(){
document.getElementById(‘btnCreateDiv‘).onclick=function(){
if(!document.getElementById(‘dv‘))
{
var divObj = document.createElement("div");
divObj.id = "dv";
divObj.style.width = "300px";
divObj.style.height = "180px";
divObj.style.border = "solid 1px red";
divObj.style.margin = "2px";
document.body.appendChild(divObj);
}
};
document.getElementById(‘btnCreateInput‘).onclick= function () {
var divObj = document.getElementById(‘dv‘);
if(divObj)
{
myOrder++;
var inputObj = document.createElement("input");
inputObj.type = "button";
inputObj.value = "按钮" + myOrder;
divObj.appendChild(inputObj);
}
};
document.getElementById(‘btnCreateTxt‘).onclick = function(){
var divObj = document.getElementById(‘dv‘);
if(divObj){
myOrder++;
var inputObj = document.createElement("input");
inputObj.type = "text";
inputObj.value = "文本框"+myOrder;
divObj.insertBefore(inputObj,divObj.firstChild);
}
};
};
</script>
</head>
<body>
<input type="button" id="btnCreateDiv" value="创建层"/>
<input type="button" id="btnCreateInput" value="创建按钮"/>
<input type="button" id="btnCreateTxt" value="创建文本框"/>
</body>
</html>效果图一（firefox下第二个按钮不能用，不知道是为什么）
效果图二
示例代码：删除div中所有元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Javascript测试</title>
<script type="text/javascript">
var myOrder = 0;
onload = function(){
document.getElementById(‘btnCreateDiv‘).onclick=function(){
if(!document.getElementById(‘dv‘))
{
var divObj = document.createElement("div");
divObj.id = "dv";
divObj.style.width = "300px";
divObj.style.height = "180px";
divObj.style.border = "solid 1px red";
divObj.style.margin = "2px";
document.body.appendChild(divObj);
}
};
document.getElementById(‘btnCreateInput‘).onclick= function () {
var divObj = document.getElementById(‘dv‘);
if(divObj)
{
myOrder++;
var inputObj = document.createElement("input");
inputObj.type = "button";
inputObj.value = "按钮" + myOrder;
divObj.appendChild(inputObj);
}
};
document.getElementById(‘btnCreateTxt‘).onclick = function(){
var divObj = document.getElementById(‘dv‘);
if(divObj){
myOrder++;
var inputObj = document.createElement("input");
inputObj.type = "text";
inputObj.value = "文本框"+myOrder;
divObj.insertBefore(inputObj,divObj.firstChild);
}
};
document.getElementById(‘btnDelete‘).onclick = function(){
var divObj = document.getElementById(‘dv‘);
if(divObj){
while(divObj.firstChild)
{
divObj.removeChild(divObj.firstChild);
}
}
};
};
</script>
</head>
<body>
<input type="button" id="btnCreateDiv" value="创建层"/>
<input type="button" id="btnCreateInput" value="创建按钮"/>
<input type="button" id="btnCreateTxt" value="创建文本框"/>
<input type="button" id="btnDelete" value="删除div中所有元素"/>
</body>
</html>效果图
以上是关于Javascript操作DOM元素的主要内容，如果未能解决你的问题，请参考以下文章
jquery 对象的 heightinnerHeightouterHeight 的区别以及DOM 元素的 clientHeightoffsetHeightscrollHeightoffset(代码片段