前端基础(二十五、DOM节点操作)

最新推荐文章于 2023-09-11 23:04:57 发布
最新推荐文章于 2023-09-11 23:04:57 发布
阅读量271 收藏
点赞数
分类专栏： 前端学习 文章标签： dom 前端 web dom操作
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45689821/article/details/113921609
版权

二十五、DOM节点操作

前言

了解到如何取到父母、兄弟、孩子节点后，我们还可以对DOM节点进行一些操作：

创建节点

document.createElement("标签名")

        var creatDom = document.createElement("div");
        console.log(creatDom);

创建节点
如图，利用 document.createElement("") ，可以创建已存在的标签，如 <div> 标签，也可以创建一个不存在的标签，如 document.createElement("abc") 创建一个 <abc> 标签

插入节点

appendChild(要插入的子节点)：在父节点的最后插入一个新的子节点

<body>
    <ul id="list1">
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>
    <ul id="list2">
        <li>d</li>
        <li>e</li>
        <li>f</li>
    </ul>
    <script>
        var oUl1 = document.querySelector("#list1");
        var oUl2 = document.querySelector("#list2");
        // var creatDom = document.createElement("div");
        // console.log(creatDom);

        var insert1 = oUl1.appendChild(oUl2);
        console.log(insert1);
    </script>
</body>

插入
输出list2的内容，如图，显示list2被插入到list1的后面

insertBefore（要插入的子节点，作为参考的子节点）：将该节点的子节点插入到作为参考的子节点前面

<body>
    <ul id="list1">
        <li id="li1">a</li>
        <li id="li2">b</li>
        <li>c</li>
    </ul>
    <ul id="list2">
        <li>d</li>
        <li>e</li>
        <li>f</li>
    </ul>
    <script>
        var oUl1 = document.querySelector("#list1");
        var oUl2 = document.querySelector("#list2");
        var oLi1 = document.querySelector("#li1");
        var oLi2 = document.querySelector("#li2");

        // var creatDom = document.createElement("div");
        // console.log(creatDom);

        // var insert1 = oUl1.appendChild(oUl2);
        // console.log(insert1);

        var insert2 = oUl1.insertBefore(oLi2,oLi1);
        console.log(insert2);
    </script>
</body>

输出li2的内容，即被插入的节点为li2,将li2这一节点插入到li1前面：
插入2

删除节点

removeChild(要删除的子节点)：删除子节点

<body>
    <ul id="list1">
        <li id="li1">a</li>
        <li id="li2">b</li>
        <li>c</li>
    </ul>
    <ul id="list2">
        <li>d</li>
        <li>e</li>
        <li>f</li>
    </ul>
    <script>
        var oUl1 = document.querySelector("#list1");
        var oUl2 = document.querySelector("#list2");
        var oLi1 = document.querySelector("#li1");
        var oLi2 = document.querySelector("#li2");

        // var creatDom = document.createElement("div");
        // console.log(creatDom);

        // var insert1 = oUl1.appendChild(oUl2);
        // console.log(insert1);

        // var insert2 = oUl1.insertBefore(oLi2,oLi1);
        // console.log(insert2);

        var deleteDom = oUl1.removeChild(oLi1);
        console.log(deleteDom);
    </script>
</body>

输出li1，表示删除的节点为li1:
删除
如要删除自己，可以 父节点.removeChild(父节点)

复制节点

cloneNode()：复制节点

<body>
    <ul id="list1">
        <li id="li1">a</li>
        <li id="li2">b</li>
        <li>c</li>
    </ul>
    <ul id="list2">
        <li>d</li>
        <li>e</li>
        <li>f</li>
    </ul>
    <script>
        var oUl1 = document.querySelector("#list1");
        var oUl2 = document.querySelector("#list2");
        var oLi1 = document.querySelector("#li1");
        var oLi2 = document.querySelector("#li2");

        // var creatDom = document.createElement("div");
        // console.log(creatDom);

        // var insert1 = oUl1.appendChild(oUl2);
        // console.log(insert1);

        // var insert2 = oUl1.insertBefore(oLi2,oLi1);
        // console.log(insert2);

        // var deleteDom = oUl1.removeChild(oLi1);
        // console.log(deleteDom);

        var cloneDom = oLi1.cloneNode();
        console.log(cloneDom);
    </script>

输出li1的标签 ，表示复制的是li1的标签：
复制false
cloneNode()内的参数默认为 false ，即仅克隆标签本身，不复制其内容，当将参数设置为 true 时，复制包含标签本身及其内容：

        var cloneDom = oLi1.cloneNode(true);
        console.log(cloneDom);

复制true





(๑′ᴗ‵๑)爱你~

以上为本萌新个人总结，如有不当之处望指正，有问题可以联系
邮箱：yuna_03@163.com或
QQ：2635591841

更于2021.2.21

