BOM的增删改及复制

最新推荐文章于 2022-04-08 15:37:06 发布
最新推荐文章于 2022-04-08 15:37:06 发布
阅读量640 收藏
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43375983/article/details/121779583
版权
本文详细介绍了使用DOM操作HTML文档的方法，包括如何追加和插入子节点到列表中，删除指定节点，以及替换现有节点。此外，还展示了如何复制节点并将其粘贴到页面的另一个位置。这些基本操作是网页动态更新和交互的关键技术。
摘要由CSDN通过智能技术生成

一、DMO增加节点

Ⅰ、追加子节点

①创建所要追加的文本createTextNode()

②创建节点元素createElement()

③将文本添加至节点中appendChild()

④获取ul对象getElementsByTagName()

⑤将li装进ul中appendChild()

Ⅱ、插入子节点

①创建所要插入的文本createTextNode()

②创建节点元素createElement()

③将文本添加至节点中appendChild()

④获取ul对象getElementsByTagName()

⑤获取元素（需要展示在哪个元素前）getElementById()

⑥插入inserteBefore()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>增加节点</title>

</head>

<body>

<ul>

    <li> 宋江 </li>

    <li> 李逵 </li>

    <li id="ws"> 武松 </li>

    <li> 武大郎 </li>

</ul>

<button οnclick="addNode()"> 追加字节点 </button>

<button οnclick="insertNode()"> 插入字节的 </button>

<script>

    // Ⅰ、追加子节点 appendChild()

    function addNode(){

        // 1、创建文本 createTextNode()

        var textObj = document.createTextNode("西门庆");

        // 2、创建节点元素 createElement()

        var liObj = document.createElement("li");

        // 3、 将创建的文本添加至创建的节点中 appendChild()

        liObj.appendChild(textObj);

        // 4、获取ul对象

        var ulObj = document.getElementsByTagName("ul")[0];

        // 5、 将li装进ul中

        ulObj.appendChild(liObj);

    }

    // Ⅱ、插入字节点 insertBefore()

    function insertNode(){

        // 1、创建文本 createTextNode()

        var textObj = document.createTextNode("鲁智深");

        // 2、创建节点元素 vreateElement()

        var liObj = document.createElement("li");

        // 3、将创建的文本添加至创建的节点中 appendChild()

        liObj.appendChild(textObj);

        // 4、 获取ul对象

        var ulObj = document.getElementsByTagName("ul")[0];

        // 5、 获取武松

        var wsObj = document.getElementById("ws");

        // 6、 插入

        ulObj.insertBefore(liObj, wsObj);

    }

</script>

</body>

</html>

二、DOM删除节点

Ⅰ、删除节点

①获取父节点getElementsByTagName()[]

②获取要删除的节点getElementById()

③ 删除removeChild()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>删除节点</title>

</head>

<body>

<ul>

    <li> 宋江 </li>

    <li id="lk"> 李逵 </li>

    <li> 武松 </li>

    <li> 武大郎 </li>

</ul>

<button οnclick="deleteNode()"> 删除节点 </button>

<script>

    // 删除节点 removeChild()

    function deleteNode() {

        // 1、获取父节点

        var ulObj = document.getElementsByTagName("ul")[0];

        // 2、获取要删除的节点

        var lkObj = document.getElementById("lk");

        // 3、删除

        ulObj.removeChild(lkObj);

    }

</script>

</body>

</html>

三、 修改节点

Ⅰ、修改节点

①创建文本createTextNode()

②创建节点createElement()

③将文本添加至节点appendChild()

④获取替换（修改）的节点getElementById()

⑤获取父节点getElementsByTagName()

⑥替换，前面的参数为新的，后面的参数为旧的replaceChild()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>修改节点</title>

</head>

<body>

<ul>

    <li> 宋江 </li>

    <li id="lk"> 李逵 </li>

    <li> 武松 </li>

    <li> 武大郎 </li>

</ul>

<button οnclick="repNode()"> 修改节点 </button>

