JAVASCRIPT之DOM篇

最新推荐文章于 2024-08-25 00:00:00 发布
最新推荐文章于 2024-08-25 00:00:00 发布
阅读量146 收藏
点赞数
分类专栏： JAVAWEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39128354/article/details/79073133
版权

dom文档对象模型

文档对象模型编程
在浏览器加载完HTML页面的时候，JavaScript引擎把整个HTML页面得所有的HTML标签封装成对象，
通过这些标签对象来操作（控制）HTML页面的效果，这种操作就是dom编程
JavaScript引擎加载二胺HTML页面后，会把每个标签封装成对象，这些标签对象形成了一个树状的结构
document：对象，这个对象代表了整个HTML文档
如果要找对应的标签对象，就需要从document开始查询。

DOM步骤
1）找到需要控制的标签对象
2）通过标签对象的属性和方法改变标签
文档：
    超文本文档（超文本标记文档）HTML ，xml
对象
    提供了属性和方法
模型
    使用属性和方法操作超文本标记类型文档
可以使用JS里面的dom里面提供的对象，使用这些对象的属性和方法，对标记文档进行操作
想要对标记型文档进行操作，首先需要，对标记型文档里面的所有内容封装成对象
    需要把HTML里面的标签，属性，文本内容转都封装成对象
    要想对标记型文本进行操作，解析标记型文档
    解析过程
        根据HTML的层级结构，在内存中分配一个树形结构，需要把HTML中的每个部分封装成对象
        document对象 整个文档
        element对象 标签对象
        属性对象
        文本对象
        Node结点对象，这个对象是这些对象的父对象
            如果在对象里面找不到想要的方法，这个时候到Node对象里面取找
        DOM模型有三种
            DOM level 1： 将HTML文档封装成对象
            DOM level  2：在java 1的基础上添加了新功能，
            DOM level  3：支持xml1.0的一些新特性
        DHTML 是很多技术的简称
            html:封装数据
            css：使用属性和属性的设置样式
            dom;操作HTML文档（标记型文档）
            JavaScript 专门指的是技术语法语句（ECMAScript)



1）查询标签对象
--------

        通过document对象获取，document代表一个HTML页面



通过document对象集合，


        作用：获取多个后者同类的标签对象
        all：获取所有的标签对象

    属性
        nodeName  获取标签名称
    var nodeList=document.all://返回标签对象数组
    for(var i=0;i<nodeList.length;i++){
        alert(nodeList[i].nodeName);
    }           

    forms：获取form标签对象

    var nodeList=document.forms://返回标签对象数组
    for(var i=0;i<nodeList.length;i++){
        alert(nodeList[i].nodeName);
    }   

    images：获取img标签对象
    var nodeList=document.imagesl://返回标签对象数组
    for(var i=0;i<nodeList.length;i++){
        alert(nodeList[i].nodeName);
    }   
    links：获取a标签对象
    var nodeList=document.links://返回标签对象数组
    for(var i=0;i<nodeList.length;i++){
        alert(nodeList[i].nodeName);
    }

通过关系来查找标签对象

    节点（Node）
    节点之间的关系
    1）父节点： parentNode 属性
    2）子节点：childNodes  firstNode lastNode 属性
        注意：获取的子节点包含了以下的元素
            1）标签        1
            2）空格换行  3
            3）HTML注释    8

        在子节点中刷选出标签出来呢？ 可以使用 nodeType属性：节点类型
        取出nodeType值为1的节点对象
        第一个子节点 firstChild 属性
        最后一个子节点 lastChild属性

    3）兄弟关系 sibling  
        下一个兄弟节点 nextSibling 属性
        上一个兄弟节点 previousSibling 属性

通过document方法查找标签对象

        document.getElementById（“ID属性值”）：常用
            注意：
                1）使用该方法获取的标签一定要有一个ID属性
                2）在同一个HTML页面中不要出现俩个同名的ID
        document.getElementsByName（“name属性值”）;获取同name属性名的标签
            注意
                1）使用该方法获取标签一定要有name属性
            //返回数组
            document.getElementsByName（“user“）[0];//获取第一个
        document.getElementsByTagName（“标签名”）；获取相同标签名的标签列表

