html dom测试实例

最新推荐文章于 2022-03-21 16:15:27 发布

又见水出处

最新推荐文章于 2022-03-21 16:15:27 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： html dom javascript js

本文链接：https://blog.youkuaiyun.com/cy524563/article/details/41629193

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文是作者为了复习HTML DOM操作而创建的一个简单测试实例，目前功能还在完善阶段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了复习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="动态创建元素" onclick="append()"/>
<input  type="button" value="删除一个元素" onclick="remove()"/>
<input  type="button" value="删除自身" onclick="removeself()"/>
<input  type="button" value="获取节点信息" onclick="getNodeInfo()"/>
<input  type="button" value="获取节点属性" onclick="getNodeAttr()"/>
<input  type="button" value="获取文档信息" onclick="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 onmousedown="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 onmousedown="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>