<script>

    // 修改节点 replaceChild()

    function repNode(){

        // 1、创建文本 createTextNode()

        var textObj = document.createTextNode("林冲");

        // 2、创建节点

        var liObj = document.createElement("li");

        // 3、 将文本添加至节点

        liObj.appendChild(textObj);

        // 4、获取替换（修改）的节点

        var lkObj = document.getElementById("lk");

        // 5、 获取父节点

        var ulObj = document.getElementsByTagName("ul")[0];

        // 6、 替换，前面参数为新的，后面为旧的

        ulObj.replaceChild(liObj, lkObj);

    }

</script>

</body>

</html>

四、DOM复制节点

Ⅰ、复制节点

①获取ul，getElementsByTagName()

②获取目标（所要存放的位置）getElementById()

③复制cloneNode()

④粘贴appendChild()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>复制节点</title>

    <style>

        #box {

            width:400px;

            height:400px;

            background-color: orange;

        }

    </style>

</head>

<body>

<ul>

    <li> 宋江 </li>

    <li id="lk"> 李逵 </li>

    <li> 武松 </li>

    <li> 武大郎 </li>

</ul>

<div id="box"></div>

<button οnclick="copyNode()"> 复制节点 </button>

<script>

    // 复制节点

    function copyNode(){

        // 1、获取ul

        var ulObj = document.getElementsByTagName("ul")[0];

        // 2、获取目标(所有存放位置)

        var divObj = document.getElementById("box");

        // 3、复制

        var copyObj = ulObj.cloneNode(true);

        // 4、粘贴

        divObj.appendChild(copyObj);

    }

</script>

</body>

</html>

