一、增
1. 创建一个节点 createElement、createTextNode
<body>
<div>
<p>
<span>李沁，我喜欢你！</span>
</p>
</div>
<script>
var div = document.querySelector('div');
var span = document.querySelector('span');
// 1. 创建一个 dom 元素
// createELement
// 语法： document.createElement('你要创造的标签')
// 返回值： 就是一个 DOM 元素(就是一个真实的 DOM 元素)
var p = document.createElement('p');
console.log(p);
// createTextNode 创建一个文本节点
// 语法： document.createTextNode('你要创建的文本')
// 返回值： 就是一个文本节点
var text = document.createTextNode('胡莎，很高心认识你！');
p.appendChild(text);//<p>胡莎，很高心认识你！</p>
</script>
</body>2. 向页面中加入一个节点 appendChild、insertBefore
<body>
<div>
<p>
<span>李沁，我喜欢你！</span>
</p>
</div>
<script>
var div = document.querySelector('div');
var span = document.querySelector('span');
// 1. 创建一个 dom 元素
// createELement
// 语法： document.createElement('你要创造的标签')
// 返回值： 就是一个 DOM 元素(就是一个真实的 DOM 元素)
var p = document.createElement('p');
console.log(p);
// createTextNode 创建一个文本节点
// 语法： document.createTextNode('你要创建的文本')
// 返回值： 就是一个文本节点
var text = document.createTextNode('胡莎，很高心认识你！');
p.appendChild(text);//<p>胡莎，很高心认识你！</p>
// 2. 怎么把创建好的 DOM 元素丢到页面的标签中
// appendChild()
// 语法： 父元素.appendChild(你要添加的子元素)
// 是追加一个进去，不会影响之前的内容
div.appendChild(p);
// 输出：
// <div>
// <p>
// <span>李沁，我喜欢你！</span>
// </p>
// <p>胡莎，很高心认识你！</p>
// </div>
// 3. 插入节点还有一个方法，丢到某一个元素的前面
// insertBefore
// 语法： 父节点.insertBefore(要插入的节点，插入在哪一个节点的前面)
// 你要插入哪个元素的里面.insertBefore(插入什么元素，插入哪个元素的前面)
console.log(span);
div.insertBefore(span,p);
</script>
</body>3. 克隆一个节点 cloneNode
<body>
<div>
<p>
<span>李沁，我喜欢你！</span>
</p>
</div>
<script>
var div = document.querySelector('div');
// 1. 克隆一个节点
// cloneNode
// 语法： dom元素.cloneNode() 可以填写一个参数，参数可以写可以不写
// 参数不写默认是 false
// 参数是 false，表示只科隆自己，不克隆子元素
// 参数是 true，连带所有后代元素都克隆了
// 返回值： 就是一个被克隆好的 dom 元素
var ret = div.cloneNode();
console.log(ret); //<div></div>
ret = div.cloneNode(true);
console.log(ret);
// 输出：
// <div>
// <p>
// <span>李沁，我喜欢你！</span>
// </p>
// </div>
</script>
</body>二、删
1. 删除页面中的某一个节点 removeChild
<body>
<div>
<span>李沁，我喜欢你！</span>
<p>胡莎，很高心认识你！</p>
</div>
<script>
var div = document.querySelector('div');
var span = document.querySelector('span');
// 1. 移除一个元素节点
// removeChild()
// 语法： 父元素.removeChild(你要移除的子元素)
div.removeChild(span);
</script>
</body>三、改
1. 替换子节点 replaceChild
<body>
<div>
<span>李沁，我喜欢你！</span>
<p>胡莎，很高心认识你！</p>
</div>
<script>
var div = document.querySelector('div');
var span = document.querySelector('span');
// 1. 替换一个元素
// replaceChild
// 语法： 父元素.replaceChild(要替换进入的元素， 把原先的哪一个元素替换掉)
// 创建一个节点
var p = document.createElement('p');
var text = document.createTextNode('20220108');
p.appendChild(text);
// 父元素.replaceChild(要替换进入的元素， 把原先的哪一个元素替换掉)
div.replaceChild(p,span);
</script>
</body>四、查
1. 获取元素的尺寸
- clientWidth 和 clientHeight： 内容 + paddind 的区域的宽度和高度
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background-color: pink;
margin-left: 50px;
position: relative;
}
.son {
width: 100px;
height: 100px;
padding: 10px;
background-color: #333;
border: 10px solid #823;
position: absolute;
left: 20px;
top: 30px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var son = document.querySelector('.son');
//获取元素的尺寸
//1. clientWidth 和 clientHeight： 内容 + paddind 的区域的宽度和高度
//尺寸：内容宽高 + padding
console.log("clientWidth=", son.clientWidth); //120px
console.log("clientHeight=", son.clientHeight); //120px
</script>
</body>- offsetWidth 和 offsetHeight 内容 + paddind +border 的区域的宽度和高度
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background-color: pink;
margin-left: 50px;
position: relative;
}
.son {
width: 100px;
height: 100px;
padding: 10px;
background-color: #333;
border: 10px solid #823;
position: absolute;
left: 20px;
top: 30px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var son = document.querySelector('.son');
//获取元素的尺寸
// 2. offsetWidth 和 offsetHeight 内容 + paddind +border 的区域的宽度和高度
// 尺寸：内容宽高 + padding + border
console.log("offsetWidth=", son.offsetWidth); //140px
console.log("offsetHeight=", son.offsetHeight); //140px
</script>
</body>- 获取边框的宽度 clientLeft 和 clientTop
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background-color: pink;
margin-left: 50px;
position: relative;
}
.son {
width: 100px;
height: 100px;
padding: 10px;
background-color: #333;
border: 10px solid #823;
position: absolute;
left: 20px;
top: 30px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var son = document.querySelector('.son');
//获取元素的尺寸
// 3. 尺寸：获取边框的宽度
console.log("clientLeft=", son.clientLeft); //10px
console.log("clientTop=", son.clientTop); //10px
</script>
</body>2. 获取元素的偏移量
- offsetLeft 和 offsetTop : 区分有定位和没有定位
- 有定位的时候，获取元素边框外侧到定位父级边框内侧的距离（其实就是我们写的 left 和 top 值）
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 200px;
height: 200px;
background-color: pink;
margin-left: 50px;
position: relative;
}
.son {
width: 100px;
height: 100px;
padding: 10px;
background-color: #333;
border: 10px solid #823;
position: absolute;
left: 20px;
top: 30px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var son = document.querySelector('.son');
// 获取元素的偏移量
// offsetLeft 和 offsetTop
// 区分有定位和没有定位
// 有定位的时候，获取元素边框外侧到定位父级边框内侧的距离（其实就是我们写的 left 和 top 值）
console.log("offsetLeft=", son.offsetLeft); //20px
console.log("offsetTop=", son.offsetTop); //30px
</script>
</body>版权声明：本文为weixin_48475463原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。