其他分享
首页 > 其他分享> > 06 DOM模型

06 DOM模型

作者：互联网

一、Document 对象（*****重点）


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

那么 html 标签 要 对象化 怎么办？

二、Document 对象中的方法介绍（*****重点）

document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值

document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值

document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName)
方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签

document.getElementById(elementId)示例代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    /*需求：当用户点击了校验按钮，要获取输出框中的内容。然后验证其是否合法。
 * 验证的规则是：必须由字母，数字。下划线组成。并且长度是 5 到 12 位。*/
    function onclickfun(){
        //1.当我们要操作一个标签的时候，一定要先获取这个标签对象
        var usernameobj = document.getElementById("username");
        //获取文本框对应的文本内容
        var usernameText = usernameobj.value;
        //如何验证字符串，符合某个规则，需要使用正则表达式
        var patt = /^w{5,12}$/;
        /*
         *
         * test()方法用于测试某个字符串，是不是匹配我的规则
         * 匹配就返回true，不匹配就返回false
         * */

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

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

      }
    }

  </script>

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

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

document.getElementsByName(elementName)示例代码：

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

    //全选
    function checkAll(){
        //document.getElementsByTagName("input");是按照指定标签名来进行查询并返回集合
        //并且集合的操作和数组一样
        //集合中都是domduix
        //集合中元素顺序 是他们在html页面中从上到下的顺序
        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="c">c
          <input type="checkbox"  value="js">js<br/>

    <button onclick="checkAll()">全选</button>

</body>
</html>

document.getElementsByTagName(tagname)示例代码：

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

    //全选
    function checkAll(){
      //让所有复选框都选上
      //document.getElementsByName();是根据 指定的name属性查询返回多个标签对象
      //这个集合的操作和数组一样
      //集合中每个元素都是dom对象
      //这个集合的元素顺序是他们在html页面中从上到下的顺序
        var hobbies = document.getElementsByName("hobby");
        for (var i = 0; i < hobbies.length; i++) {
          //checked 表示复选框的选中状态，如果选中是true，不选中是false
          //checked 这个属性可读可写
              hobbies[i].checked = true;
      }
    }


    }

  </script>
</head>
<body>
  兴趣爱好：<input type="checkbox" name="hobby" value="java" checked="checked">java
          <input type="checkbox" name="hobby" value="c">c
          <input type="checkbox" name="hobby" value="js">js<br/>

    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

注：
document 对象的三个查询方法，如果有 id 属性，优先使用 getElementById 方法来进行查询
如果没有 id 属性，则优先使用 getElementsByName 方法来进行查询
如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName
以上三个方法，一定要在页面加载完成之后执行，才能查询到标签对象

三、正则表达式

菜鸟教程 js正则表达式

JavaScript 正则表达式 | 菜鸟教程 (runoob.com)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    //表示字符串中是否包含e
    //var patt = new RegExp("e");
    //var patt = /e/; //也是正则表达式对象

    //表示字符串中，是否包含a或b或c
    //var patt = /[abc]/;

    //表示字符串，是否包含小写字母
    //var patt = /[a-z]/;

    //表示字符串，是否包含大写字母
    //var patt = /[A-Z]/;

    //表示字符串，是否包含数字
    //var patt = /[0-9]/;

    //表示字符串，是否包含字母、数字、下划线
    //var patt = /\w/;

    //表示字符串,是否包含至少一个a
    //var patt = /a+/;

    //表示字符串,是否*包含*零个 或 多个a
    //var patt = /a*/;

    //表示字符串,是否*包含*一个 或 零个a
    //var patt = /a?/;

    //表示字符串,是否包含连续3个a
    //var patt = /a{3}/;

    //表示字符串,是否包含至少3个连续的a，最多5个连续的a
    //var patt = /a{3,5}/;

    //表示字符串,是否包含至少3个连续的a
    //var patt = /a{3,}/;

    //表示字符串,必须以a结尾
    //var patt = /a$/;

    //表示字符串,必须以a开头
    //var patt = /^a/;

    //表示字符串,从头到位完全匹配
    var patt = /^a{3，5}$/;

    alert(patt);//  /e/

    var str = "aaaaa";

    alert(patt.test(str));


  </script>
</head>
<body>

</body>
</html>

标签：06,patt,DOM,对象,标签,模型,字符串,var,document
来源： https://www.cnblogs.com/flypigggg/p/15045997.html