20180302DOM通过节点关系获取元素 表单元素 下拉列表 网页换肤 操作表格 问候

DOM通过节点关系获取元素：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作2-通过节点关系获取元素</title>
<style>
    #n4{
        color: red;
    }
    </style>
    <script type="text/javascript">
        //第一种方法
//        function fu(){
//            var f=document.getElementById("n4").parentNode.innerHTML;
//            alert(f);
//        }
//        function first(){
//            var first=document.getElementById("n4").parentNode.firstChild.nextSibling.innerHTML;
//            alert(first);
//        }
//        function forward(){
//            var f=document.getElementById("n4").previousSibling.previousSibling.innerHTML;
//            alert(f);
//        }
//        function next(){
//            var n=document.getElementById("n4").nextSibling.nextSibling.innerHTML;
//            alert(n);
//        }
//        function last(){
//            var l=document.getElementById("n4").parentNode.lastChild.previousSibling.innerHTML;
//            alert(l);
//        }
//        function num(){
//            var num=document.getElementsByTagName("li").length;
//            alert(num);
//        }
//        第二种方法
        function show(curr){
            alert(curr.innerHTML);
        }
    </script>
</head>

<body>
<ul type="square" id="m">
    <li id="n1">张三</li>
    <li id="n2">李四</li>
    <li id="n3">王五</li>
    <li id="n4">赵六</li>
    <li id="n5">小红</li>
    <li id="n6">小明</li>
</ul>
<!--
<input type="button" value="父节点" onClick="fu()">
<input type="button" value="第一个子节点" onClick="first()">
<input type="button" value="上一个子节点" onClick="forward()">
<input type="button" value="下一个子节点" onClick="next()">
<input type="button" value="最后一个子节点" onClick="last()">
<input type="button" value="得到所有li元素的个数" onClick="num()">
-->
<input type="button" value="父节点" onClick="show(document.getElementById('n4').parentNode)">
<input type="button" value="第一个子节点" onClick="show(document.getElementById('n4').parentNode.firstChild.nextSibling)">
<input type="button" value="上一个子节点" onClick="show(document.getElementById('n4').previousSibling.previousSibling)">
<input type="button" value="下一个子节点" onClick="show(document.getElementById('n4').nextSibling.nextSibling)">
<input type="button" value="最后一个子节点" onClick="show(document.getElementById('n4').parentNode.lastChild.previousSibling)">
</body>
</html>

网页换肤：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>网页换肤功能</title>
<script>    
    function changey(){
        document.getElementById("b").style.backgroundColor="yellow";
        
    }
        function changer(){
        document.getElementById("b").style.backgroundColor="red";
        
    }
        function c(){
        document.getElementById("b").style.backgroundColor="blue";
        
    }
        function d(){
        document.getElementById("b").style.backgroundColor="black";
        
    }
    function e(){
        document.getElementById("b").style.backgroundColor="green";
        
    }
//    第二种方法
    function change(color){
        document.getElementById("b").style.backgroundColor=color;
    }
    </script>
</head>

<body id="b" >
<!--
<input type="button" value="黄色" onClick="changey()">
<input type="button" value="红蓝" onClick="changer()">
<input type="button" value="蓝色" onClick="c()">
<input type="button" value="黑色" onClick="d()">
<input type="button" value="绿色" onClick="e()">
-->
<input type="button" value="黄色" onClick="change('yellow')">
<input type="button" value="红蓝" onClick="change('red')">
<input type="button" value="蓝色" onClick="c('blue')">
<input type="button" value="黑色" onClick="d('black')">
<input type="button" value="绿色" onClick="e('green')">

</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作表单元素</title>
<script type="text/javascript">
    function show(curr){
        alert(curr.value);
    }
    function mysubmit(){
        document.getElementById('myform').submit();
    }
        function myreset(){
        document.getElementById('myform').reset();
    }
    </script>
</head>