2）修改标签对象

    常用的需要修改的属性
    innerHTML属性 ：修改标签体内容 <span><div><select>
        innerHTML=“xxxx”;设置的标签内的HTML
        innertext="xxxx";   设置标签内容的文本  在IE可以在火狐不可以
            text属性：
    value属性：修改value属性值。input type=“text”
        userNam.value=“”；       //一定是字符串类型
    src 属性 ：修改图片的src位置：<img src=""/>
        var img=document.getElementsByTagName("img");
        img.src="";
    checked属性：修改单选或多项的默认值。<input type="radio/checked" checked=""/>
    这个选项的状态
    false 表示没有选中
    true 表示已经被选中
    var iq=document.getElementsByName("");
    iq.checked=true;

3）标签对象的方法

    添加相关
        document.createElement("标签名");创建节点对象

        setAttribute("name","value");设置节点的属性
    插入相关：
        appendChild(标签对象);添加子节点对象
        insertBefore(新标签对象,指定对象)；在指定的对象前面添加子节点对象

    删除  
        removeChild（标签对象）；删除子节点

练习代码
动态生成表格

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>动态生成表格</title>
    <script type="text/javascript">
        var count=2;
        function  add(){
            //创建tr标签
            var tr=document.createElement("tr");
            //创建三个td标签
            var td1=document.createElement("td");
            td1.innerHTML=count;
            var td2=document.createElement("td");
            var input1=document.createElement("input");
            input1.setAttribute("type", "text");
            //把input放入到td中
            td2.appendChild(input1);

            var td3=document.createElement("td");
            var input3=document.createElement("input");
            input3.setAttribute("type", "password");
            td3.appendChild(input3);

            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);

            var tbody=document.getElementsByTagName("tbody")[0];
            tbody.appendChild(tr);
            count++;

        }
        function  delect(){
            if(count>2){
            var tbody=document.getElementsByTagName("tbody")[0];
            var lastChild=tbody.lastChild;
            tbody.removeChild(lastChild);
            count--;
            }

        }
    </script>
</head>
<body>
    <table border="1px " align="center" width="400px" cellspacing="0px">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>密码</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>
                    <input type="text" value="李四" />
                </td>
                <td>
                    <input type="password" value="123456"/>
                </td>>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">
                    <input type="button" value="增加一个学生的信息" onclick="add()" />
                    <input type="button" value="删除一个学生的记录" onclick="delect()" />
                </td>
            </tr>
        </tfoot>

    </table>
</body>
</html>

正则表达式

    创建正则表达式“  var  变量=/正则规则/;

    /*
        [a-z]:表示匹配字母
        *     “0或多个元素
        +   :1个或者多个元素
        ？   ：0或者1个元素
        {n,m}  ：大于N，小于M的个数  
    */
    正则方法：   
        test() :用于匹配指定的一个字符串 true 表示成功 ；false表示匹配失败
        注意：
            在JS正则表达式中：匹配规则：如果遇到了符合规则的内容，就代表匹配成功！
            如果需要和java一样完全匹配，需要添加边界符号
            开始标记： ^
            结束标记：   $
        var  str="12"
        var reg=/^[0-9]{2}$/;
        var str="abcabc";
        var reg=/[0-9]{3}/;
        if(reg.test(str)){

        }

