3.document

1.getElementByid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*
        当用户点击校验按钮，需要获取输出框中的内容，然后验证其是否合法
        验证的规则是：必须由字母、下划线、数字组合的5到12位
         */
        function onclickfun() {
            //1.获取输入框的内容（当操作一个标签的时候，一定要先获取该标签对象）
            var usernameobject = document.getElementById("username");
            var usernameText = usernameobject.value;
            //如何验证 字符串符合某个规则，需要使用正则表达式
            var patt=/^\w{5,12}$/
            /*
             getElementById方法只返回对应id值的的第一个对象
            test()方法用来测试某个字符串，是否匹配规定规则
            匹配就返回true，不匹配返回false
            innerHTML 属性 表示起始标签和结束标签的内容，该属性可读可写
             */
            var userspan = document.getElementById("userspan");
            userspan.innerHTML ="javascript";
            if(patt.test(usernameText)){
                userspan.innerHTML ="用户名合法";
            }
            else{
                userspan.innerHTML ="用户名不合法";
            }
       }
    </script>
</head>
<body>
用户名：<input type="text" id="username" /></br>
      <span style="color: #ff0000" id="userspan"></span>
    <button onclick="onclickfun();">校验</button>
</body>
</html>

2.正则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*//表示要求的字符串中，是否包含字母e
        //方式一：var patt = new RegExp("e");
        //方式二：
        var patt = /e/;
        alert(patt);//  显示结果 /e/
        var str = "abcd";
        alert(patt.test(str));//false
         */
        var patt = /[abc]/;//表示校验的字符串中，是否包含a或b或c
        var patt2= /[a-z]/;//表示校验的字符串中，是否包含小写字母
        var patt3= /[0-9]/;//表示校验的字符串中，是否包含数字
        /*
         \w 元字符：表示单词字符包含：a-z、A-Z、0-9、以及下划线、包含_(下划线)字符
         \W 非单词字符
         n+(例如：a+) 表示字符串中至少包含一个n(a)
         n*、n？  表示字符串中是否包含0个 或 多个n
         n{X}    表是字符串是否包含连续X个n
         n{X,Y}  表示字符串最少包含X个n，最多包含Y个n
         一般应用 ： ^n{X,Y}$  表示从头到尾全匹配
         n{X,}  表示字符串最少包含X个n
         n$   表示字符串是否以n结尾
         ^n   表示字符串是否以n开头

        */
    </script>
</head>
<body>

</body>
</html>

3.getElementsByName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
           document.getElementsByName(): 是根据指定的name属性查询返回多个标签对象集合，
                                         该集合的操作和数组一样，集合中每个元素都是dom对象
           checked表示复选框的选中状态，如果选中为true，不选中为false
         */
        function checkAll() {
            var hobbies = document.getElementsByName("hobby");
            for(var i =0;i<hobbies.length;i++){
                hobbies[i].checked = true;
            }
        }
        function checknone() {
            var hobbies = document.getElementsByName("hobby");
            for(var i =0;i<hobbies.length;i++){
                hobbies[i].checked = false;
            }
        }
        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");
            // 方式一： hobbies[i].checked = !hobbies[i].checked;
            for(var i =0;i<hobbies.length;i++){
                if(hobbies[i].checked){
                    hobbies[i].checked = false;
                }else{
                    hobbies[i].checked = true;
                }
            }
        }
    </script>
</head>
<body>
  喜爱课程:
  <input type="checkbox" name="hobby" value="java"/>java
  <input type="checkbox" name="hobby" value="javaweb"/>javaweb
  <input type="checkbox" name="hobby" value="oracle"/>oracle
<br/>
<button onclick="checkAll();">全选</button>
<button onclick="checknone();">全不选</button>
<button onclick="checkReverse();">反选</button>
</body>
</html>

4.getElementsByTagName

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
           document.getElementsByTagName(): 是按照指定标签名来指定查询并返回集合
                                            该集合的操作跟数组一样，集合中都是dom对象

         */
        function checkAll() {
            var inputs = document.getElementsByTagName("input");
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked = true;
            }

        }
        
    </script>
</head>
<body>
喜爱课程:
<input type="checkbox"  value="java"/>java
<input type="checkbox"  value="javaweb"/>javaweb
<input type="checkbox"  value="oracle"/>oracle
<br/>
<button onclick="checkAll();">全选</button>

<!--节点的常用属性和方法
节点就是标签对象

方法：
通过具体的元素节点调用：getElementsTagName() :获取当前节点的之地那个标签名孩子节点
                   appendChildNode(ochildnode):可以添加一个子节点，ochildnode是要添加的孩子节点
属性
childNodes ：获取当前节点的所有子节点
firstChild ：获取当前节点的第一个子节点
lastChild ：获取当前节点的最后一个子节点
parentNode：获取当前节点的父节点
nextSibling ：获取当前节点的下一个节点
previewSibling ：获取当前节点的上一个节点
className : 用于获取/设置标签的class属性值
innerHtml： 获取/设置起始标签和结束标签中的内容
innerText： 获取/设置起始标签和结束标签中的文本



-->

</body>
</html>

5.createElement

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload= function () {
            //需要js代码来创建html标签，并创建在页面上
            //标签内容是<div>javaScript</div>
            var htmlDivElement = document.createElement("div");//在内存中 <div></div>
            htmlDivElement.innerHTML="javaScript";//在内存中 <div>javascript</div>

            //div需要在body标签内，给body添加子元素
            document.body.appendChild(htmlDivElement);
        }

    </script>
</head>
<body>
</body>
</html>

 

posted @ 2021-08-09 08:31  孫sun  阅读(55)  评论(0)    收藏  举报