DOM的基础学习

最新推荐文章于 2023-04-22 17:47:07 发布
最新推荐文章于 2023-04-22 17:47:07 发布
阅读量65 收藏
点赞数
分类专栏： 笔记 html web 文章标签： javascript html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42107431/article/details/121223533
版权
笔记 同时被 3 个专栏收录
81 篇文章 1 订阅
订阅专栏
web
30 篇文章 0 订阅
订阅专栏
html
9 篇文章 0 订阅
订阅专栏

DOM的基础学习

概念

  • Document Object Model 文档对象模型
    • 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

W3C DOM 标准被分为 3 个不同的部分：

  • Core DOM - 所有文档类型的标准模型
    • Document：文档对象
    • Element：元素对象
    • Attribute：属性对象
    • Text：文本对象
    • Comment：注释对象
    • Node：结点对象，其他5个的父对象
  • XML DOM - XML 文档的标准模型
  • HTML DOM - HTML 文档的标准模型

Core DOM 模型

  • Document：文档对象
    1. 创建(获取)：在HTML dom模型中可以使用window对象来获取
      1. window.document
      2. document
    2. 方法：
      1. 获取Element对象：
        1. getElementById() 查找具有指定的唯一 ID 的元素。id属性值一般唯一
        2. getElementsByTagName() 返回所有具有指定名称的元素节点。返回值是一个数组
        3. getElementsByClassName()：根据Class属性值获取元素对象们。返回值是一个数组
        4. getElementsByName() 返回带有指定名称的对象集合。返回值也是一个数组。
      2. 创建其他DOM对象
        1. createAttribute(name) 创建拥有指定名称的属性节点，并返回新的 Attr 对象。
        2. createComment() 创建注释节点。
        3. createElement() 创建元素节点。
        4. createTextNode() 创建文本节点。
    3. 属性
  • Element：元素对象
    • 获取：通过document对象类获取和创建
    • 方法：
      1. removeAttribute(“属性名称”) 删除指定的属性。
      2. setAttribute() 添加新属性。
  • Node：结点对象，其他5个的父对象
    • 特点：所有dom对象都可以被认为是一个节点
    • 方法：
      • CRUD dom树
        1. appendChild() 向节点的子节点列表的结尾添加新的子节点。
        2. removeChild() 删除（并返回）当前节点的指定子节点。
        3. replaceChild() 用新节点替换一个子节点。
    • 属性：
      • parentNode 返回元素的父节点

案例：动态表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50PX;
        }
    </style>
</head>
<body>
<div>
    ID：<input type="number" id="ID" placeholder="请输入编号">
    名字：<input type="text" id="name" placeholder="请输入你的姓名">
    性别：<input type="radio" id="male" value="男" name="gender">男<input type="radio" id="female" value="女" name="gender">女
    <input type="button" value="添加" id="btn_add">
</div>

<table id="tab">
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th><th>姓名</th><th>性别</th><th>操作</th>
    </tr>
</table>

<script>
    /**
     * 分析
     *      1. 添加：
     *          1. 给添加按钮绑定单击事件
     *          2. 获取文本框内容
     *          3. 创建 tr，td 设置特点文本框的内容
     *          4. 将td添加到tr中
     *          6. 获取table，将tr添加到table中
     *      2. 删除
     *          1. 确定点击的是哪一个超链接
     *
     *          2. 怎么删除？
     */
    var btn_add = document.getElementById("btn_add");
    btn_add.onclick=function (){
        var id=document.getElementById("ID").value;
        var name=document.getElementById("name").value;
        var gender=document.getElementsByName("gender");
        var  gendervalue;
        for (var i=0;i<gender.length;i++){
            if(gender[i].checked){
                gendervalue=gender[i].value;
                break;
            }
        }

        var td_id=document.createElement("td");
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        var td_name=document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        var td_gender=document.createElement("td");
        var text_gender = document.createTextNode(gendervalue);
        td_gender.appendChild(text_gender);
        var td_caozuor=document.createElement("td");
        var btn_caozuor = document.createElement("input")
        btn_caozuor.value="删除";
        btn_caozuor.id="btn_del"
        btn_caozuor.type="button";
        btn_caozuor.onclick=function (){//这里面的this就是接受的对象
           var table = this.parentNode.parentNode.parentNode;
           var tr = this.parentNode.parentNode;
           table.removeChild(tr);
        }
        // function deltr (obj){//这里面的this就是接受的对象
        //        var table = obj.parentNode.parentNode.parentNode;
        //        var tr = obj.parentNode.parentNode;
        //        table.removeChild(tr);
        //     }
        // btn_caozuor.setAttribute("onclick","deltr(this);")
        td_caozuor.appendChild(btn_caozuor);


        //4. 创建tr
        var eletr=document.createElement("tr");
        eletr.appendChild(td_id);
        eletr.appendChild(td_name);
        eletr.appendChild(td_gender);
        eletr.appendChild(td_caozuor);
        var tab = document.getElementById("tab");
        tab.appendChild(eletr);



    }
