（七）DOM

最新推荐文章于 2024-07-10 20:17:43 发布
最新推荐文章于 2024-07-10 20:17:43 发布
阅读量115 收藏
点赞数
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Apikaqiu/article/details/111663311
版权 
  •   概念：Document Object Model 文档对象模型
  		将标记语言文档的各个组成部分封装成对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。

在这里插入图片描述

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

  •   核心	DOM--针对任何结构化文档的标准模型
  			Document：文档对象
  			Element：元素对象
  			Attribute：属性对象
  			Text：文本对象
  			Comment：注释对象

  			Node：节点对象，是其他5个的父对象

  •   XML	DOM--针对XML文档的标准模型

  •   HTML DOM--针对HTML文档的标准模型

核心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()：根据name属性值获取元素对象们。返回值是一个数组
  	2.创建其他DOM对象
  			createAttribute(name)
            createComment()
            createElement()
            createTextNode()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document对象</title>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div id="div3">div3</div>

    <div class="cls1">div4</div>
    <div class="cls1">div5</div>

    <input type="text" name="username">

</body>
<script>
    //2.getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
    var divs=document.getElementsByTagName("div");
    //alert(divs.length);//5

    //3.getElementsByClassName()：根据class属性值获取元素对象们。返回值是一个数组
    var div_cls=document.getElementsByClassName("cls1")
    //alert(div_cls.length);//2

    //4.getElementsByName()：根据name属性值获取元素对象们。返回值是一个数组
    var ele_username=document.getElementsByName("username");
    //alert(ele_username.length);//1

    var table=document.createElement("table");
    alert(table);
</script>
</html>

Element：元素对象

  •   1.获取/创建：通过document来获取和创建

  •   2.方法：
  		1.removeAttribute()：删除属性
  		2.setAttribute()：设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Elements对象</title>
</head>
<body>
    <a>点我试一试</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_remove" value="删除属性">


<script>
    var btn_set =document.getElementById("btn_set");
    btn_set.onclick=function () {
        //获取a标签
        var element_a=document.getElementsByTagName("a")[0];
        element_a.setAttribute("href","https://www.baidu.com");
    }

    var btn_remove =document.getElementById("btn_remove");
    btn_remove.onclick=function () {
        //获取a标签
        var element_a=document.getElementsByTagName("a")[0];
        element_a.removeAttribute("href");
    }
</script>
</body>

</html>

Node：节点对象，是其他5个的父对象

  •   特点：所有dom对象都可以被认为是一个节点

  •   方法：
  	CRUD dom树：
  		appendChild()：向节点的子节点列表的结尾添加新的子节点
  		removeChild()：删除（并返回）当前节点的指定子节点
  		replaceChild()：用新节点替换一个子节点

  •   属性：
  		parentNode	返回节点的父节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div{
            border: 1px solid aquamarine;
        }
        #div1{
            width: 200px;
            height: 200px;
        }

        #div2{
            width: 100px;
            height: 100px;
        }

        #div3{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
            div2
        </div>
        div1

    </div>
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
<!--    <input type="button" id="del" value="删除div的子节点">-->

<script>
    //1.获取超链接
    var element_a=document.getElementById("del");
    //2.绑定单击事件
    element_a.onclick=function () {
        var div1=document.getElementById("div1");
        var div2=document.getElementById("div2");
        div1.removeChild(div2);
    }


    //1.获取超链接
    var element_add=document.getElementById("add");
    //2.绑定单击事件
    element_add.onclick=function () {
        var div1=document.getElementById("div1");
         //给div1添加子节点
        //创建div节点
        var div3=document.createElement("div");
        div3.setAttribute("id","div3");
        div1.appendChild(div3);
    }

    /*
        超链接功能：
            1.可以被点击：样式
            2.点击后跳转到href指定的url
        需求：保留1功能，去掉2功能
        实现：href="javascript:void(0);"
     */

    var div2=document.getElementById("div2");
    var div1=div2.parentNode;
    alert(div1);
</script>
</body>
</html>

动态表格

在这里插入图片描述

    分析：
        1.添加：
            1.给添加按钮绑定单击事件
            2.获取文本框的内容
            3.创建td,设置td的文本为文本框的内容
            4.创建tr
            5.将td添加到tr中
            6.获取table,将tr添加到table中

         2.删除：
            1.确定点击的是哪一个超链接
           <a href="javascript:void(0);" onclick="delTr(this);">删除</a>
           2.怎么删除
            removeChild()：通过父节点删除子节点

<!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>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name" placeholder="请输入名字">
    <input type="text" id="gender" placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">
</div>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>
    <tr>
        <td>1</td>
        <td>朱一龙</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>白宇</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>鹿晗</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td>
    </tr>
</table>