练习代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>使用正在校队表单输入</title>
    <script type="text/javascript">
        function testOnfocus(){
            var userName=document.getElementById("userName");
            userName.value="";
        }
        function uesrOnBulr(){
            var  userName=document.getElementById("userName").value;
            var reg=/^[a-zA-Z0-9]{4,16}$/;
            var span=document.getElementById("userSpan");
            if(userName!=""){
                if(reg.test(userName)){
                    span.innerHTML="用户名正确".fontcolor("green");
                    return true;
                }
                else{
                    span.innerHTML="该用户名错误".fontcolor("red");
                    return false;
                }
            }
            else{
                span.innerHTML="该用户名不能为空".fontcolor("red");
                    return false;
            }

        }
        function passOnBulr(){
            var  userPwd=document.getElementById("userPwd").value;
            var reg=/^[a-zA-Z0-9]{4,16}$/;
            var span=document.getElementById("userTip");
            if(userPwd!=""){
                if(reg.test(userPwd)){
                    span.innerHTML="密码正确".fontcolor("green");
                    return true;
                }
                else{
                    span.innerHTML="密码名错误".fontcolor("red");
                    return false;
                }
            }
            else{
                span.innerHTML="密码不能为空".fontcolor("red");
                    return false;
            }

        }
        function twiceOnbulr(){
            var userPwd=document.getElementById("userPwd").value;
            var userPwds=document.getElementById("userPwds").value;
            var  span=document.getElementById("userTips");
            if(userPwd!=""){
                if(userPwd==userPwds){
                    span.innerHTML="密码正确".fontcolor("green");
                    return true;
                }
                else{
                    span.innerHTML="密码错误".fontcolor("red");
                    return false;
                }
            }
            else{
                span.innerHTML="密码不能为空".fontcolor("red");
                    return false;
            }

        }
        function  idCardOnbulr(){
            var idCard=document.getElementById("idCardOnbul").value;
            var span=document.getElementById("idCardTips");
            var reg=/^[0-9]{17}[a-zA-Z0-9]{1}$/;
            if(idCard!=""){
                    if (reg.test(idCard)) {

                    span.innerHTML="身份证输入格式正确".fontcolor("green");
                    return true;
                }else{
                    span.innerHTML="身份证输入格式不正确".fontcolor("red");

                    return false;
                }
            }

            else{
                span.innerHTML="身份证不能为空".fontcolor("red");
                    return false;
            }

        }
        function emailOnbuler(){
            var email=document.getElementById("emailOnbul").value;
            var span=document.getElementById("emailTips");
            var reg=/^[a-zA-Z0-9]+@[a-zA-Z0-9]+(\.[a-zA-Z]{2,3}){1,2}$/;
            if(email!=""){
                if (reg.test(email)) {

                    span.innerHTML="邮箱输入格式正确".fontcolor("green");
                    return true;
                }
                else{
                    span.innerHTML="邮箱证输入格式不正确".fontcolor("red");

                    return false;
                }
            }
            else{
                span.innerHTML="邮箱不能为空".fontcolor("red");
                    return false;
            }
        }
        function  checkAll(){
            if(uesrOnBulr() && passOnBulr() && twiceOnbulr() && idCardOnbulr() && emailOnbuler()){
                return true;
            }
            else{
                return false;
            }
        }

    </script>
</head>
<body>
    <!-- form 表单有一个onsubmit事件，返回为真则提交表单，假则不提交表单 -->
    <form action="后台处理.html" method="post"  onsubmit="return checkAll()" >
        用户名：<input type="text" value="4~16位数字或字母" id="userName" onfocus="testOnfocus()" onblur="uesrOnBulr()" />
        <span id="userSpan"></span>
        <br/>
        密码：<input type="password" onblur ="passOnBulr()" id="userPwd"   />
        <span id="userTip"></span>
        <br/>
        再次输入密码：<input type="password" onblur ="twiceOnbulr()" id="userPwds" />
        <span id="userTips"></span>
        <br/>
        省份证：<input type="text" onblur="idCardOnbulr()"  id="idCardOnbul" />
        <span id="idCardTips"></span>
        <br/>
        邮箱:<input type="text" onblur="emailOnbuler()" id="emailOnbul"  />
        <span id="emailTips"></span>
        <br/>
        <input type="submit"  value="提交"/>

    </form>
