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"
                }
            }
        }
    }