<body>
<form id="myform" action="https://www.baidu.com/" method="get" target="_blank">
    <input type="text" value="张三" name="t1"><br>
    <input type="text" value="123" id="t2" name="t2"><br>
    <select name="s" id="s" >
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
        </select><br>
        <input type="button" value="获取表单内第一个控件" onClick="show(document.getElementById('myform').elements[0])">
        <input type="button" value="获取表单内第二个控件" onClick="show(document.getElementById('myform').elements['t2'])">
        <input type="button" value="获取表单内第三个控件" onClick="show(document.getElementById('myform').s)">
        <input type="button" value="操作表单" onClick="myreset()">
    
    
</form>
</body>
</html>

DOM下拉列表：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作下拉列表</title>

</head>

<body>
<form action="">
<select name="" id="s" size="5">
<option value=" beijing">北京</option>
<option value="shanghai" selected>上海</option>
<option value="tianjin">天津</option>
<option value="nanjing">南京</option>
<option value="shenzhen">深圳</option>
<option value="wuhan">武汉</option>
</select><br>
<input type="button" value="第一个城市" onClick="show(se.options[0])">
<input type="button" value="上一个城市" onClick="show(se.options[se.selectedIndex-1])">
<input type="button" value="下一个城市" onClick="show(se.options[se.selectedIndex+1])">
<input type="button" value="最后一个城市" onClick="show(se.options[se.length-1])">
</form>
<script>
    var se=document.getElementById("s");
    function show(curr){
        alert(curr.text);
    }
    </script>
</body>
</html>

DOM操作表格：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作表格</title>
</head>

<body>
<table border="1px" id="t">
    <caption>甲骨文课程表</caption>
        <tr>
            <td>HTML</td>
            <td>JAVASCRIPT</td>
        </tr>
        <tr>
            <td>JAVASE</td>
            <td>ORACLE</td>
        </tr>
        <tr>
            <td>MYSQL</td>
            <td>STRUTS2</td>
        </tr>
        </table>
        <br>
        <input type="button" value="表格标题" onClick="show(t2.caption)">
        <input type="button" value="第一行，第一格" onClick="show(t2.rows[0].cells[0])">
        <input type="button" value="第二行，第二格"
        onClick="show(t2.rows[1].cells[1])">
        <input type="button" value="第三行，第二格"
        onClick="show(t2.rows[2].cells[1])"><br>
        设置指定单元格的值：第<input type="text" id="i1">行，
        第<input type="text" id="i2">列的值为
        <input type="text" id="i3">
        <input type="button" value="修改" onClick="update()">
    <script type="text/javascript">
      var t2=document.getElementById("t");
        function show(curr){
            alert(curr.innerHTML);
        }
        function update(){
            var a=document.getElementById("i1").value;
            var b=document.getElementById("i2").value;
            var c=document.getElementById("i3").value;
            t2.rows[a-1].cells[b-1].innerHTML=c;
        }
    </script>
    

</body>
</html>

问候：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>问候</title>
</head>
<script type="text/javascript">
    function hello(){
        var t1=document.getElementById("name").value;
        var o=document.getElementById("s").value;
        if(t1!==""){
            var reg=/[A-z]/;//创建正则表达式并定制规则
            var res=reg.test(t1);//判断t1是否满足规则
            if(res==true){
                switch(o){
                case "sex":
                    alert(t1+"，您好!");
                    break;
                case"nan":
                    alert(t1+"先生，您好!");
                    break;
                case "nv":
                    alert(t1+"女士，您好!");
                    break;
                default:
                    alert("错误数据");
            }
        }else{
            alert("必须输入姓名才能问候!");
        }
    }
    </script>

<body>
<form action="">
<input type="text" placeholder="姓名" id="name"><br>
<select name="" id="s">
    <option value="sex">性别</option>
    <option value="nv">女</option>
    <option value="nan">男</option>
</select><br>
<input type="button" value="问候" onClick="hello()">
</form>
</body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wangnatian/p/8507204.html