Day71 JavaScript补充

1.思维导图

2.代码部分

XML DOM：Node对象

需求：给父div中添加一个子div，子div中的内容为”你好世界”；移除父div中指定的子元素

<head>
    <title>Node对象</title>
    <script>

        function fn1() {
            //1,获取父div
            var parentDiv = document.getElementById("parentDiv");
            //2,给父div添加一个子div
            //2.1,创建子div元素对象
            var childDiv = document.createElement("div");
            //2.2,创建文本节点，内容为:”学好java”
            var textNode = document.createTextNode("你好世界");
            //2.3,创建属性节点，属性名为id，值为childDiv
            childDiv.setAttribute("id","childDiv");
            //2.4,父div 包含  子div ；子div 包含 ”学好java”
            childDiv.appendChild(textNode);
            parentDiv.appendChild(childDiv);

        }
        
        function fn2() {
            //1,获取父div
            var parentDiv = document.getElementById("parentDiv");
            //2,获取子div
            var childDiv = document.getElementById("childDiv");
            //2，移除childDiv元素
            parentDiv.removeChild(childDiv);
        }

    </script>
</head>
<body>

<div id="parentDiv">
    父div
</div>
    <button onclick="fn1()">添加</button>
    <button onclick="fn2()">删除</button>
</body>

Xml DOM案例

需求：在id为"xda1"的子div的父div中添加其他的子div、获取父div中的子元素的类型、移除父div中的第一个子div、移除父div中的最后一个子div

<body>
    <div >
        <div id="xda1">子div1</div>
    </div>
    <button onclick="fn1()">添加</button>
</body>

        function fn1() {
            var childDiv = document.getElementById("xda1");
            //获取父div
            var parentDiv = childDiv.parentNode;
            //创建子div
            var childDiv2 = document.createElement("div");
            var textNode = document.createTextNode("hello xmldom");
            childDiv2.appendChild(textNode);

            parentDiv.appendChild(childDiv2);
        }

<div id="parent">
    这是一个div
    <div>这是一个div2</div>
</div>
        function fn1() {
            var parent = document.getElementById("parent");
            var childNodes = parent.childNodes;
            for (var i = 0; i < childNodes.length; i++) {
                var childNode = childNodes[i];
                console.log(childNode.nodeName+","+childNode.nodeType);
            }
        }

function fn2() {
    //获取父div
    var parentDiv = document.getElementsByTagName("div")[0];
    //获取所有子节点  ： 有元素节点、文本节点
    // var childNodes = parentDiv.childNodes;
    // console.log(childNodes.length)
    var childDivs = parentDiv.getElementsByTagName("div");
    var firstDiv = childDivs[0];
    console.log(firstDiv);
    if (undefined != firstDiv) {
        parentDiv.removeChild(firstDiv);
    }
}

function fn3() {
    var parentDiv = document.getElementsByTagName("div")[0];
    //获取所有子节点  ： 有元素节点、文本节点
    // var childNodes = parentDiv.childNodes;
    // console.log(childNodes.length)
    var childDivs = parentDiv.getElementsByTagName("div");
    var lastDiv = childDivs[childDivs.length-1];
    if (undefined != lastDiv) {
        parentDiv.removeChild(lastDiv);
    }
}

Html DOM

innerHTML、innerText

<head>
    <title>innerHTML、innerText</title>
    <script>

        function fn1() {

            var div = document.getElementById("parent");
            //Xml DOM
            // var text = document.createTextNode("你好世界");
            // div.appendChild(text);

            //Html DOM
            innerHTML、innerText：设置/获取标签内容
                 div.innerHTML = "<font color='red'>你好世界!!</font>";
                 div.innerText = "<font color='red'>你好世界!!</font>";
                console.log(div.innerHTML)
                console.log(div.innerText)
        }
    </script>
</head>
<body>

<div id="parent">
    parent parent parent
</div>
    <button onclick="fn1()">添加</button>
</body>

操作html标签：动态获取文本输入框中的内容

<head>
    <title>操作标签</title>    
        <script>
            function fn1() {           
             console.log("内容发生改变.");           
             var ele = document.getElementsByName("username")[0];                    
             console.log(ele.value);            
            //Html DOM中有一个Text对象:value属性：获取/设置value属性值           
            ele.value = "helloworld";        }    
        </script>
</head>
<body>
    <input type="text" name="username" onchange="fn1()"/>
</body>

操作html样式：修改div元素的边框、宽度、内容字体大小

