JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三）

已于 2022-03-05 11:27:13 修改
阅读量401 收藏 1
点赞数
文章标签： javascript 学习 前端
于 2022-03-05 11:20:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43969648/article/details/123290411
版权

文章目录

JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三）

一、节点操作

1. 创建节点

创建一个页面中没有的节点（无中生有）
语法：document.createElement(‘标签名称’)
作用：创建一个指定标签元素
返回值：一个创建好的元素节点

var div = document.createElement('div')
console.log(div)

2. 插入节点

创建一个节点，插入到一个已经存在的结构内
语法1：父节点.appendChild(子节点)
作用：把 子节点 放在 父节点 的内部，并且放在最后的位置

<body>
    <div>
        <p>
            我是div标签内部的p标签
        </p>
    </div>
    
	<script>
	    //创建一个span 标签
	    var span = document.createElement('span')
	    //向 span 内部添加一些文本内容
	    span.innerText = '我是创建出来的 span标签 '
	    //输出
	    console.log(span)
	    //获取页面上的div元素
	    var div = document.querySelector('div')
	    //把创建的span 标签插入到div 内部
	    div.appendChild(span)
	</script>
</body>

语法2：父节点.insertBefore(要插入的子节点，哪一个子节点的前面)
作用：把 子节点 放在 父节点 的内部，并且放在制定某一个子节点的前面。

<body>
    <div>
        <p>
            我是div标签内部的p标签
        </p>
    </div>
    
    <script>
        //创建一个span 标签
        var span = document.createElement('span')
        //向 span 内部添加一些文本内容
        span.innerText = '我是创建出来的 span标签 '
        //输出
        console.log(span)
    
        //获取页面上的div元素
        var div = document.querySelector('div')
        //获取到div 内部的p标签
        var p = document.querySelector('p')
        //把创建的span 标签插入到div 内部,bing并且放在p标签的前面
        div.insertBefore(span,p)
    </script>
</body>

3. 删除节点

语法1：父节点.removeChild(子节点)
作用：从父节点 内删除某一个 子节点

<body>
    <div>
        <p>我是div标签内部的p标签</p>
        <span>我是div 内部的span 标签</span>
    </div>

    <script>
        //获取页面上的div元素
        var div = document.querySelector('div')
        //获取到div 内部的p标签
        var p = document.querySelector('p')
        //从div 内删除p标签
        div.removeChild(p)
    </script>
</body>

语法2：节点.remove()
作用： 把自己 直接删除

<body>
    <div>
        <p>我是div标签内部的p标签</p>
        <span>我是div 内部的span 标签</span>
    </div>

    <script>
        //获取到div 元素
        var div = document.querySelector('div')
        //删除
        div.remove()
    </script>

4. 替换节点

语法：父节点.replaceChild(换上节点，换下节点)
作用：在父节点内，使用换上节点 替换到 换下节点

<body>
    <div>
        <p>我是 div 内部 p 标签</p>
        <span>我是div 内的span标签</span>
        <p> 我是div内的p标签 </p>
    </div>

    <script>
        //创建一个i标签
        var i = document.createElement('i')
        //向i标签内添加一些文本
        i.innerText = '我是创建出来的 i 标签'
        //获取到 div 元素
        var div = document.querySelector('div')
        // 获取到span元素
        var span = document.querySelector('span')
        //使用创建的 i 标签去替换div 内本身的span 标签
        div.replaceChild(i, span)
    </script>
</body>

5. 克隆节点

语法：节点.cloneNode(是否克隆后代节点)
作用：把该节点 复制 一份一模一样的内容
返回值：克隆好的节点

<body>
    <div>
        <p>我是 div 内部 p 标签</p>
    </div>

    <script>
        //获取div元素
        var div = document.querySelector('div')
        //克隆一个div 元素，不克隆后代元素
        var clone1 = div.cloneNode(false)
        //克隆一个div 元素，克隆后代元素
        var clone2 = div.cloneNode(true)

        //输出
        console.log('不可隆后代节点：',clone1)
        console.log('可隆后代节点：',clone2)
    </script>
</body>

二、获取元素的尺寸

语法1：元素.offsetHeight && 元素.offsetWidth
获取：元素内容 + padding + border 区域的尺寸
语法2：元素.clientHeight && 元素.clientWight
获取： 元素内容 + padding 区域的尺寸
语法1与语法2的区别在于是否加上 border 区域的尺寸

总结

一、节点操作

1. 创建节点

语法：document.createElement(‘标签名称’)

2. 插入节点

语法1：父节点.appendChild(子节点)
语法2：父节点.insertBefore(要插入的子节点，哪一个子节点的前面)

3. 删除节点

语法1：父节点.removeChild(子节点)
语法2：节点.remove()

4. 替换节点

语法：父节点.replaceChild(换上节点，换下节点)

5. 克隆节点

语法：节点.cloneNode(是否克隆后代节点)

