最近一段时间里，闲着无事，顺便写了个小demo练了练手，来操作dom，分享之。
HTML：
"http://www.w3.org/TR/html4/loose.dtd">
New Web Project
JavaScript：
/**
* @author xiangwenwen
*/
var index = {
//初始化
int:function(){
//body高
var body = document.body;
var bodyHeight = body.scrollHeight;
//onclick父容器
var on = document.getElementById("on");
on.style.position = "relative";
on.style.zIndex = "5";
//状态父容器
var min = document.getElementById("min");
min.style.display = "none";
min.style.position = "absolute";
min.style.zIndex = "10";
min.style.height = bodyHeight + "px";
min.style.display = "none";
//透明层 www.2cto.com
var dodiv = document.createElement("div");
dodiv.setAttribute("id","opmint");
min.appendChild(dodiv);
var opmint = document.getElementById("opmint");
opmint.style.height = bodyHeight + "px";
opmint.style.width = "100%";
opmint.style.background = "#000";
//垂直居中div1
var div = document.createElement("div");
div.setAttribute("id","admint");
min.appendChild(div);
var admint = document.getElementById("admint");
admint.style.position = "absolute";
admint.style.width = "300px";
admint.style.height = "50px";
admint.style.border = "4px solid #963";
admint.style.top = "50%";
admint.style.left = "50%";
admint.style.marginTop = "-25px";
admint.style.marginRight = "0px";
admint.style.marginBottom = "0px";
admint.style.marginLeft = "-150px";
admint.style.display = "none";
//关闭按钮1
var a = document.createElement("a");
a.setAttribute("href","#");
a.setAttribute("id","close");
admint.appendChild(a);
var aclose = document.getElementById("close");
aclose.innerHTML = "关闭";
aclose.onclick = function(){
admint.style.display = "none";
min.style.display = "none";
}
//垂直居中div2
var div2 = document.createElement("div");
div2.setAttribute("id","addiv2");
min.insertBefore(div2,min.childNodes[2]);
var addiv2 = document.getElementById("addiv2");
addiv2.style.position = "absolute";
addiv2.style.width = "300px";
addiv2.style.height = "50px";
addiv2.style.border = "4px solid #789";
addiv2.style.top = "50%";
addiv2.style.left = "50%";
addiv2.style.marginTop = "-25px";
addiv2.style.marginRight = "0px";
addiv2.style.marginBottom = "0px";
addiv2.style.marginLeft = "-150px";
addiv2.style.display = "none";
//关闭按钮2
var a2 = document.createElement("a");
a2.setAttribute("id","a2close");
a2.setAttribute("href","#");
addiv2.appendChild(a2);
var a2close = document.getElementById("a2close");
a2close.innerHTML = "关闭";
a2close.onclick = function(){
addiv2.style.display = "none";
min.style.display = "none";
}
},
//背景透明
setOpacity:function(node,level){
node = typeof node == "string" ? document.getElementById(node) : node;
if (document.all) {
node.style.filter = "alpha(opacity ="+ level +")";
} else{
node.style.opacity = level / 100;
};
},
//初始化点击状态
OnclickAll:function(){
var onmin = document.getElementById("min");
var onck = document.getElementById("on");
var adon = onck.getElementsByTagName("a");
var adclose = document.getElementById("admint");
var acclose = document.getElementById("addiv2");
adon[0].onclick = function(){
onmin.style.display = "block";
adclose.style.display = "block";
}
adon[1].onclick = function(){
onmin.style.display = "block";
acclose.style.display = "block";
}
}
}
For the addition, deletion, modification and query of dom, there is no change in the above code. The method is replaceChild() with two parameters, one is the node to be inserted, and the other is the node to be replaced. This method is used to replace a node after deletion. If you don’t want to replace it, you just need to delete it and use removeChild() directly.
Diligence leads to excellence in work, but playfulness leads to waste. Actions are accomplished by thinking, destroyed by following. The growth of new people lies in summary. All articles and examples are only self-summaries and are for learning and communication purposes only.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