<head>
    <title>Html DOM操作样式</title>
    <style>
        div{
            background-color: deepskyblue;
        }
    </style>
    <script>
        // 修改div元素的边框、宽度、内容字体大小.
        function fn1() {
            var div = document.getElementById("div");
            div.style.border="10px solid green";
            div.style.width = "200px";
            div.style.fontSize = "50px";
        }

    </script>
</head>
<body>

<div id="div">
    这是一个div
</div>
    <button onclick="fn1()">修改</button>
</body>

Javascript

综合案例一
需求：得到select下的所有的option中的文本信息

  　　　 //Xml DOM
 　　　　function fn1() {
            var select = document.getElementById("sel");
            var childNodes = select.childNodes;
            for (var i = 0; i < childNodes.length; i++) {
                //既可以是换行符(3)，也可以是option元素(1)
                var childNode = childNodes[i];
                if (childNode.nodeType == 1) {
                    //就是一个option元素
                    //获取"小学"...节点对象
                    var textNode = childNode.firstChild;
                    //获取节点值
                    var nodeValue = textNode.nodeValue;
                    console.log(nodeValue);
                }
            }
        } 
 　　　　//Html DOM
        function fn2() {
            //获取select对象
            var select = document.getElementById("sel");
            //获取所有option
            var options = select.options;
            for (var i = 0; i < options.length; i++) {
                //获取每一个option对象
                var option = options[i];
                console.log("text : " + option.text + " , value : "+ option.value);
            }
        }

<select id="sel">
    <option value="xx">小学</option>
    <option value="cz">初中</option>
    <option value="gz">高中</option>
    <option value="dx">大学</option>
</select><br>
<button onclick="fn1()">获取1</button><br>
<button onclick="fn2()">获取2</button><br>

综合案例二
需求：得到select下的选中的option中的文本信息和value属性的值

<head>
    <title>综合案例二</title>
    <script>
        function fn1() {
            //获取selec选中的option中的value属性值及文本内容
            var select = document.getElementById("sel");
            //获取到被选中的选项的索引
            var selectedIndex = select.selectedIndex;
            //获取所有option数组
            var options = select.options;
            //通过数组、索引获取对应option对象
            var option = options[selectedIndex];
            var text = option.text;
            var value = option.value;
            console.log("text : " + text + " , value : " + value);
        }
    </script>
</head>
<body>
<select id="sel" onchange="fn1()">
    <option value="xx">小学</option>
    <option value="cz">初中</option>
    <option value="gz">高中</option>
    <option value="dx">大学</option>
</select>
</body>

综合案例三
需求：在select下增加一个选项"硕士"

 <script>
        //Xml DOM
        function fn1() {
            var select = document.getElementById("sel");
            //创建一个option对象
            var option = document.createElement("option");
            option.setAttribute("value","ss");
            var text = document.createTextNode("硕士");
            option.appendChild(text);
            select.appendChild(option);
        }


        //Html DOM
        function fn2() {
            var select = document.getElementById("sel");
            var option = document.createElement("option");
            option.text = "博士";
            option.value = "bs";
            select.add(option);
        }
    </script>

综合案例四
需求：
- 当选择全选/全不选时，下面的四个爱好，都会与我们全选/全不选一样
- 当选择全选按钮时，要求四个爱好项全都选择
- 当选择全不选按钮时，要求四个爱好项全都不选择
- 当选择反选时，要求四个爱好项，选择的取消，没有选择的选中

<head>
    <title>综合案例四</title>
    <script>
        function selectAll() {
            var hobbys = document.getElementsByClassName("hobbys");
            var all = document.getElementById("all");
            for (var i = 0; i < hobbys.length; i++) {
                var hobby = hobbys[i];
                //将每个爱好的多选框的选中状态，应该设置和
                hobby.checked = all.checked;
            }
        }

        /**
         * 全选
         */
        function fn1() {
            //全选 : 让所有多选框选中
            //获取所有的多选框
            var hobbys = document.getElementsByClassName("hobbys");
            for (var i = 0; i < hobbys.length; i++) {
                console.log("设置~~~")
                //获取每一个多选框
                var hobby = hobbys[i];
                //让多选框选中
                if (!hobby.checked) {
                    hobby.checked = true;
                }
            }
        }

        /**
         * 全不选
         */
        function fn2() {
            //全不选
            var hobbys = document.getElementsByClassName("hobbys");
            for (var i = 0; i < hobbys.length; i++) {
                var hobby = hobbys[i];
                if (hobby.checked) {
                    hobby.checked = false;
                }
            }
        }
        function fn3() {
            //反选
            var hobbys = document.getElementsByClassName("hobbys");
            for (var i = 0; i < hobbys.length; i++) {
                var hobby = hobbys[i];
                //获取之前的选中状态
                var oldChecked = hobby.checked;
                //取反获取新的选中状态
                var newChecked = !oldChecked;
                hobby.checked = newChecked;
            }
        }
    </script>
