javascript(二）

Document对象的理解：

Document它管理了所有的HTML文档内容
document是一种树结构的文档。有层级关系
它让我们把所有的标签都对象化
我们可以通过document访问所有的标签对象

Document对象的几种方法：

getElementById()

返回对拥有指定id的第一个对象的引用

getElementByName()

返回带有指定名称的对象集合

getElementByTagName()

返回带有指定标签名的对象集合

正则表达式练习：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function fun(){
            var obj=document.getElementById("check");
            var str=obj.value;
            // 匹配由数字、字母和下划线组成并且长度为5-12个字符的字符串
            var patt=/^w{5,12}$/;
            if(patt.test(str)){
                alert("yes!");
            }
            else{
                alert("NO!");
            }
        }
    </script>
    </head>
    <body>
        <input type="text" id="check">
        <br>
        <button onclick="fun()">校验</button>
    </body>
</html>

检验用户输入是否合法

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function fun(){
            var obj=document.getElementById("check");
            var str=obj.value;
            // 匹配由数字、字母和下划线组成并且长度为5-12个字符的字符串

            var spanObj=document.getElementById("spanID");
            var patt=/^w{5,12}$/;
            if(patt.test(str)){
                //innerHTML表示取标签中的内容
                spanObj.innerHTML="用户名合法！";
            }
            else{
                spanObj.innerHTML="用户名不合法！";
            }
        }
    </script>
    </head>
    <body>
        <input type="text" id="check">
        <span style="color: red" id="spanID"></span>
        <br>
        <button onclick="fun()">校验</button>
    </body>
</html>

由笑脸哭脸代替文字：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function fun(){
            var obj=document.getElementById("check");
            var str=obj.value;
            // 匹配由数字、字母和下划线组成并且长度为5-12个字符的字符串

            var spanObj=document.getElementById("spanID");
            var patt=/^w{5,12}$/;
            if(patt.test(str)){
                //innerHTML表示取标签中的内容
                // spanObj.innerHTML="用户名合法！";
                spanObj.innerHTML="<img src="img/right.png" height=30 weight=30>";
            }
            else{
                spanObj.innerHTML="<img src="img/wrong.png" height=30 weight=30>";
            }
        }
    </script>
    </head>
    <body>
        <input type="text" id="check">
        <span style="color: red" id="spanID">
            
        </span>
        <br>
        <button onclick="fun()">校验</button>
    </body>
</html>

复选框的全选、全不选、反选练习

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <script type="text/javascript">
        function checkAll(){
            var hobbys=document.getElementsByName("hobby");
            for(var i=0;i<hobbys.length;i++){
                hobbys[i].checked=true;
            }
        }
        function checkNo(){
            var hobbys=document.getElementsByName("hobby");
            for(var i=0;i<hobbys.length;i++){
                hobbys[i].checked=0;
            }
        }       
        function checkReverse(){
            var hobbys=document.getElementsByName("hobby");
            for(var i=0;i<hobbys.length;i++){
                hobbys[i].checked=!hobbys[i].checked;
            }
        }
    </script>
    </head>
    <body>
        最喜欢的角色：
        <br>

        <input type="checkbox" name="hobby" value="雷泽">雷泽
        <input type="checkbox" name="hobby" value="班尼特">班尼特
        <input type="checkbox" name="hobby" value="迪卢克">迪卢克
        <br><br>
        <button onclick="checkAll()">全选</button>
        <button onclick="checkNo()">全不选</button>
        <button onclick="checkReverse()">反选</button>
        
    </body>
</html>

节点的常用属性和方法

通过具体的元素节点调用getElementsByTagName()方法，获取当前节点的指定标签名孩子节点
appendChild（oChildNode)方法，可以添加一个子节点，oChildNode是要添加的孩子节点
childNodes属性，获取当前节点的所有子节点
firstChild属性，获取当前节点的第一个子节点
lastChild属性，获取当前节点的最后一个子节点
parentNode属性，获取当前节点的父节点
nextSibling属性，获取当前节点的下一个节点
previousSibling属性，获取当前节点的上一个节点
className，用于获取或设置标签的class属性值
innerHTML属性，表示获取/设置起始标签和结束标签中的内容
innerText属性，表示获取/设置起始标签和结束标签中的文本。

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>create Element和appendChild的使用</title>
    <script type="text/javascript">
        window.onload=function(){
            var divObj=document.createElement("div");
            divObj.innerText="哈哈哈哈";
            document.body.appendChild(divObj);
        }
    </script>
    </head>
    <body>

    </body>
</html>