javascript网页特效——DOM操作

实例一：根据name获取网页中的所有复选框

<script type="text/javascript">
            //获取多个DOM
            function getDomsByName(){
                //获取的DOMs
                var doms = document.getElementsByName("myName");
                var str = '';           //定义拼接字符变量
                for(var i=0; i<doms.length; i++){
                    str += doms[i].tagName;     //拼接标签的名字
                    str += ",";                 //分隔符
                }
                alert("两个DOM的标签是：" + str);  //提示
            }
</script>

实例二：打印一个元素的所有属性

<script type="text/javascript">
    //获取DOM的所有属性
    function getDomValues(){
        //获取链接的DOM
        var myLink = document.getElementById("myLink");
        var str = '';               //结果拼接
        for(var prop in myLink){    //循环遍历myLink的所有属性key
            //拼接到str，key和value用冒号隔开
            str += prop + " : " + myLink[prop] + "<br/>";
        }
        //打印到网页里
        document.getElementById("valuesP").innerHTML = str;
    }
</script>

实例三：遍历HTML文档内容

<script type="text/javascript">
    //遍历文档树
    function getDomTree(){
        alert(text(document.body));             //用提示框显示树内容
    }
    function text(elem){  
        //定义文字字符串
        var t="";                               
        //获取改节点的所有子节点
        var elemelem = elem.childNodes;
        //遍历所有子节点  
        for(var i=0; i<elemelem.length;i++){  
            //当前节点
            var e = elemelem[i];
            //文本、注释节点不被遍历，并判断其是否为直接父节点
            if(e.parentNode == elem && e.nodeType == 1){
                //把标签名添加到文本内容里
                t += e.tagName + ' ';   
                //循环子节点
                if(e.childNodes.length > 0){
                //如果子节点只有一个文本子节点，则跳过
                    if(e.childNodes.length == 1){
                        var fe = e.childNodes[0];
                        //是否为文本子节点
                        if(fe.nodeType == 3)    
                            continue;           //跳过
                    }
                    t += '\n\t';    //子节点分隔符
                    t += text(e);   //递归还有子元素的子节点
                }
            }                  
        }  
        return t;       //返回得到的文本  
}  
</script>

实例四：动态创建网页新元素

<script type="text/javascript">
            //创建新元素
            function createNewElements(){
                //使用innerHTML创建新元素
                var p1 = document.getElementById("p1");
                //设置innerHTML内容
                p1.innerHTML = "<span>我的dom文本1</span>";
                //使用createElement来创建新元素
                var span = document.createElement("span");
                //为新元素内容创建一个文本节点
                span.appendChild(document.createTextNode("我的dom文本2"));
                var p2 = document.getElementById("p2");
                //挂接
                p2.appendChild(span);
            }
        </script>

<!-- 定义为新元素挂接的容器元素 -->
        <p id="p1"></p>
        <p id="p2"></p>

实例五：删除元素

<script type="text/javascript">
            //删除元素
            function deleteElement(){
                //获取准备删除的DOM
                var del = document.getElementById("del");
                //调用删除函数彻底删除
                del.parentNode.removeChild(del);
            }
        </script>

实例六：主动触发按钮的单击事件

<script type="text/javascript">
            //触发按钮单击的事件
            function fireBtnClick(){
                //获取到按钮DOM
                var myBtn = document.getElementById("myBtn");
                //使用click()函数
                myBtn.click();
            }
        </script>


<input type="button" value="触发按钮的事件" onclick="fireBtnClick();"/>
<input id="myBtn" type="button" value="提示按钮" onclick="alert('我被提示了!')"/>

实例七：引用同级的元素

<script type="text/javascript">
    //获取同级按钮的value
    function getLevelBtnVal(btn){
        var p = btn.parentNode;         //通过单击按钮获取它的父节点
        var children = p.childNodes;        //得到父节点的所有子节点
        //遍历子节点
        for(var i=0; i<children.length; i++){
            //判断不是当前节点，但是同类节点的节点
            if(children[i] != btn && children[i].nodeType==btn.nodeType){
                alert(children[i].value);   //提示对方的value值
            }
        }
    }
</script>


<input type="button" value="获取同级按钮的value" 
        onclick="getLevelBtnVal(this);"/>
<input type="button" value="获取同级按钮的value2" 
        onclick="getLevelBtnVal(this);"/>

实例八：克隆元素

<script type="text/javascript">
            //克隆元素
            function cloneImg(){
                //得到元素DOM
                var myImg = document.getElementById("myImg");
                //克隆出新的元素
                var newImg = myImg.cloneNode(true);
                //使用appendChild()函数挂接
                document.getElementById("myContent").appendChild(newImg);
            }
        </script>

cloneNode接受一个布尔参数，为true时表示复制该节点及其所有子节点，为false时表示只复制该节点。

实例九：隐藏或显示元素

<script type="text/javascript">
            //隐藏或显示元素
            function showOrHide(){
                //得到图片的DOM
                var myImg = document.getElementById("myImg");
                var display = myImg.style.display;  //当前的显示样式
                if(display != 'none'){              //是否正在隐藏
                    myImg.style.display = 'none';   //设为隐藏
                }else{  
                    myImg.style.display = '';       //取消隐藏
                }
            }
        </script>


<input type="button" value="隐藏或显示" onclick="showOrHide();"/>

实例十：倒排序子元素

<script type="text/javascript"> 
            //倒排序子元素的函数
            function deleteChilds(){
                //获取父DOM
                var ul = document.getElementsByTagName('UL')[0];
                if(ul.hasChildNodes()){//判断是否包含子元素
                    //子元素的个数
                    var len = ul.childNodes.length;
                    var arr = [];   //新数组变量用于存储节点
                    for(var i=0;i<len;i++){//遍历
                        //把节点存入数组
                        arr[i] = ul.childNodes[0];
                        //从第一个元素开始删除
                        ul.removeChild(ul.childNodes[0]);
                    }
                    //倒过来遍历所有节点
                    for(var i=len-1;i>=0;i--){
                        ul.appendChild(arr[i]);//添加到ul为子元素
                    }
                }
            }
</script>


<ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
</ul>

实例十一：遍历HTML元素

<script type="text/javascript">
    //遍历文档树
    function getDomTree(){
        alert(text(document.body));             //用提示框显示树内容
    }
    function text(elem){  
        //定义文字字符串
        var t="";                               
        //获取改节点的所有子节点
        var elemelem = elem.childNodes;
        //遍历所有子节点  
        for(var i=0; i<elemelem.length;i++){  
            //当前节点
            var e = elemelem[i];
            //文本、注释节点不被遍历，并判断其是否为直接父节点
            if(e.parentNode == elem && e.nodeType == 1){
                //把标签名添加到文本内容里
                t += e.tagName + ' ';               
                //循环子节点
                if(e.childNodes.length > 0){
                    t += '\n\t';        //子节点分隔符
                    t += text(e);       //递归还有子元素的子节点
                }
            }                  
        }  
        return t;           //返回得到的文本  
    }  
</script>

思路就是递归，但输出格式上还存在问题。