霡霂小雨
关注
SAP CS07复制BOM简介
我小时候很黑的博客
05-15 348
在比较大型的集团公司中会应用到这样一个场景，所有的BOM都是由总部研发统一管控，然后在下发到下属的工厂进行生产，当发生变更的时候BOM也是会随之进行变更。同样的在相同的两家工厂中，使用的是一套的设计方案，并且当物料发起变更的时候BOM也要随之进行变更处理。所以当我们在使用CS07复制BOM的时候，要确定产品是设计生产是否都是一致的。2、生产的产品都是一样的，当变更是两个或者多个工厂的BOM会一起进行变更。无论修改那个工厂的BOM，对应复制的工厂下的BOM都会随之变更而变更。时间：2024-05-15。
BOM 原理及应用-综合文档
05-22
BOM的原理及使用 概念:Browser Object Model 浏览器对象模型 将浏览器的各个组成部分封装成对象。 组成: Window:窗口对象 (重点) Navigator:浏览器对..
SAP BOM的操作
热门推荐
焕然一新
10-22 1万+
这个程序是根据条件把某些工厂的某些物料的某些BOM，Copy到别外的工厂，当目标工厂存在要复制的BOM的时候，用源BOM代替目标BOM，当目标BOM不存在的时候，就根据源BOM创建目标BOM。这个程序用到了BOM的一些常用Function和BAPIBAPI_MATERIAL_BOM_GROUP_CREATECSAP_MAT_BOM_READCSAP_MAT_BOM_OPENCSAP_BOM_ITE
关于电路原理图中的DNP
xqhrs232的专栏
07-13 9930
原文地址::http://zhidao.baidu.com/link?url=AvtPKe5tRG7zSIrH35IqrpFtZUhVqABiO_rxMrLLk3HNclxo-kbF8FOX_I3FitlX5vU86ppahCOEhfh0LbhFEK 相关文章 1、请问电路图上的DNP是什么意思？----http://www.dzsc.com/dzbbs/20060717/200765
day36 DOM节点操作
weixin_46311092的博客
05-18 147
什么是节点 整个文档是一个文档节点 document 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点 节点类型 通过noteType属性可以获取节点的类型 document的节点类型—9 console.log(document.nodeType);//9 标签的节点类型—1 var box1 = document.getElementById("box1"); console.log(box1.nodeType);//1 属性的节点
bom的增删改查的案例
No1banana的博客
04-08 258
效果演示 案例实现过程： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <link rel="stylesheet" type="text/css" href="./添加删除练习.css"/> <script type="text/javascript"> //删除tr
最新版Pixhawk2.1原理图PCB及BOM清单
02-01
综上所述，这个“最新版Pixhawk2.1原理图PCB及BOM清单”提供了全面的硬件设计资源，对于想要自制飞控硬件的爱好者或专业人士来说，是宝贵的参考资料。通过深入学习和分析这些文件，可以进一步理解无人机飞行控制系统...
BOM生产计划分解及需求计算例子
10-28
BOM生产计划分解及需求计算例子 行号 层级 物料编码 品名 数量 单位 1 0 A001 游戏型电脑 1 台 2 .1 B001 游戏主机 1 台 3 ..2 C001 Intel I9 CPU 1 块 4 ..2 C011 金士顿内存 2 条 5 ..2 C021 华硕Z490-A主板 1 块 ...
BOM及MRP资料
08-11
企业级ERP生产BOM及MRP生产工艺流程图。
DOM的增删改查操作
依旧00的专栏
04-01 7163
DOM:Document Object Model(文档对象模型)用来将标记型文档封装成对象，并将标记型文档中的所有的内容(标签，文本，属性等)都封装成对象。是W3C组织推荐的处理可扩展置标语言的标准编程接口。 DOM最常用的操作就是增删改查。 下面通过几个小例子演示一下： css样式 div{ border:#00ccff 1px solid; width
DOM 基础语法
既然选择远方，便只顾风雨兼程！
02-12 2642
文章目录DOM基础语法1、 简介1.1 DOM树2、 获取元素2.1 根据 id 获取2.2 根据标签名获取2.3 根据标签名获取2.4 根据 类名来获取2.5 通过指定选择器获取2.6 获取 body 和 html 元素3、 事件基础3.1 概述3.2 事件执行步骤3.3 常见的鼠标事件4、 操作元素4.1 改变元素内容4.2 改变元素属性4.3 表单元素属性操作4.4 样式属性操作4.4.1 行内样式4.4.2 类名样式4.5 排他思想4.6 表单全选与取消全选4.7 自定义属性操作4.7.1 获取属性
JavaScript之DOM增删改查(重点)
程序猿小九九的博客
02-10 3773
DOM操作：事件、增、删、改查
DOM、BOM 操作超级集合
weixin_30757793的博客
07-18 123
本章内容： 定义 节点类型 节点关系 选择器 样式操作方法style 表格操作方法 表单操作方法 元素节点ELEMENT 属性节点attributes 文本节点TEXT 文档节点 Document 位置操作方法 定时器 弹出框 location 其它 事件操作 实例 定义 文档对象模型（Document Object Model，DOM）是一...
PP实施经验分享（16）——三种BOM物料替代方式
weixin_44485085的博客
01-29 8382
PP实施经验分享（16）——三种BOM物料替代方式 SAP中的替代有三种: 类型 描述 1 A物料也B物料可以互相替代,但是由物料计划部门自由控制使用物料A还是使用物料B 2 A物料也B物料可以互相替代,但是由物料计划部门自由控制使用物料A还是使用物料B 2.在某个产品中,当物料A不够时,才用物料B. 3,当物料A用完后,将永远不再用,而是用物料B取代A. ...
JavaScript: BOM对象 和 DOM 对象的增删改查
潘小蓝的博客
06-26 365
操作BOM 对象 浏览器对象模型: window window 代表浏览器窗口。 window.alert() undefined window.innerHeight 837 Navigator 封装了浏览器的信息. navigator.appName "Netscape" navigator.appVersion "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.
BOM创建修改(CS01,CS02)保存时增强BADI[BOM_UPDATE]
banin4739的博客
08-30 1601
1, BADI ‘BOM_UPDATE’介绍 SE18，查看BADiBOM_UPDATE，Chage_AT_SAVE就是BOM创建和修改保存时触发的方法，也就是CS01，CS02保存时触发 &amp;lt;img class="alignnone size-full wp-image-3982" src="http://www.baidusap.com/wp-conte...
BOM制作系列之二：BOM合并
余心永恒的博客
08-25 8461
上一章提到了BOM的拆分，下面讲讲BOM的合并。 同样的，使用了BOM合并的Tool，如下链接可以下载
操作BOM对象；操作DOM对象（更新；删除；插入节点）
weixin_45964083的博客
05-22 170
操作BOM对象 浏览器介绍 BOM：浏览器对象模型 IE Safari Chrome FireFox 三方 QQ浏览器 360浏览器 window window代表浏览器窗口 window.alert(1) undefined window.innerHeight 258 window.innerWidth 900 window.outerHeight 993 location location代表当前页面的URL信息 host:"www.baidu.com" href:"htt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值