</head>
<body>
    <input type="checkbox" onchange="selectAll()" id="all"/>全选/全不选
    <br>
    <br>
    <input type="checkbox" class="hobbys"/>篮球
    <input type="checkbox" class="hobbys"/> 足球
    <input type="checkbox" class="hobbys"/>乒乓球
    <input type="checkbox" class="hobbys">排球
    <br>
    <br>
    <button onclick="fn1()">全选</button>  <button onclick="fn2()">全不选</button>  <button onclick="fn3()">反选</button>
</body>

综合案例五
需求：所有内容不可以为空、邮箱必须邮箱的规则、用户名与密码长度必须6位以上、密码与重复密码必须一致

<head>
    <title>综合案例五</title>

    <script>

        /**
         * 校验表单
         */
        function checkInfo() {


            return
                checkNull("username") &&
                checkNull("password") &&
                checkNull("repassword") &&
                checkNull("email");
        }

        /**
         * 清除之前的错误提示
         */
        function clearSpan() {
            var spans = document.getElementsByTagName("span");
            for (var i = 0; i < spans.length; i++) {
                var span = spans[i];
                span.innerHTML = "";
            }
        }

        function checkNull(id) {
            //非空校验
            var reg =/^\s*$/
            var username = document.getElementById(id);
            //获取输入框中内容
            var value = username.value;
            console.log(reg.test(value));
            if (reg.test(value)) {
                //输入框是空的
                var span = document.getElementById(id+"_error");
                span.innerHTML = "<font color='red'>"+ id +"不能为空</font>";
                return false;
            } else {
                //输入框有内容
                return true;
            }
        }

    </script>
</head>
<body>


<form action="index.jsp" onsubmit="return checkInfo()">
    <table border="1px" width="500px" height="200px" cellspacing="0px">
        <tr>
            <th colspan="3">用户注册</th>
        </tr>
        <tr>
            <td>
                账户:
            </td>
            <td align="center">
                <input type="text" name="username" id="username"/>
            </td>
            <td width="180px">
                <span id="username_error"></span>
            </td>
        </tr>
        <tr>
            <td>
                密码:
            </td>
            <td align="center">
                <input type="text" name="password" id="password"/>
            </td>
            <td width="180px">
                <span id="password_error"></span>
            </td>
        </tr>

        <tr>
            <td>
                确认密码:
            </td>
            <td align="center">
                <input type="text" name="repassword" id="repassword"/>
            </td>
            <td width="180px">
                <span id="repassword_error"></span>
            </td>
        </tr>

        <tr>
            <td>
                邮箱:
            </td>
            <td align="center">
                <input type="text" name="emial" id="email"/>
            </td>
            <td width="180px">
                <span id="email_error"></span>
            </td>
        </tr>
        <tr align="center">
            <td colspan="3">
                <button type="submit">注册</button>
            </td>
        </tr>

    </table>

</form>

//校验账户和密码长度
function checkLength(fieldName) {
    var ele = document.getElementsByName(fieldName)[0];
    if(/^.{6,}$/.test(ele.value)){
        return true;
    }else {
        var spanEle = document.getElementById(fieldName+"_msg");
        spanEle.innerHTML="<font color='red'>"+fieldName+"长度不对</font>";
        return false;
    }
}

//校验邮箱格式
function checkEmail() {
    var ele = document.getElementsByName("email")[0];
    if(/^(\w)+@(\w)+(.\w+)+$/.test(ele.value)){
        return true;
    }else {
        let span = document.getElementById("email_msg");
        span.innerHTML = "<font color='red'>邮箱格式不对!</font>";
        return false;
    }
}

//校验密码是否一致
function checkPassword(){
    var ele1 = document.getElementsByName("password")[0];
    var ele2 = document.getElementsByName("repassword")[0];
    if(ele1.value == ele2.value){
        return true;
    } else {
        var span = document.getElementById("repassword_msg");
        span.innerHTML = "<font color='red'>密码不一致!</font>";
        return false;
    }
}

posted @ 2020-05-12 22:55 Her4c 阅读(129) 评论(0) 收藏举报

刷新页面返回顶部

Her4c

人生何处不青山.

Day71 JavaScript补充

1.思维导图

2.代码部分

XML DOM：Node对象

Xml DOM案例

Html DOM

Javascript

公告