前端之JavaScript DOM 基本操作( 下 )的基本语法知识
我们常见的Web前端三巨头:HTML、CSS、JS(JavaScript)。
具体请移到【我的专栏】当中的前端——>前端之HTML+CSS;
而在这里我将图文并茂的介绍JS在Vscode中相关功能的运用,希望能够对你们有些帮助。
- 创建节点
- 删除节点
- 替换节点
- 克隆节点
节点操作:
创建 节点
语法: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 基本操作( 下 )的基本语法知识已经写的非常清楚了,具体实战有什么问题的小伙伴可留言或者私信,看到一定帮您解决,我们别的文章再见。