javascript入门实例四

最新推荐文章于 2023-07-10 23:28:03 发布

Rebirth_zhujl

最新推荐文章于 2023-07-10 23:28:03 发布

阅读量270

点赞数 1

分类专栏： java 文章标签： javascript

本文链接：https://blog.csdn.net/zjl16/article/details/50704170

版权

java 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

工具:eclipse

js处理DOM事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js处理DOM事件</title>
<script type="text/javascript">
    function modifyDOM() {
        alert("点我干啥")
    }
</script>
</head>
<body>
<input type="button" value="点我一下" onclick="modifyDOM()">
</body>
</html>

js操作DOM节点

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js操作DOM节点</title>
<script type="text/javascript">
    function modifyDOM(){
        document.getElementById("txt").innerHTML="用户名:";
        document.getElementById("user").value="jack";
    }
    function addDOM(){
        var param=document.createElement("p");
        var node=document.createTextNode("..前..");
        var param2=document.createElement("p");
        var node2=document.createTextNode("..后..");
        param.appendChild(node);
        param2.appendChild(node2);

        var x=document.getElementById("x");
        var y=document.getElementById("y");
        x.insertBefore(param, y);
        x.appendChild(node2);   
    }

    function delDOM() {
        var x=document.getElementById("x");
        var y=document.getElementById("y");
        x.removeChild(y);
    }
</script>
</head>
<body>
    <div id="x">
        <div id="y">
            <font id="txt"> :</font><input type="text" id="user" name="user" >
        </div>
    </div>
    <input type="button" value="修改DOM节点" onclick="modifyDOM()">
    <input type="button" value="添加DOM节点" onclick="addDOM()">
    <input type="button" value="删除DOM节点" onclick="delDOM()">
</body>
</html>

修改DOM节点样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js修改DOM节点样式</title>
    <script type="text/javascript">
        function modifyDOMCSS() {
            document.getElementById("boy").style.color="red";
        }
    </script>   
</head>
<body>
    <p id="boy"> 男程序猿</p>
    <input type="button"  value="修改DOM节点样式" onclick="modifyDOMCSS()">
</body>
</html>

Rebirth_zhujl

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript入门实例四

工具:eclipsejs处理DOM事件<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js处理DOM事件</title><script type="text/javascript"> function modifyDOM() { alert("点我干啥") }</script></head>
复制链接

扫一扫

专栏目录