JavaScript——document对象

最新推荐文章于 2024-02-02 10:42:50 发布

Pureso

最新推荐文章于 2024-02-02 10:42:50 发布

阅读量130

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/zhongshun0928/article/details/115365062

版权

JavaWeb 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

getElementById

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script type="text/javascript">
   /*
   * 当用户点击了校验按钮要获取输入框里的内容，验证其是否合法
   * 需要验证的规则是：必须由字母，数字，下划线组成，并且长度是5-12位
   * */
   function onclickFun() {
     //当我们要操作一个标签的时候，一定要获取这个标签对象
     var usernameObj=document.getElementById("username");
     //alert(usernameObj);   //[object HTMLInputElement]
     //[object HTMLInputElement] 就是dom对象
     var usernamText=usernameObj.value;
     //如何验证字符串符合某个规则，需要用到正则表达式
     var patt=/^\w{5,12}$/;

     //test()方法用于测试某个字符串是否匹配我的规则

     var usernameSpanObj=document.getElementById("usernameSpan");
     //innerHTML 表示起始标签和结束标签中的内容
     //innerHTML 这个属性可读可写
     //alert(usernameSpanObj.innerHTML);

     if(patt.test(usernamText)){
       // alert("用户名合法");
       // usernameSpanObj.innerHTML="用户名合法";
       usernameSpanObj.innerHTML="<img src=\"right.png\" width=\"18\" height=\"18\"/>";
     }else{
       // alert("用户名不合法");
       // usernameSpanObj.innerHTML="用户名不合法";
        usernameSpanObj.innerHTML="<img src=\"wrong.png\" width=\"18\" height=\"18\"/>";

     }

   }

 </script>
</head>
<body>
用户名：<input id="username" type="text" value="Link"/>
<span id="usernameSpan" style="color: red">

</span>
<button onclick="onclickFun()">校验</button>
</body>
</html>

getElementsByName

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    //全选
    function checkAll(){
      //让所有复选框都选中
      //document.getElementsByName();是根据指定的 name 属性查询返回多个标签对象集合
      //这个集合的操作和数组一样
      //集合中每个元素都是dom对象
      var hobbies=document.getElementsByName("hobby");
      //checked表示复选框的选中状态，如果选中是true，反之false
      //checked 可读可写
      for(var i=0;i<hobbies.length;i++)
        hobbies[i].checked=true;
    }
    //全不选
     function checkNo(){
       var hobbies=document.getElementsByName("hobby");
       for(var i=0;i<hobbies.length;i++)
         hobbies[i].checked=false;
    }
    //反选
     function checkReverse(){
       var hobbies=document.getElementsByName("hobby");
       for(var i=0;i<hobbies.length;i++)
         hobbies[i].checked=!hobbies[i].checked;

         // if(hobbies[i].checked)
         //   hobbies[i].checked=false;
         // else
         //   hobbies[i].checked=true;
    }

  </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="Java" checked="checked">Java
<input type="checkbox" name="hobby" value="Python">Python
<input type="checkbox" name="hobby" value="C++">C++
<br>
<button onclick="checkAll()">全选</button>
<button onclick="checkNo()">全不选</button>
<button onclick="checkReverse()">反选</button>

</body>
</html>

getElementsByTagName

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    //全选
    function checkAll(){
      //document.getElementsByTagName("input");是按照指定标签名进行查询并返回集合
      //集合中都是dom对象
      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" checked="checked">Java
<input type="checkbox" value="Python">Python
<input type="checkbox" value="C++">C++
<br>
<button onclick="checkAll()">全选</button>


</body>
</html>

createElement

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">

    window.onload=function () {
      //现在需要我们使用js代码来创建html标签，并显示在页面上
      //标签的内容是：<div>Link</div>
      var divObj=document.createElement("div");//在内存中<div></div>

      var textObj=document.createTextNode("Link");

      divObj.appendChild(textObj);

      // divObj.innerHTML="Link";//<div>Link</div> 还是只在内存中
      //添加子元素
      document.body.appendChild(divObj);
    }

  </script>
</head>
<body>

</body>
</html>