【前端之JavaScript DOM 基本操作( 下 )的基本语法知识】

前端之JavaScript DOM 基本操作( 下 )的基本语法知识

我们常见的Web前端三巨头：HTML、CSS、JS（JavaScript）。
具体请移到【我的专栏】当中的前端——>前端之HTML+CSS；
而在这里我将图文并茂的介绍JS在Vscode中相关功能的运用，希望能够对你们有些帮助。

1. 创建节点
2. 删除节点
3. 替换节点
4. 克隆节点

节点操作：

创建 节点
语法：document.createElement( ‘标签名称’ ) document.createElement(‘div’)
作用 : 创建一个指定标签元素
返回值 : 一个创建好的元素节点
插入 节点
语法1：父节点.appendChild( 子节点 )
作用 : 把 子节点 放在 父节点 的内部, 并且放在最后的位置

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

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

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

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

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

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

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

替换 节点
语法：父节点.replaceChild( 换上节点, 换下节点 )
作用 : 在父节点内, 使用 换上节点 替换掉 换下节点

<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>

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

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

总结：

获取元素尺寸（宽度和高度）
语法 :
元素.offsetHeight
元素.offsetWidth
获取 : 元素 内容 + padding + border 区域的尺寸
语法 :
元素.clientHeight
元素.clientWidth
获取 : 元素 内容 + padding 区域的尺寸

好了，关于前端之JavaScript DOM 基本操作( 下 )的基本语法知识已经写的非常清楚了，具体实战有什么问题的小伙伴可留言或者私信，看到一定帮您解决，我们别的文章再见。