</body>
</html>
自在强
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈JavaScript_DOM学习篇_图片切换小案例
10-17
### JavaScript DOM知识点讲解 #### DOM简介 文档对象模型（Document Object Model，简称DOM），是一种由浏览器提供的数据...掌握DOM操作是前端开发者必备的技能之一，对于构建用户交互丰富、动态变化的网页至关重要。
JavaScript与DOM组合动态创建表格实例
12-12
简介　这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们。你可以学到如何动态地创建、获取、控制和删除HTML元素。这些DOM方法同样适用于XML。所有全面支持DOM 1.0的浏览器都能很好地...
【前端基础篇】JavaScript之DOM介绍
最新发布
Trouvaille ~的博客
08-25 2395
前面学习的 JS 分成三个大的部分ECMAScript: 基础语法部分DOM API: 操作页面结构BOM API: 操作浏览器WebAPI 就包含了 DOM + BOM. 这个是 W3C 组织规定的. (和制定 ECMAScript 标准的大佬们不是一伙人).前面学的 JS 基础语法主要学的是 ECMAScript, 这让我们建立基本的编程思维. 相当于练武需要先扎马步. 但是真正来写一个更加复杂的有交互式的页面, 还需要 WebAPI 的支持. 相当于各种招式.
JavaScript DOM API的使用
trong_ 的烂笔头
03-08 3244
JavaScript主要由ECMAScriptDOMBOM这三部分组成;我们要知道要完成一个程序, 光有语法是远远不够的, 对于JS来说, 除JS语法(ES)外, 还需要掌握一些WebAPI, 这些API是浏览器给JS代码提供的功能, 即DOM和BOM;DOM是页面文档对象模型, 可以对页面中的元素进行操作, 而BOM是浏览器对象模型, 可以对浏览器窗口进行操作, 本篇博客中主要介绍的就是DOM.
教你完全学会JavaScript（DOM篇——完结）从入门到精通
m0_59285890的博客
05-12 848
文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口。
JavaScript HTML DOM 基础+实战篇
王佳龙的博客
07-25 414
目录 一、JavaScript HTML DOM 简介 二、JavaScript HTML DOM - 改变 HTML 三、JavaScript HTML DOM - 改变 CSS 四、JavaScript HTML DOM 事件 五、JavaScript HTML DOM 元素（节点）   一、JavaScript HTML DOM 简介 通过 HTML DOM，可访问 Java...
JavaScript之DOM操作
LuckyStar_H的博客
04-27 434
关于以上方法详细使用见下一篇！
JavaScript之彻底搞懂DOM与BOM及其区别与用法
热门推荐
跳探戈的小龙虾的博客
03-19 1万+
ECMAScript 是JavaScript（简称JS）的标准，浏览器就是去执行这个标准。 DOM（DocumentObjectModel ，文档对象模型）一种独立于语言，用于操作xml，html文档的应用编程接口。对于JavaScript：为了能够使JavaScript操作Html，JavaScript就有了一套自己的DOM编程接口。 BOM 是 Browser Object Model，浏览器对象模型。BOM 是为了控制浏览器的行为而出现的接口。
JavaScript学习笔记之DOM篇，带你全面了解什么是DOM
jingjing的博客
08-10 1003
DOM在前面的JavaScript学习笔记（一）–JS基础里简单提到过，它是浏览器厂商提供的用来控制html / css 的代码的文档对象模型，是JavaScript的重要组成部分，现在带大家详细了解一下什么是DOM。 什么是DOM DOM的全称是Document Object Model，即文档对象模型，是一套对文档的内容进行抽象和概念化的方法，它允许脚本控制Web页面、窗口和文档。 DOM不是JavaScript语言的一部分，而是内置在浏览器中的一个应用程序接口。 如果没有DOM，JavaScript将
JavaScript之DOM
陈晓婵
03-31 1453
上篇说了它是JavaScript的三大组成之一，其中DOM（Document Object Model）即文档对象模型，顾名思义，主要是用在文档，针对HTML和XML文档的API（应用程序接口）。DOM描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。 一、节点由来：         加载HTML页面时，Web浏览器生成一个树型结构，用来表示页面内部结构。DOM将这种树型结
JavaScript DOM—节点操作
Jin_Xiang123的博客
01-04 1480
文档对象模型（Document Object Model，简称DOM）是一种基于树状结构的编程接口，用于操作HTML、XML和SVG等文档。它将文档表示为一个树状结构，其中每个节点代表文档中的一个元素、属性、文本或其他类型的内容。DOM提供了一组标准的对象和方法，可以通过JavaScript等编程语言来访问和操作文档的各个部分。通过DOM，开发者可以使用JavaScript来读取、修改、添加和删除文档的元素、属性和内容。DOM树是由节点组成的。文档节点是DOM树的根节点，它是整个文档的入口点。
JavaScript DOM基础
程序员柒的博客
07-18 2133
本文简单的讲解了JavaScript的DOM基础，适合初学的朋友们，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。以下是本篇文章正文内容一个完整的JavaScript实现由以下3个不同部分组成核心（ECMAScript）语言核心部分，描述了该语言的语法和基本对象。文档对象模型（DocumentObjectModel，DOM）网页文档操作标准，描述处理网页内容的方法和接口。浏览器对象模型（BOM）客户端和浏览器窗口操作基础，描述与浏览器进行交互的方法和接口。编程接口。......
Javascript操作dom对象之select全面解析
10-19
在这篇文章中，作者详细解析了使用JavaScript操作DOM对象中select元素的方法。首先，介绍了一个基础的HTML结构，即包含三个option选项的select元素。这三个选项分别代表“北京大学”、“清华大学”和“北京电影学院...
js-dom-fundamentals:JavaScript和DOM基础
05-18
JavaScript和DOM基础 如果您对JavaScript的基本知识充满热情，那么掌握它非常重要。 如果您具有扎实JavaScript基础知识，那么在开始使用新框架时，唯一需要熟悉的就是语法。 基本规则将是相同的，因为在所有抽象层下...
JAVAWeb-动态网页开发
自在强博客
01-20 1万+
html/css/javascript前端 （静态网页） 静态网站：只包含静态网页 动态网站：既有静态网页也有动态网页 静态网页;用户多次访问这个网页是，网页的源代码是不会改变的 动态网页：用户多次访问这个网页是，网页源代码是有可能改变的 使用servlet技术开发动态网页 Servlet:特点 1）servlet就是一个普通java类，继承了HttpServlet类 2）s
用Tomcat发布网站的一些例子
自在强博客
01-13 5022
webRoot 根目录 普通文件（HTML，css,js,images)放在外面 |_WEB-INF 目录，固定写法 |_classes 目录，固定写法，存放class文件 |_lib 目录，固定写法存放jar包 |_web.xml 文件. 注意 1 WEB-INF外面
JAVAWeb-Http之请求
自在强博客
01-20 1780
http：协议 对浏览器和服务器之间数据传输格式的规范！ tcp/ip协议： 专注的是客户端和服务端之间数据是否传输成功 http协议： 就是在tcp/ip协议的基础上封装的一套协议，专注于客户端和服务端数据传输格式是否一致 http请求 GET /day08/first HTTP/1.1 请求行 应俩个空格分开 Host:localhost:8080
在JavaWEB中查找不到源代码的解决方案
自在强博客
01-28 1522
你没有附加源码的话，是看不到源码的，你必须附加源码：右键项目-Build Path-Configure Build Path-Java Build Path-Libraries-选择你的jar包-点左边的+号-选择Source attatch-Edit-Browse-选择你的源码包就可以附加源码了。 资源： Tomcat各种版本源代码 网址：http://archive.ap
JavaScript操作HTML DOM完全指南
"这篇文档介绍了如何使用JavaScript与HTML DOM进行交互，以操作和修改HTML文档。主要内容包括DOM的基本概念、节点类型以及相应的属性和方法。" JavaScript与HTML DOM的交互是网页动态化的重要组成部分，它允许...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值