核心提示：元素的创建、删除、插入、替换!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titleDOM/title/headscript/*document.cre...
元素的创建、删除、插入、替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<script>
/*
document.createElement() 创建一个元素
父级.appendChild() 在父元素的子元素下面添加一个元素
父级.insertBefore() 在父元素的子元素前面插入一个元素
父级.replaceChild() 替换父级下的某个子元素
父级.removeChild() 删除父级下的某个子元素
appendChild、insertBefore、replaceChild都可以操作动态创建出来的节点，也可以操作已有的节点
*/
window.onload=function (){
var aInput=document.getElementsByTagName('input');
var oUl=document.getElementsByTagName('ul')[0];
var oP=document.getElementsByTagName('p')[0];
var oDiv=document.getElementsByTagName('p')[0];
aInput[1].onclick=function (){
var oLi=document.createElement('li');//创建一个元素li
oLi.innerHTML=aInput[0].value;
var oA=document.createElement('a');//创建一个元素a
oA.innerHTML='删除';
oA.href='javascript：;';
/*
oUl.appendChild(oLi);//把创建的li添加给ul,在父元素的最后一个子元素后面添加
oLi.appendChild(oA);//把创建的a添加给li,在父元素的最后一个子元素后面添加
oUl.insertBefore(oLi,oUl.children[0]);//在父元素的子元素前面插入一个元素
在非标准IE下，如果第二个参数的节点不存在，会报错
在其他标准浏览器下，如果第二个参数的节点不存在，
则会以appendChild形式进行添加
*/
//解决方案
if (oUl.children[0]) {
oUl.insertBefore(oLi,oUl.children[0]);
oLi.appendChild(oA);
}else{
oUl.appendChild(oLi);
oLi.appendChild(oA);
}
//删除元素
oA.onclick=function (){
oUl.removeChild(this.parentNode);
}
}
//替换元素
aInput[2].onclick=function (){
document.body.replaceChild(oDiv, oP);
}
};
</script>
<body>
<input type="text" name="">
<input type="button" value="添加" name="">
<br>
<p>p标签：22222222</p>
<input type="button" value="替换" name="">
<p> p标签：1111111111</p>
<ul></ul>
</body>
</html>
元素的宽高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
<style type="text/css">
p{width: 100px;height: 100px;border:1px solid #000;padding: 10px;}
</style>
</head>
<body>
<!--
width height
getComputedStyle(oDiv1).width 样式宽 样式中设置的宽度
oDiv1.clientWidth 可视宽 样式中设置的宽度 +padding
oDiv1.offsetWidth 占位宽 样式中设置的宽度 +padding +border 盒子实际占据的大小
-->
<p id="p1"></p>
<script>
var oDiv1=document.getElementById('p1');
alert(getComputedStyle(oDiv1).width);//100 样式宽
alert(oDiv1.clientWidth);//120 可视宽
alert(oDiv1.offsetWidth);//122 占位宽
</script>
</body>
</html>
