javascript入门实例四

来源：互联网发布：mysql循环语句 for 编辑：程序博客网时间：2024/04/26 07:15

工具: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>

1 0