html dom測試實例

原創

2020-02-22 00:25

爲了複習html的dom操作，特意寫了個簡單的測試實例，功能留待完善

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>html dom</title>
<script language="javascript" type="text/javascript">
<!--
    function append(){
        //創建元素
        var myElement=document.createElement("input");//寫希望創建的html元素標籤名
        myElement.type="button";
        myElement.value="我是button";
        myElement.id="id1";

        //給新的元素添加必要的信息
        //myElement.href="http://www.sina.com";
        //myElement.innerText="連接到sina";
        //myElement.style.left="20px";
        //myElement.style.top="50px"
        //myElement.style.position="absolute";
        //添加到document.body
        //document.body.appendChild(myElement);

        //將元素添加到div
        if($("div1")!=null)
        $("div1").appendChild(myElement);
    }
    function remove(){
        //刪除一個元素
        if($("id1")!=null)
        $("div1").removeChild($("id1"));
        
        //獲取父元素id
        //window.alert($("id1").parentNode.id);
    }
    function removeself(){
        var self = $("div1");
        //alert(document.getElementsByTagName("input").length);                       // 節點數
        
        alert(document.getElementsByTagName("input")[2].getAttribute("type"));     // 拿到元素屬性
        self.parentNode.removeChild(self); 
        var button = document.getElementsByTagName("input")[2];
        button.parentNode.removeChild(button);

    }

    //nodeName（節點名稱）
            /* 元素節點的 nodeName 是標籤名稱 
             * 屬性節點的 nodeName 是屬性名稱 
             * 文本節點的 nodeName 永遠是 #text 
             * 文檔節點的 nodeName 永遠是 #document 
             */
    //nodeValue（節點值） 
            /* 對於文本節點，nodeValue 屬性包含文本。
             * 對於屬性節點，nodeValue 屬性包含屬性值。
             * nodeValue 屬性對於文檔節點和元素節點是不可用的。
             */
    //nodeType（節點類型） 
            /* 元素 1 
             * 屬性 2 
             * 文本 3 
             * 註釋 8 
             * 文檔 9
             */
    function getNodeInfo(){
        alert($("div1").nodeName);
        alert($("div1").nodeValue);
        alert($("div1").nodeType);
    }

    function getNodeAttr(){

        var div = $("div1");
        div.innerHTML = "id=" + div.id + "<br/>";
        div.innerHTML += "class=" + div.className + "<br/>";
        div.innerHTML += "width=" + div.style.width + "&nbsp;&nbsp;" + "height=" + div.style.height + "<br/>";
        div.innerHTML += "border=" + div.style.border;
        alert("style=" + div.getAttribute("style"));    // 火狐取得style全部內容,IE下取出爲對象
        alert("style.width=" + div.getAttribute("style").width);    // 火狐下不適用
        alert(div.innerText || div.textContent);         // 兼容性操作
    }

    function getDocInfo(){
        document.write("標題:" + document.title+"<br/>")
        document.write("url:" + document.URL+"<br/>")
        document.write("錨的數目:"+document.anchors.length+"<br/>")
        document.write("文檔包含： " + document.forms.length + " 個表單。<br/>")
        document.write("本文檔包含：" + document.images.length + " 幅圖像。<br/>")

    }

    function whichButton(event){
        if (event.button==2)
        {
            alert("您點擊了鼠標右鍵！")
        }
        else
        {
            alert("您點擊了鼠標左鍵！")
        }

    }

    function show_coords(event){
        x = event.clientX;
        y = event.clientY;
        alert("X 座標: " + x + ", Y 座標: " + y);
    }

    function whichKey(event)
    {
        //alert(event.keyCode)
    }


    function $(id){
        return document.getElementById(id);
    }

    function $byNmae(name){
        return document.getElementsByName("div");
    }
//-->
</script>
</head>
<body onClick="whichKey(event)"> 

<input style="margin:left" type="button" value="動態創建元素" οnclick="append()"/>
<input  type="button" value="刪除一個元素" οnclick="remove()"/>
<input  type="button" value="刪除自身" οnclick="removeself()"/>
<input  type="button" value="獲取節點信息" οnclick="getNodeInfo()"/>
<input  type="button" value="獲取節點屬性" οnclick="getNodeAttr()"/>
<input  type="button" value="獲取文檔信息" οnclick="getDocInfo()"/>

<br/>
<div class="mydiv" id="div1" name="div" style="margin-top:30;width:200px;height:400px;border:1px solid red; float:left"></div>
<div οnmοusedοwn="whichButton(event)" class="mydiv" id="div2" name="div" style="margin-top:30;width:200px;height:400px;border:1px solid blue; float:left">
    <div align="center" style="margin:60px">點我</div>
</div>
<div οnmοusedοwn="show_coords(event)" class="mydiv" id="div2" name="div" style="margin-top:30;width:200px;height:400px;border:1px solid blue; float:left">
    <div align="center" style="margin:60px">取座標</div>
</div>

</body>
</html>