JavaScript는 시스템 팝업 상자를 시뮬레이션하며 DOM 작동을 연습할 수 있습니다.-JS 튜토리얼-php.cn

最近一段时间里，闲着无事，顺便写了个小demo练了练手，来操作dom，分享之。 HTML： "http://www.w3.org/TR/html4/loose.dtd"> New Web Project body{margin: 0px;padding: 0px;font-family: "微软雅黑";} a{text-decoration: none;color: #333; } a:hover{color: #936;} .op{width: 100%;height: auto;} window.onload = function() { index.int(); index.setOpacity("opmint","10"); index.OnclickAll(); } JavaScript： /** * @author xiangwenwen */ var index = { //初始ization 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"; //透ming层 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 노드 == "문자열" ? document.getElementById(node) : node; if (document.all) { node.style.filter = "alpha(opacity ="+ level +")"; } else{ node.style.opacity = 레벨 / 100; }; }, //初始化点击状态 OnclickAll:function(){ var onmin = document.getElementBy 아이디( "min"); var onck = document.getElementById("on"); var adon = onck.getElementsByTagName("a"); var adclose = document.getElementById("admint"); var accclose = document.getElementById("addiv2"); adon[0].onclick = function(){ onmin.style.display = "block"; adclose.style.display = "block"; } adon[1].onclick = function(){ onmin.style.display = "block"; accclose.style.display = "block"; } } }

dom의 추가, 삭제, 수정 및 쿼리의 경우 위 코드에서는 변경 사항이 없습니다. 메소드는 두 개의 매개변수를 갖는 replacementChild()이며, 하나는 삽입할 노드이고, 다른 하나는 교체할 노드입니다. 이 메소드는 삭제 후 노드를 교체하는 데 사용됩니다. 교체를 원하지 않는 경우 노드를 삭제하고 직접 RemoveChild()를 사용하면 됩니다.

근면은 근면으로 이어지고, 낭비는 놀이에서 나옵니다. 행동은 생각에 의해 성취되고, 따르는 것에 의해 파괴됩니다. 새로운 사람들의 성장은 요약되어 있습니다. 모든 기사와 예제는 자기 요약일 뿐이며 학습 및 의사소통 목적으로만 사용됩니다.