【JavaScipt】DOM模型

最新推荐文章于 2024-05-21 18:20:21 发布

Mae_strive

最新推荐文章于 2024-05-21 18:20:21 发布

阅读量92

点赞数 2

分类专栏：前端(h5+css+js+jq) 文章标签： html javascript html5

本文链接：https://blog.csdn.net/weixin_51799151/article/details/120056001

版权

前端(h5+css+js+jq) 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

DOM模型（Document Object Model）：

当网页被加载时，浏览器会创建页面的文档对象模型。
把文档中的标签，属性，文本转换成对象管理
在这里插入图片描述

一、Document 对象：

1、Document对象管理了所有的html文档内容
2、document是一种树文档结构（如上图）,有层次关系
3、所有标签都对象化
4、通过ducument访问所有标签对象

二、Document对象的方法介绍

1、getElementById()：
返回对拥有指定id的第一个对象的引用
2、getElementByName():
返回带有指定名称的对象集合
3、getElementByTagName():
返回带有标签名的对象集合

注意：三个查询方法一定要在页面在加载完成之后才能够查询到标签对象

案例1：

 <script type="text/javascript">
    /**
     * 需求:当用户点击了校验按钮，需获取输出框中的内容，然后验证其是否合法。
     * 验证的规则是：必须由字母，数字，下划线 组成 并且长度为6-12位
     */
    function onclickFun() {
      //当要操作标签时，一定要先获取这个标签对象
      var usernameObj=document.getElementById("username");
      //alert(usernameObj.id);  ->username
      var usernameText=usernameObj.value;
      //验证字符串 符合某些规则 需要使用正则表达式
      var patt=/^\w{6,12}$/;
      /*
       *  test():用于测试某个字符串 是否匹配制定规则
       *          匹配 返回true ; 不匹配 返回false
       *  innerHTML：返回的是标签内的 html内容，包含html标签。
       *  innerText：返回的是标签内的文本值，不包含html标签。
       */
     var usernamespanObj =document.getElementById("usernamespan");
      if (patt.test(usernameText)){
        //usernamespanObj.innerHTML="用户名合法！";
        //若用户名合法之后：附上正确的图片
        usernamespanObj.innerHTML="<img src=\"true.png\" width=\"25\">";   //  \" 转义字符
      }else {
       // usernamespanObj.innerHTML="用户名不合法！";
       //若用户名不合法：附上错误的图片
        usernamespanObj.innerHTML= "<img src=\"false.png\" width=\"25\">";
      }

    }
  </script>

</head>
<body>
用户名：<input type="text" id="username" value=""/>
<span style="color: red" id="usernamespan">
  <img src="false.png" width="25">
</span>
<button onclick="onclickFun()">校验</button>
</body>

刚开始显示用户名输入错误：
在这里插入图片描述

在这里插入图片描述

案例2：

<script type="text/javascript">
    //全选
    /*document.getElementsByName(): 根据指定的name属性查询返回多个标签的集合
      集合操作就跟数组一样
      集合中每一个元素都是dom对象
      集合中元素的顺序就是他们在html页面中从上到下的顺序
     */
    function checkAll() {
      var hobbys = document.getElementsByName("hobby");
      //checked 表示复选框的选中状态 选中为true 未选中为false
      //这个属性可读可写 既可以修改值，也可以使用值
      for (var i = 0; i < hobbys.length; i++) {
        hobbys[i].checked = true;
      }
    }

    //全不选
    function checkNull() {
      var hobbys = document.getElementsByName("hobby");
      for (var i = 0; i < hobbys.length; i++) {
        hobbys[i].checked = false;
      }
    }

    //反选
    function checkReverse() {
      var hobbys = document.getElementsByName("hobby");
      for (var i = 0; i < hobbys.length; i++) {
        hobbys[i].checked = !hobbys[i].checked;
      }
    }
  </script>

<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="cpp">C++
<input type="checkbox" name="hobby" value="java">Java
<input type="checkbox" name="hobby" value="python">Python
<input type="checkbox" name="hobby" value="js">JavaScript
<br>
<button onclick="checkAll()">全选</button>
<button onclick="checkNull()">全不选</button>
<button onclick="checkReverse()">反选</button>
</body>

三、节点

什么是节点？就是HTML标签、标签中的文字、标签的属性。

元素和节点的区别：
元素：元素节点，是节点的一种,就是html中的所有标签；像<div>等。
节点：元素节点可以包含多个节点，例如，标签中第一个,第二个……这每一个都是一个节点

节点常用的属性和方法：
方法：
createElement():创建节点
getElementByTagName():获取当前节点的指定标签名的子节点
appendChild(ochildNode):添加一个子节点 ochildNode：即要添加的子节点
属性：
childNodes：当前节点所有子节点
firstChild：当前节点的第一个子节点
lastChild：当前节点的最后一个子节点
parentNode：当前节点的父节点
nextSibling：当前节点的下一个兄弟节点
previousSibling：当前节点的上一个兄弟节点
className：获取和设置标签的Class属性
innerHTML：获取和设置起始标签和结束标签的内容（包括HTML标签）
innerText：获取和设置起始标签和结束标签的文本（不包括HTML标签）

  <script type="text/javascript">
    window.onload=function (){
      //得到id为div01的节点
      var node = document.getElementById("div01");
      //测试
      alert(node);
      //创建一个div节点
      var obj = document.createElement("div");
      //将此div节点的内容改为"JDBC",背景颜色改为红色
      obj.innerText="JDBC";
      obj.style.background="#FF0000FF";
      //将此节点追加到node节点的子节点中
      node.appendChild(obj);
    }
  </script>
</head>

<body>
<div id="div01">
  <div style="background-color: #96E555">JavaScript
  <span>作者：詹姆斯·高斯林</span>
</div>
  <div style="background-color: #55abe5">JavaSE</div>
  <div style="background-color: #666666">MySQL</div>
</div>
</body>
</html>

在这里插入图片描述

Mae_strive

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【JavaScipt】DOM模型

DOM模型（Document Object Model）：当网页被加载时，浏览器会创建页面的文档对象模型。把文档中的标签，属性，文本转换成对象管理一、Document 对象：1、Document对象管理了所有的html文档内容2、document是一种树文档结构（如上图）,有层次关系3、所有标签都对象化4、通过ducument访问所有标签对象二、Document对象的方法介绍1、getElementById()：返回对拥有指定id的第一个对象的引用2、getElementByName
复制链接

扫一扫