</script>

</body>
</html>

HTML DOM

  1. 标签体的设置和获取：innerHTML

    1. 使用innerHTML来改进案例：动态表格的代码
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDOM</title>
    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50PX;
        }
    </style>
</head>
<body>
<!--<div id="d1">-->
<!--    div1-->
<!--</div>-->

<!--<script>-->
<!--    // var div = document.getElementById("d1");-->
<!--    // var  innerHTML = div.innerHTML;//获取标签体内容-->
<!--    // // alert(innerHTML);-->
<!--    //-->
<!--    // //div标签中替换一个文本输入框-->
<!--    // // div.innerHTML="<input type='text'>";-->
<!--    // //div标签中追加一个文本输入框-->
<!--    // div.innerHTML+="<input type='text'>";-->
<!--</script>-->
<div>
    ID：<input type="number" id="ID" placeholder="请输入编号">
    名字：<input type="text" id="name" placeholder="请输入你的姓名">
    性别：<input type="radio" id="male" value="男" name="gender">男<input type="radio" id="female" value="女" name="gender">女
    <input type="button" value="添加" id="btn_add">
</div>

<table id="tab">
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th><th>姓名</th><th>性别</th><th>操作</th>
    </tr>
</table>

<script>
    /**
     * 分析
     *      1. 添加：
     *          1. 给添加按钮绑定单击事件
     *          2. 获取文本框内容
     *          3. 创建 tr，td 设置特点文本框的内容
     *          4. 将td添加到tr中
     *          6. 获取table，将tr添加到table中
     *      2. 删除
     *          1. 确定点击的是哪一个超链接
     *
     *          2. 怎么删除？
     */
    var btn_add = document.getElementById("btn_add");
    // btn_add.οnclick=function (){
    //     var id=document.getElementById("ID").value;
    //     var name=document.getElementById("name").value;
    //     var gender=document.getElementsByName("gender");
    //     var  gendervalue;
    //     for (var i=0;i<gender.length;i++){
    //         if(gender[i].checked){
    //             gendervalue=gender[i].value;
    //             break;
    //         }
    //     }
    //
    //     var td_id=document.createElement("td");
    //     var text_id = document.createTextNode(id);
    //     td_id.appendChild(text_id);
    //     var td_name=document.createElement("td");
    //     var text_name = document.createTextNode(name);
    //     td_name.appendChild(text_name);
    //     var td_gender=document.createElement("td");
    //     var text_gender = document.createTextNode(gendervalue);
    //     td_gender.appendChild(text_gender);
    //     var td_caozuor=document.createElement("td");
    //     var btn_caozuor = document.createElement("input")
    //     btn_caozuor.value="删除";
    //     btn_caozuor.id="btn_del"
    //     btn_caozuor.type="button";
    //     btn_caozuor.οnclick=function (){//这里面的this就是接受的对象
    //         var table = this.parentNode.parentNode.parentNode;
    //         var tr = this.parentNode.parentNode;
    //         table.removeChild(tr);
    //     }
    //     // function deltr (obj){//这里面的this就是接受的对象
    //     //        var table = obj.parentNode.parentNode.parentNode;
    //     //        var tr = obj.parentNode.parentNode;
    //     //        table.removeChild(tr);
    //     //     }
    //     // btn_caozuor.setAttribute("onclick","deltr(this);")
    //     td_caozuor.appendChild(btn_caozuor);
    //
    //
    //     //4. 创建tr
    //     var eletr=document.createElement("tr");
    //     eletr.appendChild(td_id);
    //     eletr.appendChild(td_name);
    //     eletr.appendChild(td_gender);
    //     eletr.appendChild(td_caozuor);
    //     var tab = document.getElementById("tab");
    //     tab.appendChild(eletr);
    //
    //
    //
    // }

    //使用innerHTML添加，使得代码更加简洁
    document.getElementById("btn_add").onclick=function () {
        //2. 获取文本框的内容
        var id = document.getElementById("ID").value;
        var name = document.getElementById("name").value;
        var gender=document.getElementsByName("gender");
            var  gendervalue;
            for (var i=0;i<gender.length;i++){
                if(gender[i].checked){
                    gendervalue=gender[i].value;
                    break;
                }
            }
        var table = document.getElementsByTagName("table")[0];
        //追加一行
        table.innerHTML+="<tr>\n" +
            "    <td>"+id+"</td>\n" +
            "    <td>"+name+"</td>\n" +
            "    <td>"+gendervalue+"</td>\n" +
            "    <td><input type=\"button\" οnclick=\"deltr(this);\" value=\"删除\"></td>\n" +
            "</tr>";
    }
    function deltr(obj){
        var table = obj.parentNode.parentNode.parentNode;
        var tr = obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>

</body>
</html>

  2. 使用html元素对象的属性

    • 过多需要自行查阅API文档
    • 链接：https://www.w3school.com.cn/js/js_htmldom.asp

  3. 控制样式

    1. 使用元素的style属性来设置

      如：

      <script>
    var d1 = document.getElementById("d1");
    d1.onclick=function (){
        //修改样式方法一
        d1.style.border="1px solid red";
        d1.style.width="200px";

        //font-size --> fontSize
        d1.style.fontSize="50px";
    }
</script>

    2. 提前定义好类选择器的样式，通过元素的className属性来设置class属性值。

​

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDOM——控制样式</title>
    <style>
        .div2{
            border:1px solid green;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="d1">
    div1
</div>

<div id="d2">
    div2
</div>
<script>
    var d1 = document.getElementById("d1");
    d1.onclick=function (){
        //修改样式方法一
        d1.style.border="1px solid red";
        d1.style.width="200px";

        //font-size --> fontSize
        d1.style.fontSize="50px";
    }
    var d2=document.getElementById("d2");
    d2.onclick=function (){
        d2.className="div2";
    }
</script>
</body>
</html>
立乱来
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js 基础学习 遍历DOM
qq_40890601的博客
07-23 933
DOM这块知识很重要，做个总结吧！ DOM 表示文档对象模型，每个HTML标签都是一个对象，标签内的文本也是对象，所有这些对象都可以使用 js 来访问和修改。 js 共有12 种节点类型 通常用到的有四种： document — DOM 的“入口点”。 元素节点 — HTML 标签，树构建块。 文本节点 — 包含文本。 注释 — 有时我们可以将一些信息放入其中，它不会显示，但 JS 可以从 DOM 中读取它。 自动修正 如果浏览器遇到格式不正确的HTML，它会在形成DOM的时候修正它。 例如，顶级标签永
JavaScript学习笔记之DOM基础操作实例小结
10-17
主要介绍了JavaScript学习笔记之DOM基础操作,结合实例形式总结分析了javascript针对dom元素节点、属性的相关获取、设置等操作技巧,需要的朋友可以参考下
DOM基础学习2
qq_61718994的博客
04-10 801
学习内容：密码输入的显示于隐藏练习，元素操作--修改样式属性，排他思想，自定义属性的操作，tab栏切换练习 学习笔记： 密码输入的显示于隐藏练习 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>document</title> <style> .box { position: relative; width:
DOM基础学习1
qq_61718994的博客
04-03 1017
学习内容：API和Web API，DOM简介，获取元素，事件基础，操作元素-修改元素内容，元素操作-修改元素属性，属性操作-修改元素表单 学习笔记： API API 是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，或理解内部工作机制的细节。 Web API Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM） 总结 API是为我们程序员提供的一个接口，帮助我们实现某种功能，我们会使用就可以了，不必纠结内部如何实现 We.
DOM基础知识
最新发布
Mozarty的博客
04-22 1264
何为DOMDOM，即Document Object Model（文档对象模型），是一种Web API，它将HTML或XML文档表示为一个树形结构，每个节点都是一个对象，从而使开发者可以使用脚本语言（例如JavaScript）动态地访问和修改文档内容、结构和样式。何为Web APIWeb API是一种由Web浏览器提供的编程接口，它允许开发者通过JavaScript等脚本语言与浏览器进行交互，从而实现动态网页和丰富的Web应用程序。
JavaScript—DOM学习
weixin_50735831的博客
08-08 424
dom基础学习
JavaScript基础学习 DOM
柠檬味小发糕的博客
12-14 511
JavaScript基础学习 DOMDOM获取元素获取特殊元素 html与body事件三要素innerText与innerHTML的区别分时间问候案例 DOM获取元素 <!DOCTYPE html> <html> <head> <title>DOM开始学习</title> </head> <body> <div id="time">2021-12-13</div>
JavaScript学习二——DOM基础
qq_57985179的博客
10-03 656
一、什么是DOM DOM（全称 Document Object Model），即文档对象模型。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。包括以下能力：改变页面中的所有 HTML 元素、改变页面中的所有 HTML 属性、改变页面中的所有 CSS 样式、对页面中的所有事件做出反应。 （1）查找 HTML 元素 通过 JavaScript，我们可以操作 HTML 元素。 1、通过 id 找到 HTML 元素 在 DOM 中查找 HTML 元素的最简....
JavaScript基础学习报告：关于JavaScript文本对象模型DOM的学习心得
qq_41096610的博客
04-20 512
JavaScript基础学习报告：关于JavaScript文本对象模型DOM的学习心得 什么是JavaScript DOM 这一段时间在学习JavaScript有关的内容，JavaScript的文档对象模型，通俗的说就是一个接口，中立于平台和语言的接口，它允许程序和脚本动态的访问和更新文档的内容、结构和样式。 DOM定义了访问HTML文档的标准 当网页被加载时，浏览器会创建页面的文档对象模型（Do...
DOM入门基础
ange997的博客
08-01 3067
天道酬勤，地道酬精，人道酬善，商道酬诚，业道酬精。 DOM身为 JavaScript 三大内容之一，虽然在真正的开发中用的不多，但是也是JS学习中不可或缺的一部分，DOM的学习相对来说比较简单，分享一下我之前的部分DOM笔记。能力有限，水平一般，不足之处，多多包涵。 DOM简介 DOM，全称Document Object Model，文档对象模型。 DOM是一组用来描述 js 代码怎样与 html 文档进行交互和访问的 web 标准，它定义了一系列对象、方法和属性，用于访问、操作和创建文档中的内容、结构、样
JS学习笔记05-DOM基础
欢迎访问我的主页：https://www.bookbook.cc
04-24 7156
文章目录一、DOM基础1.1 什么是DOM？二、DOM节点2.1 什么是DOM节点？2.2 childNodes 获取子节点(会获取文本节点)2.3 nodeType 返回元素的节点类型。2.4 nodeName 返回元素的名称。2.5 nodeValue 设置或返回指定节点的节点值。2.6 children 获取子节点2.7 parentNode 获取父节点 一、DOM基础 1.1 什么是DO...
html.rar_dom基础学习
09-21
DOM基础学习主要包括以下几个方面： 1. **DOM结构**：DOM将HTML文档解析为一棵由节点组成的树，其中每个元素、属性和文本都对应一个节点。根节点是`<html>`，下面包含`<head>`和`<body>`两个子节点。元素节点有子...
Jquery 基础学习笔记
10-29
本篇笔记主要介绍了JQuery的基础用法，对于初学者来说是非常实用的学习资料。 1. **属性操作**：`attr()` 方法允许我们设置或获取元素的属性。例如，`$("input").attr("class","btn")` 会将所有`<input>`元素的`...
JavaScript学习笔记之DOM基础 2.4
01-19
DOM的发展，与WEB标准化的大趋势相关甚密。只有基于正确的语义逻辑，DOM才能正确地发挥其功用。如今，正确的语义结构、表现与内容分离等要求，都已经成为网页设计中的基本要求。因此，在网页前端开发中，DOM的存在，...
DOM基础及DOM操作HTML
08-04
通过学习DOM基础和DOM操作HTML，你可以更好地控制网页内容，实现动态效果，提升网页的交互性和用户体验。王兴魁老师的课程将帮助你掌握这些技能，并结合AJAX实践，进一步提升你的前端开发能力。
用MATLAB求一阶微分方程(组)数值解
热门推荐
感谢关注
01-25 1万+
文章目录用MATLAB求一阶微分方程(组)数值解标准形式进行求解常用的求解函数ode45(最常用)ode15s设定相对误差设置x的间隔 用MATLAB求一阶微分方程(组)数值解 标准形式 标准形式要先写成左边是y的导数右边是本身函数或者自变量，然后写成.m文件类似： function dy = df1(x,y) dy=y-2*x;%标准形式 end function dy=df2(x,y) dy=zeros(3,1);%一定要写成列向量 dy(1)=y(2)*y(3); d
用MATLAB求高阶微分方程(组)数值解
感谢关注
01-25 6258
用MATLAB求高阶微分方程(组)数值解 使用MATLAB求解数值解时，高阶微分方程(组)必须转换成一阶微分方程组，需要做一个变量替换。 例题 求 (1+x2)y"=2xy‘ (1+x^2)y^"=2 x y^` (1+x2)y"=2xy‘ 的数值解，其中x属于[-2,2]，初始值y(-2)=3，y^`(-2)=4 使用 y1=yy2=y1‘ y_1=y\\ y_2=y^`_1 y1​=yy2​=y1‘​ 替换得到 y1‘=y2y2‘=2x(1+x2)y2 y^`_1=y_2\\ y^`_2={2x\ove
51单片机计时器
感谢关注
08-21 5857
51单片机计时器 文章目录51单片机计时器51单片机定时器介绍：51单片机定时器的作用：定时器的工作模式：STC89C52中断资源：定时器相关寄存器 51单片机定时器介绍： 51单片机的定时器属于单片机的内部资源，其电路的连接的运转均在单片机内部完成； 51单片机定时器的作用： （1）用于计时系统，可实现软件计时，或者使程序每隔一固定时间完成一项操作 （2）替代长时间的Delay，提高CPU的运行效率和处理速度 （…) 更多相关参考单片机手册 定时器个数：3个（T0、T1、T2），T0和T1与传统的51单片
51单片机串口通信实操（中断函数）
感谢关注
08-23 3422
51单片机串口通信实操（中断函数） 详细参考单片机手册 SM0、SM1分别为0,1时为模式一，因为模式一最为常用 REN=1，为接收，REN=0,为不接收 当 SM0,SM1,SM2,REN,TB8,RB8,TI,RI分别为0 1 0 0 0 0 0时，给SCON赋值时要转换为十六进制就是40，即SCON=0x40; 烧录工具（STC-ISO）有波特率计算器可以方便初始化（和定时器计算器类似） 数据显示模式 HEX模式/十六进制模式/二进制模式：以原始数据的形式显示 文本模式/字符模式：以原始数据编码后的
JavaScript基础：DOM编程与Window对象特性
"Window对象是JavaScript中的全局对象，它表示浏览器窗口，包含了许多与浏览器...通过深入学习Window对象的属性和方法，以及DOM编程的基本概念，开发者可以有效地控制浏览器窗口的行为，创建交互式和动态的网页应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

立乱来

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值