小鱼干儿er
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端JS之【DOM的基本操作】
qq_52386225的博客
10-23 365
DOM基本操作的总结
前端基础——DOM
yinyinlee07的博客
02-05 1778
前端基础学习第六天
html delete dom,HTML DOM deleteFromDocument()用法及代码示例
weixin_42512494的博客
07-13 253
deleteFromDocument()方法从文档的DOM树中删除所选文本。用法:selectedText.deleteFromDocument()参数：没有参数例：该示例通过单击一个按钮删除选定的文本。单击按钮后，Window.getSelection()方法将获取所选文本，并在deleteFromDocument()方法的帮助下将其删除。例：GeeksforGeeksGeeksforGeeks...
前端DOM操作精解：基础概念、方法与最佳实践
DevCorner的Pro技术博客
09-11 775
然后，我们要在事件处理函数中获取用户点击的列的宽度，并动态地设置这个列的宽度。通过本文的介绍，我们详细了解了DOM操作的基础知识、常见方法和最佳实践。DOM（Document Object Model）是一种编程接口，它将网页转化为一个结构化的树状图，从而使得开发者可以动态地访问和修改网页的内容、结构和样式。在事件处理函数中，我们首先获取了当前点击的列头元素的宽度，然后动态地设置了这个列的宽度。为了说明DOM操作的最佳实践如何在具体项目中应用，我们将通过一个简单的例子进行演示。二、前端DOM操作最佳实践。
前端（十四）——DOM节点操作手册：你需要了解的一切
杜永康的博客
08-24 2508
DOM（文档对象模型）是一种用于表示和操作HTML、XML和SVG文档的编程接口。它将网页文档解析为一个由节点组成的树形结构，每个节点代表文档中的一个元素、属性、文本或其他内容。DOM是很重要的，因为它让我们能够使用JavaScript等脚本语言直接操控网页内容，实现动态、交互性强的网页效果。通过DOM，我们可以改变网页的样式和结构，响应用户的操作，并且实现数据的动态加载和更新。这样就能够让网页更加生动有趣，提升用户体验。同时，DOM的标准化也保证了开发者在不同浏览器下的兼容性，使得开发更加便捷和可靠。
前端节点原理
weixin_43707560的博客
03-20 1588
1、什么是DOM DOM就是文档对象模型，什么是文档对象模型？这就需要好好说说了。HTML的文档document页面是一切的基础，没有它dom就无从谈起。当创建好一个页面并加载到浏览器时，DOM就悄然而生，它会把网页文档转换为一个文档对象，主要功能是处理网页内容。在这个文档对象里，所有的元素呈现出一种层次结构，就是说除了顶级元素html外，其他所有元素都被包含在另外的元素中。假如有这么一段html...
纯JavaScript操作DOM节点
05-22
纯JavaScript操作DOM节点，通过动态JS创建元素标签，自定义元素的个数，并显示序号和对应的正则表达式验证和图片类型大小验证，，在前端用户姓名和性别多选框的取值已拿到，最后把后面的if else代码放开就可以了，...
前端教程：69 dom 元素节点操作方法
08-30
千锋Web前端教程_69_dom_元素节点操作方法
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
01-19
本文实例讲述了JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支。分享给大家供大家参考，具体如下： 页面加载事件的比较 [removed] jquery 中的 document.ready document.ready = function ...
前端开发+Dom节点+节点判断+节点是否在视图内
最新发布
02-27
前端面试题：判断一个dom节点是否在视图内。通过getBoundingClientRect获取边距判断，通过JavaScript API IntersectionObserver判断两种方式实现
Web前端学习：JavaScript基础 【HTML DOM操作】
Oh_Python的博客
03-15 920
小前奏~ 作者简介：大家好，我是暴揍Python的阿峰，大家可以叫我阿峰哦~ 个人主页：暴揍Python的阿峰博客 本人秉持着认真负责的态度，尽自己最大的努力把每一个知识点讲全讲透。如果文章中有错误的地方，还请各位兄弟姐妹包容并指正。大家一起学习，共同进步~ 如果觉得文章还不错的话，那就~~嘿嘿●ω● 点赞、关注、收藏 支持一下吧~谢谢啦~~（*＾-＾*） 写下一句话，送给各位~ 目录 一、认识DOM（Document） 二、查找HTML元素 1、查找HTML元素的方式...
【前端】JavaScript-节点操作
qq_45764950的博客
11-10 897
一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。它只返回子元素节点，其余节点不返回（重点掌握）。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。利用DOM树可以把节点划分为不同的层次关系，常见的是父子兄层级关系。得到的是一个集合，包含所有的子节点，包含文字节点和元素节点等。得到的是离元素最近的父节点，如果找不到父节点则返回null。实际开发中，节点操作主要操作的是元素节点。封装一个兼容性的函数。
DOM之12种节点
weixin_47075145的博客
07-21 2945
DOM是javascript操作网页的接口，全称为文档对象模型(DocumentObjectModel)。，从而可以使用javascript对网页进行各种操作(比如增删内容)。。DOM的最小组成单位叫做节点(node)，文档的树形结构(DOM树)由12种类型的节点组成。本文将主要说明DOM节点类型。...
前端开发之Dom的简介和Dom操作
imbzz的博客
07-25 1738
Dom的简介,Dom获取元素节点,Dom的获取父字关系节点,DOM节点创建，插入，删除，复制节点,设置节点的属性
【小白学前端】JS：节点操作
qq_43146801的博客
08-30 245
节点操作
dom增加内容和删除内容
weixin_45844109的博客
08-06 282
最近在学习JavaScript，简单记录一下用dom实现增加和删除内容 首先是一种比较麻烦但是却比较容易理解的方法 实现删除的流程如下： 实现增加的流程如下： 运行初始页面如下： 点击delete 下面这是添加功能: 随便在里面写点啥，点submit 代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>05-添加删除记录</title> &l
DOM增删操作（创建删除表格）
u011927449的博客
07-15 364
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script> //创建table function createTable(){ var tab = document.createElement('table'); tab.border = 1; tab.id = 'mtab'; var cap
Javascript：DOM 节点（新建HTML元素/删除HTML元素）
books1958的专栏
02-02 3231
使用DOM可以新建HTML元素，也可以删除已有的HTML元素。
DOM操作
WYF857446152的博客
05-09 3579
DOM操作实现百度换肤的效果
前端获取dom节点后怎么得到此节点的属性和此节点dom绑定的方法名
07-20
在前端中，获取DOM节点后可以使用 JavaScript 来获取节点的属性和绑定的方法名。 要获取节点的属性，可以使用节点对象的属性或方法，例如： 1. 获取节点属性值：可以通过`element.getAttribute('attributeName')`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值