web浏览器中的javascript
window 对象中其中一个最重要的属性是document,它引用document对象,后者表示显示在窗口中的文档。document对象有一些重要方法,比如getElementById(),它可以基于元素id属性的值返回单一的文档元素(表示html标签的一对开始/结束标记,以及它们之间的所有内容):
//查找id = "time"的元素 var time = document.getElementById("time"); //如果元素为空,往里面插入当前的日期和时间 if(time.firstChild == null){ time.appendChild(document.createTextNode(new Date().toString())) }
//修改添加class样式 boxF.style.backgroundColor = "yellow"; //修改class类名/id/内容 boxF.id = "boxUp";
//事件处理 //当用户单击time元素时,更新/改变它的内容 btn.onclick = function(){ this.innerHTML = new Date().toString() }
显示内容的简单客户端javascript:
<div class="reveal"> <div class="handle">点击</div> </div>
/*class = "reveal"的元素的子元素都不显示*/ .reveal*{ display: none; } /*除了class = "handle"的元素*/ .reveal*.handle{ display: none; }
//所有的页面逻辑在onload事件之后启动 window.onload = function(){ //找到所有class名为"reveal"的容器元素 var reveal = document.getElementsByClassName("reveal"); //对每个元素进行遍历 for(var i = 0;i<reveal.length;++i){ var let = reveal[i]; var title = let.getElementsByClassName("handle")[0]; //当单击这个元素时,呈现剩下的内容 console.log(title); addRevealHandler(title,let) } function addRevealHandler(title,let){ console.log(title,let); title.onclick = function(){ if(let.className === "reveal"){ let.className = "revealed"; } else if (let.className === "revealed") { let.className = "reveal" } } } }