<script>
   

    //1.获取按钮
    document.getElementById("btn_add").onclick=function () {
        //2.获取文本框的内容
        var id=document.getElementById("id").value;
        var name=document.getElementById("name").value;
        var gender=document.getElementById("gender").value;

        //3.创建td，赋值td的标签体
        var td_id=document.createElement("td");
        var text_id=document.createTextNode(id);
        td_id.appendChild(text_id);//td的子节点就是文本框的内容

        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(gender);
        td_gender.appendChild(text_gender);

        //a标签的td
        var td_a=document.createElement("td");
        var ele_a=document.createElement("a");
        ele_a.setAttribute("href","javascript:void(0);");
        ele_a.setAttribute("onclick","delTr(this)");
        var text_a=document.createTextNode("删除");
        ele_a.appendChild(text_a);
        td_a.appendChild(ele_a);

        //4.创建tr
        var tr=document.createElement("tr");
        //5.添加td到tr中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);
        //6.获取table
        var table=document.getElementsByTagName("table")[0];
        table.appendChild(tr);
        
        }
		
		//使用innerHTML添加 这种方式更加简单
		/*
        document.getElementById("btn_add").οnclick=function () {
            //2.获取文本框的内容
            var id=document.getElementById("id").value;
            var name=document.getElementById("name").value;
            var gender=document.getElementById("gender").value;

            //获取table
            var table=document.getElementsByTagName("table")[0];
            //追加一行
            table.innerHTML +="<tr>\n" +
                "        <td>"+id+"</td>\n" +
                "        <td>"+name+"</td>\n" +
                "        <td>"+gender+"</td>\n" +
                "        <td><a href=\"javascript:void(0);\" οnclick=\"delTr(this);\">删除</a></td>\n" +
                "    </tr>"
        }
		*/
        //删除方法
                function delTr(obj) {
                    var table=obj.parentNode.parentNode.parentNode;
                    var tr=obj.parentNode.parentNode;
                    table.removeChild(tr);


    }
</script>
</body>
</html>

HTML DOM

  • 1.标签体的设置和获取：innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDOM</title>
</head>
<body>
    <div id="div1">
        div
    </div>

<script>
    var div=document.getElementById("div1");
    var innerHTML=div.innerHTML;
    //alert(innerHTML);

    //div标签中替换一个文本输入框
    //div.innerHTML="<input type='text'>";

    //div标签中追加一个文本输入框
    div.innerHTML += "<input type='text'>";
</script>
</body>
</html>
  • 2.使用html元素对象的属性
  • 3.控制样式
    1.使用元素的style属性来设置
//修改样式的方式1
        div1.style.border="1px solid red";
        div1.style.width="200 px"

        //font-size-->fontSize
        div1.style.fontSize="20px";

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTMLDOM_控制样式</title>
    <style>
        .d1{
            border: 1px solid rebeccapurple;
            width: 100px;
            height:  100px;
        }

        .d2{
            border: 1px solid greenyellow;
            width: 200px;
            height:  200px;
        }
    </style>
</head>
<body>

    <div id="div1">
        div1
    </div>

    <div id="div2">
        div2
    </div>

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

        //font-size-->fontSize
        div1.style.fontSize="20px";

    }

    var div2=document.getElementById("div2");
    div2.onclick=function () {
        div2.className="d1";
    }
