<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<p>我是div本身的标签的额</p>
</div>
</body>
<script>
//创建节点
//语法 :document.createElement('标签名');
//作用 : 创建一个指定标签元素
//返回值 : 一个创建好的元素节点
//创造出来的不会直接在body里面显示还需要在重新 插入
//插入节点
//语法 1: 父节点.appendChild(子节点)
//作用 : 把 子节点 放在 父节点内部,并放在最后
//语法 2 父节点.insertBefore(要插入的节点,哪一子节点前面)
//创建一个 span标签
var span = document.createElement('span')
//向 span 添加 一些文本内容
span.innerText='我是创建出来的 span 标签'
//输出
console.log(span)
//获取div 元素
var divs=document.querySelector('div');
//把创建好的span标签插入div内部
divs.appendChild(span);
//删除节点
//语法 1.: 父节点.removeChild(子节点)
//语法 2 : 节点.remove()删除自己
//替换节点
//语法 : 父节点.replaceChild(换上节点,换下节点) 在父节点内 把换上节点 换成 换下节点
//克隆节点
// 语法 : 节点.cloneNone(是否克隆后带节点(ture或者false))
//获取元素尺寸
//语法 :
// 元素.offsetHeight
// 元素.offsetWidth
//获取 : 元素 内容 + padding +border 区域尺寸
// 语法 :
// 元素.clientHeight
// 元素.clientWidth
// 元素 : 元素 内容 + padding 区域尺寸
</script>
</html>
DOM中节点的基本操作
最新推荐文章于 2024-08-24 11:46:12 发布