二、获取元素的尺寸

语法1：元素.offsetHeight && 元素.offsetWidth
语法2：元素.clientHeight && 元素.clientWight

文章参考视频：b站千锋前端学习营：千锋前端JavaScript全套教程_JS零基础完美入门到项目实战https://www.bilibili.com/video/BV1W54y1J7Ed?p=35&share_source=copy_web

小张小张啊
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM创建元素节点.获取节点
weixin_66171880的博客
02-02 1939
1.每点击一下去创建一个节点元素：案例如下 <div id="wrap"></div> <script> let oWrap = document.querySelector("#wrap"); // 每在页面上点1下，都在wrap内生成一个 div，每个div的背景色都是随机的 // wrap里每个div节点，都能绑定1个点击事件，点击时，可以打印自身 document.documentElem..
【转】JS写图层方法.document.createElement("div")
jinhua1314的专栏
03-07 2087
var docEle = function() { return document.getElementById(arguments[0]) || false; } function openNewDiv(_id) { var m = "mask"; if (docEle(_id)) document.removeChild(docEle(_id)); if (docEle(m)) documen
简化document.createElement("div")动态生成层方法
weixin_30535843的博客
09-07 819
我们在WEB开发时，很多时候往往需要我们 JavaScript 来动态建立 html 元素，动态的设置相关的属性。比方说我们想要建立一個 div 层，则可以使用以下代码实现。 一.直接建立function Button1_onclick() //直接采用代码建立一个DIV{ var newElement = document.createElement('div'); ...
Javascript 创建新节点 document.createElement()
最新发布
大剑师兰特的GIS世界
05-28 1229
在JavaScript中，创建新节点是DOM操作的重要组成部分，它允许你动态地向文档中添加内容。以下是创建新节点的详细说明、示例代码、注意事项以及常见应用场景。
常见的原生javascript DOM操作
weixin_34121304的博客
12-01 372
打个招聘广告： 杭州 阿里巴巴B2B 招前端（想去西溪的也可帮推荐），比较缺人，机会多多！广告位长期有效，有兴趣简历我邮箱：854936875@qq.com 看图识文（取自 寒冬winter 的微博）。文章里引用了MDN和《javascript高级程序设计3》里的知识。如有不对的地方，敬请指出。 1.创建元素 创建元素：document....
JS 在div中添加元素：使用document.createElement（）
weixin_50784508的博客
06-09 1890
【代码】JS 在div中添加元素：使用document.createElement（）
JS DOM基本操作之创建、插入、删除、替换节点操作
qq_45560350的博客
08-23 4904
创建dom节点（并未添加到页面中，一般配合插入方法使用） document.createElement(); 创建一个元素节点 var div = document.createElement('div'); 可以看到虽然创建了div节点，但页面中并没有显示 因为这里只是创建div节点，并没有把它添加到页面中 document.createTextNode(); 创建一个文本节点 var text = document.createTextNode('殷志源'); 没有添加到页面中 do
JavaScript学习笔记之DOM基础操作实例小结
12-08
在本文中，我们将深入探讨JavaScript DOM基础操作，主要包括子节点、节点类型、元素节点以及父节点的处理。 一、子节点操作 1. 获取子节点数量 在实例01中，我们通过`childNodes.length`获取了`<ul id="ul1">`元素...
JavaScript学习笔记之DOM操作实例分析
12-12
本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考，具体如下： 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建对象...
javascript 学习笔记（一）DOM基本操作
01-21
html部分代码： 当点击show按钮时，触发showValue函数，将input value的值动态添加到id=”text”的元素节点中！ 代码如下: <p> <...</span> </p> ”text”></p> javascript 部分代码： 页面加载时，使inpu
JS写图层方法.document.createElement(div).htm
01-21
JS写图层方法.document.createElement(div).
简化document.createElement("div")动态生成层方法 (转）
weixin_30252155的博客
09-20 131
我们在WEB开发时，很多时候往往需要我们 JavaScript 来动态建立 html 元素，动态的设置相关的属性。比方说我们想要建立一個 div 层，则可以使用以下代码实现。 一.直接建立 functionButton1_onclick()//直接采用代码建立一个DIV { varnewElement=document.createElement('div'); ...
JS中document.createElement()的用法
热门推荐
【Erica W】有问题，就问神奇海螺吧！
11-12 1万+
分析代码时，发现自己的盲点——document.createElement()，冲浪一番，总结了点经验。 document.createElement()是在对象中**创建一个对象**，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插
javascript 中三种动态创建元素的区别以及效率对比
阿牛的博客
05-09 1056
javascript 中动态创建元素的方法一共有三种，这里简单介绍一下，并通过小案例来对比element.innerHTML和document.createElement ()创建元素效率那个快。
document.createElement()的用法
aeon521730041的博客
09-01 2844
分析代码时，发现自己的盲点——document.createElement()，冲浪一番，总结了点经验。 document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore()...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值