</script>
</body>
</html>
顺毛黑起
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深度解析dom diff算法（二）
weixin_39327883的博客
10-26 493
了解了vdom和dom diff的前世今生，让我们来看看当今主流前端框架的diff算法策略又是什么，本篇我们先介绍react的dom diff算法 React算法时间复杂度 众所周知，react框架把diff算法复杂度由O（n的三次）降低到了O（n） React对diff算法的改进 react的diff算法针对三个纬度产出了相应的优化策略： 1、web ui中跨层级的移动操作很少，可以忽略不计 （tree diff） 2、拥有相同类型的两个组件将会生成相似的树形结构，不同类型的组件生成不同的树形结.
DOM介绍
weixin_45116146的博客
09-23 2625
DOM是JS操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个JS对象，从而可以用脚本进行各种操作（比如增删内容）。 DOM提供了一种表述形式将文档作为一个结构化的节点组以及包含属性和方法的对象。从本质上说，它将web页面和脚本或编程语言连接起来了。 DOM可以理解成网页的编程接口。 1.节点 DOM最小的单位叫做节点。文档的树形结构（DOM树），就是各种不同类型的节点组成的。 节点类型有七种：Document、DocumentTyp..
JavaScript——DOM快速入门
weixin_622464的博客
11-11 312
1. 概念： Document Object Model 文档对象模型 * 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作 2. W3C DOM 标准被分为 3 个不同的部分： * 核心 DOM - 针对任何结构化文档的标准模型 * Document：文档对象 * Element：元素对象 * Attribute：属性对象 * Text：文本对象 * Comment:注释对象 * Node：节点...
JS中DOM的学习
qq_52934543的博客
04-26 247
1. 什么是DOM? 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。 它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。 DOM 是一 种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。 总结：W3C 已经定义了一系列.
js基础知识——DOM基本操作
初来乍到IT狗的博客
07-15 334
在DOM中，每个部分都是节点：文档本身是文档节点，所有HTML元素是元素节点 ，所有HTML 属性是属性节点，HTML 元素内的文本是文本节点 （包括回车符也是属于文本节点）， 注释是注释节点，元素也可以拥有属性，属性是属性节点。
JAVAWEB基础知识——JavaScript篇
weixin_42433978的博客
02-24 2209
1. 2. 3.
前端 # 七 DOM编程
zjj8008120308的博客
07-10 836
七 DOM编程 7.1 什么是DOM编程 简单来说:DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程. document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。 根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。 上面的代码生成的树如下 DOM编程其实就是用window对象
XML 七 DOM与HTML显示与应用程序
W_H_M_2018的博客
02-12 268
XMLDOM DOM（Document Object Model 文档对象模型）定义了访问和操作文档的标准方法。 XML DOM XML DOM（XML Document Object Model）定义了访问和操作 XML 文档的标准方法。 XML DOM 把 XML 文档作为树结构来查看。 所有元素可以通过 DOM 树来访问。可以修改或删除它们的内容，并创建新的元素。元素，它们的文本...
DOM基本流程
weixin_45290168的博客
08-15 1510
# DOM基本流程 写的有点不好，没有写全，大概就是这个意思，看不懂的话可以来问我 先进行导入dom4j包 1.构建解析工厂 ​ 使用：DocumentBuilderFactory.newDefaultInstance(); 2.创建解析对象 ​ 使用：factory.newDocumentBuilder(); 3.进行解析xml 文档树已经生成 ​ 使用：documentBuilder.parse 4.获取根节点 ​ 使用：document.getElement...
七DOM编程学习
wei7a7a7a的博客
01-04 176
document对象是window对象的一个成员属性，通过window.document来访问，当然也可以直接使用document,根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。结点对象:Node,document对象中的每一个分支点都是一个node对象,它有三个子类。1.查询元素（获取元素,进而操作元素,或者元素的属性,文本）
实验七DOM
02-18
实验七“DOM”是JavaScript编程中的一个重要主题，它代表了Document Object Model，即文档对象模型。DOM是一个标准，用于表示HTML或XML文档的结构，并提供了一种与浏览器无关的方式来访问和操作页面上的元素。 在...
dom4j_java
11-27
七、总结 DOM4J作为Java处理XML的强大工具，提供了丰富的API来创建、解析、修改XML文档。它的易用性和灵活性使得开发人员可以快速地对XML数据进行各种操作，而无需担心内存管理和性能问题。无论是简单的读取还是复杂...
JavaScript DOM 学习第七章 表单的扩展
10-29
在本章节中，我们将会探讨JavaScript DOM在表单操作中的高级应用，特别是如何利用W3C DOM标准来扩展表单元素。这些扩展主要是围绕着动态增加表单字段，以适应用户交互设计上的需要。 首先，传统上在设计交互页面时...
HTML javascript DOM
06-22
#### 七、总结 DOM 作为连接 HTML 和 JavaScript 的桥梁，是现代 Web 开发不可或缺的一部分。通过掌握 DOM 的基本原理和操作方法，开发者可以更加高效地创建动态、交互性强的网页应用。随着 Web 技术的不断发展，...
【独家首发】基于蜣螂优化算法DBO-GMDH的风电数据回归预测研究Matlab实现.rar
最新发布
08-14
【独家首发】基于蜣螂优化算法DBO-GMDH的风电数据回归预测研究Matlab实现.rar
深度探索：神经网络在图像识别中的革命性应用
08-14
神经网络是一种受人脑结构启发的数学模型，它由大量的节点（或称为“神经元”）相互连接构成。这些节点通常组织成层，包括输入层、隐藏层和输出层。每个神经元可以接收来自前一层的输入，通过某种激活函数处理这些输入，然后将结果传递给下一层的神经元。 神经网络能够通过学习大量的数据来识别模式和特征，这使得它们在图像识别、语音识别、自然语言处理等领域有着广泛的应用。它们也可以用于预测、分类和回归等任务。 训练神经网络通常涉及到一个称为“反向传播”的过程，通过这个过程，网络可以调整其内部参数（权重和偏置），以便更好地完成特定的任务。这个过程通常需要大量的计算资源，并且伴随着梯度下降或其他优化算法来最小化损失函数，从而提高模型的性能。 随着深度学习技术的发展，神经网络变得更加复杂和强大，出现了各种类型的网络结构，比如卷积神经网络（CNNs）用于图像处理，循环神经网络（RNNs）用于序列数据，以及长短期记忆网络（LSTMs）等。
基础会计教学课件第十一章财务会计报告.pptx
08-14
基础会计教学课件第十一章财务会计报告.pptx
基于Android网络聊天软件APP设计与实现.docx
08-14
基于Android网络聊天软件APP设计与实现.docx
基于Android音乐播放器设计与实现2.docx
08-14
基于Android音乐播放器设计与实现2.docx
JavaScript DOM编程实践：数组与条件操作
JavaScript有七种数据类型，包括两种原始类型（数字、字符串、布尔、null、undefined、symbol和BigInt）和一种引用类型（对象）。其中，数组是对象的一种，可以使用方括号进行声明和填充。数组元素可以是变量或甚至...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值