document对象
- Document对象中的方法介绍
- 节点的常用属性和方法
  - 方法
  - 属性

DOM是文档对象模型，把文档中的标签、属性、文本转换成为文档对象来管理。

document对象

Document对象中的方法介绍

getElementById方法的应用

需求：当用户输入用户名后点击校验按钮，需要获取用户输入的内容，判断是否只由下划线、美元符号、数字、字母组成。

 <script type="text/javascript">
    //      当用户输入用户名后点击校验按钮，需要获取用户输入的内容，
    //     判断是否只由下划线、美元符号、数字、字母组成,并且长度为5到12位。
    function onclickFun()
    {
        //第一步：需要获取文本框中的内容，因此需要获取这个标签的对象
      var usernameObj = document.getElementById("username");//这个就是DOM对象，因此也带有属性信息
      // alert(usernameObj.id);
      // alert(usernameObj.type);
      var usemaneText = usernameObj.value;//通过DOM对象，获得了文本框内容
      //下一步是验证字符串符合某个规则，这时需要使用正则表达式技术
      var patt = /^\w{5,12}$/;
      if(patt.test(usemaneText))
      {
        alert("用户名合法");
      }
      else
        {
          alert("用户名不合法");
        }
    }
  </script>
</head>
<body>
用户名：<input type="text" id="username" value="tan"/>
<button onclick="onclickFun()">校验</button>
</body>

优化1：

<script type="text/javascript">
  //      当用户输入用户名后点击校验按钮，需要获取用户输入的内容，
  //     判断是否只由下划线、美元符号、数字、字母组成,并且长度为5到12位。
  function onclickFun()
  {
    //第一步：需要获取文本框中的内容，因此需要获取这个标签的对象
    var usernameObj = document.getElementById("username");//这个就是DOM对象，因此也带有属性信息
    // alert(usernameObj.id);
    // alert(usernameObj.type);
    var usernameText = usernameObj.value;//通过DOM对象，获得了文本框内容
    var usernameSpanObj = document.getElementById("usernamespan");
    //下一步是验证字符串符合某个规则，这时需要使用正则表达式技术
    var patt = /^\w{5,12}$/;
    if(patt.test(usernameText))
    {
      usernameSpanObj.innerHTML="用户名合法";
    }
    else
    {
      usernameSpanObj.innerHTML="用户名不合法";
    }
  }
</script>
<body>
用户名：<input type="text" id="username" value=""/>
<span style="color: #6495ed" id = "usernamespan"> </span>
<button onclick="onclickFun()">校验</button>
</body>

效果：

正则表达式

 <script type="text/javascript">
    //定义格式：
    var pattern = new RegExp("");
    var pattern = / /;
    //第一种：表示判断是否包含某个字母
    var patt0 = new RegExp("e");
    var patt0 = /e/;
    //第二种：表示判断是否包含方括号中的任意字符
    var patt1 = /[abc]/;
    //第三种：表示判断是否不包含方括号中的任意字符
    var patt2 = /[^abc]/;
    //第四种：表示判断是否包含小写字母
    var patt3 = /[a-z]/;
    //第五种：表示判断大写
    var patt4 = /[A-Z]/;
    //第六种：表示判断是否包含任意数字
    var patt5 = /[0-9]/;
    //第七种：表示要求包含数字、字母、下划线
    var patt6 = /\w/;
  </script>

getElementsByName方法应用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>getElementsByName</title>
<!--  //第一步，为每个按钮绑定点击事件-->
  <script type="text/javascript">
    function checkAll()
    {
      var languageObj = document.getElementsByName("language");
      for (var i=0;i<languageObj.length;i++)
      {
        languageObj[i].checked=true;
      }
    }
    function checkNone()
    {
      var languageObj = document.getElementsByName("language");
      for (var i=0;i<languageObj.length;i++)
      {
        languageObj[i].checked=false;
      }
    }
    function checkReverse()
    {
      var languageObj =document.getElementsByName("language");
      for (var i=0;i<languageObj.length;i++)
      {
        if(languageObj[i].checked)
        {
          languageObj[i].checked=false;
        }
        else
        {
          languageObj[i].checked=true;
        }
      }
    }
  </script>
</head>
<body>
  勾上你掌握的语言：
  <input type="checkbox" name="language" value="java" >Java
  <input type="checkbox" name="language" value="cpp" >C++
  <input type="checkbox" name="language" value="js">JavaScript
  <br/>
  <button onclick="checkAll()">全选</button>
  <button onclick="checkNone()">全不选</button>
  <button onclick="checkReverse()">反选</button>
<br/>
</body>
</html>

当点击全选按钮时：

当点击全不选按钮时：

当点击反选按钮时：

getElementsByTagName方法应用

<script type="text/javascript">
  function checkAll()
  {
    var inputObj = document.getElementsByTagName("input");
    for (var i=0;i<inputObj.length;i++)
    {
      inputObj[i].checked=true;
    }
  }
  function checkNone()
  {
    var inputObj = document.getElementsByTagName("input");
    for (var i=0;i<inputObj.length;i++)
    {
      inputObj[i].checked=false;
    }
  }
  function checkReverse()
  {
    var inputObj = document.getElementsByTagName("input");
    for (var i=0;i<inputObj.length;i++)
    {
      if(inputObj[i].checked)
      {
        inputObj[i].checked=false;
      }
      else
      {
        inputObj[i].checked=true;
      }
    }
  }
</script>
<body>
勾上你掌握的语言：
<input type="checkbox"  value="java" >Java
<input type="checkbox"  value="cpp" >C++
<input type="checkbox"  value="js">JavaScript
<br/>
<button onclick="checkAll()">全选</button>
<button onclick="checkNone()">全不选</button>
<button onclick="checkReverse()">反选</button>
<br/>
</body>

与上一个方法效果一样。

补充createElement方法和appendChlid方法

 <script type="text/javascript">
              window.onload = function ()
              {
                //createElement方法用于创建标签，并显示在页面上
                var ElementObj = document.createElement("div");
                ElementObj.innerHTML="你好哇，黑颖虾";//等同于<div>你好哇，batman</div>,但还在内存中
                //第二步要把这个标签放在body标签中，等同于添加body标签的子标签
                document.body.appendChild(ElementObj);
              }
  </script>

也可以写成：

<script type="text/javascript">
              window.onload = function ()
              {
                //createElement方法用于创建标签，并显示在页面上
                var ElementObj = document.createElement("div");
                // ElementObj.innerHTML="你好哇，黑颖虾";//等同于<div>你好哇，batman</div>,但还在内存中
                //第二步要把这个标签放在body标签中，等同于添加body标签的子标签，同时文本标签也是div标签的子节点
                var TextNodeObj = document.createTextNode("你好哇，黑颖虾");
                ElementObj.appendChild(TextNodeObj);
                document.body.appendChild(ElementObj);
              }
  </script>

效果一样。

节点的常用属性和方法

标签是节点的一种，是我们的重点研究对象

方法

getElementByTagName(){}

获得当前节点的指定标签名的孩子节点

appendChild(oChildNode)

添加一个子节点，oChildNode就是要添加的孩子节点

JavaWeb

DOM模型