前言
在上篇文章中我们讲解了节点与节点之间的关系,如何访问节点以及修改节点样式等操作,但是在实际开发中,这些操作远远不够,我们将会在这一篇文章中继续讲解DOM节点的操作:操作节点的属性、创建和插入节点、删除和替换节点。
操作节点属性
获取节点属性
语法:节点元素.getAttribute("属性名")
🎈经验分享: 使用 getAttribute()
方法获取属性值时,如果属性不存在,则返回null
设置节点属性
语法:节点元素.setAttribute("属性名","属性值")
演示案例:
<body>
<p>
<img id="logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="200" alt="图片加载中"
title="logo" style="">
</p>
<p>
<input type="button" onclick="getImgAttr()" value="获取图片属性">
<input type="button" onclick="changeImgSrc()" value="修改图片">
</p>
<p id="showResult" class="showResult">
</p>
</body>
<script>
//获取节点属性
function getImgAttr() {
//获取id为logo的html元素
var img = document.getElementById("logo");
//获取图片路径
var src_info = img.getAttribute("src");
//获取图片替代文本
var alt_info = img.getAttribute("alt");
//将获取的数据输出到页面中
var result_area = document.getElementById("showResult");
result_area.innerHTML = `src:${src_info}<br>
alt:${alt_info}`;
}
//修改节点属性
function changeImgSrc() {
//获取id为logo的html元素
var img = document.getElementById("logo");
//修改图片路径
img.setAttribute("src", "https://p3.ssl.qhimg.com/t011e94f0b9ed8e66b0.png")
}
</script>
案例执行效果:
创建和插入节点
创建节点:
方法名称 | 描述 |
---|---|
document.createElement(tagName) | 创建一个标签名为tagName的新元素节点 |
element.cloneNode( deep ) | 复制某个指定节点。参数deep为布尔类型。若为true,则同时复制当前节点的所有子节点。若为false,则仅复制当前节点。 |
插入节点:
方法方法 | 描述 |
---|---|
A.appendChild(B) | 把B节点追加至A的子节点列表的末尾 |
parentNode.insertBefore(A, B) | 把A节点插入到B节点之前 |
演示案例:
<body>
<p id="img-area">
<img id="logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="200" alt="图片加载中"
title="logo" style="">
</p>
<p id="attr-area-ext">
<input type="button" onclick="createNewImg()" value="创建一个图片">
<input type="button" onclick="cloneImg()" value="克隆图片">
<input type="button" onclick="cloneContent()" value="克隆图片容器-p">
</p>
</body>
<script>
//创建节点
function createNewImg() {
//创建一个<img>节点
var img = document.createElement("img");
//给创建的节点添加属性
img.setAttribute("src", "https://dlweb.sogoucdn.com/pcsearch/web/index/images/logo_440x140_31de1d2.png?v=d6bfe569")
img.setAttribute("width", "200");
//将创建的节点添加到指定区域
var img_area = document.getElementById("img-area");
img_area.appendChild(img);
}
//克隆节点
function cloneImg() {
//获取需要克隆的元素并执行克隆操作
var cloneImg = document.getElementById("logo").cloneNode(false);
//将创建的节点添加到指定区域
var img_area = document.getElementById("img-area");
img_area.appendChild(cloneImg);
}
//克隆节点(深度克隆演示)
function cloneContent() {
//克隆一个完整的p#img-area元素
var colneP = document.getElementById("img-area").cloneNode(false);
console.log("浅克隆:" , colneP); //输出: <p id="img-area"></p> 此处并没有将其子元素(img)获取到
//使用深度克隆(其子元素也将会被克隆)
colneP = document.getElementById("img-area").cloneNode(true);
console.log("深克隆:" , colneP);
/** 输出: <p id="img-area">
<img id="logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="200" alt="图片加载中" title="logo" style="">
</p>
* 此处能够克隆子元素
*/
}
</script>
案例演示效果:
删除和替换节点
方法名称 | 描述 (node为父级节点) |
---|---|
node.removeChild( child ) | 删除指定的子节点 |
node.replaceChild(newChild,oldChild) | 用其他节点替换指定的子节点 |
演示案例:
<body>
<p id="img-area">
<img id="logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" width="200" alt="图片加载中"
title="logo" style="">
</p>
<p>
<input type="button" onclick="replaceImg()" value="替换新图片">
<input type="button" onclick="delImg()" value="删除图片">
</p>
</body>
<script>
//节点替换
function replaceImg(){
//创建一个新节点
var newImg = document.createElement('img');
newImg.setAttribute("src","https://dlweb.sogoucdn.com/pcsearch/web/index/images/logo_440x140_31de1d2.png?v=d6bfe569")
newImg.setAttribute("width","300")
//获取需要被替换的原始节点
var oldImg = document.getElementById("logo");
//获取需要被替换的原始节点的父级节点
var oldImgParent = document.getElementById("img-area");
//执行替换
oldImgParent.replaceChild(newImg,oldImg);
}
//删除节点
function delImg() {
//获取需要被删除的原始节点的父级节点
var imgParent = document.getElementById("img-area");
//获取需要被删除的原始节点 【注意:在执行节点替换后,由于替换的节点没有ID属性,所以此处获取的父节点下标签名为“img”的第一个子节点元素】
var img = imgParent.getElementsByTagName("img")[0]
//执行删除
imgParent.removeChild(img);
}
</script>
案例演示效果:
获取元素位置
offset属性和client属性
offset概述: offset指偏移,即这个元素在文档中占用的所有显示宽度
常见属性:
属性 | 描述 |
---|---|
offsetLeft | 返回当前元素左边界到它上级元素的左边界的距离,只读属性 |
offsetTop | 返回当前元素上边界到它上级元素的上边界的距离,只读属性 |
offsetParent | 返回元素的偏移容器,即对最近的动态定位的包含元素的引用 |
offsetHeight | 返回元素的高度 |
offsetWidth | 返回元素的宽度 |
演示案例(此案例在:BOM操作-小球滚动案例基础之上完成):
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<title>青鸟技术栈</title>
<style>
#ball {
width: 100px;
height: 100px;
border: 5px solid #999;
border-radius: 50%;
position: absolute;
left: 20px;
top: 80px;
line-height: 100px;
text-align: center;
font-size: 20px;
font-weight: 900;
box-shadow: 0px 0px 10px #999;
}
#showOffsetInfo {
width: 500px;
min-height: 60px;
padding: 10px;
border: 2px solid #999;
margin: 0 auto;
border-radius: 5px;
}
</style>
<script>
window.onload = function () {
var node = document.getElementById("ball");
node.onclick = (function () {
var left = 20;
var time;
return function () {
var txt = this.innerText;
if (txt == "开始") {
time = setInterval(() => {
left++;
//固定调整左边距离
this.style.left = left + "px";
//随机调整顶部距离
this.style.top = (Math.random() * 100 + 120) + "px"
//随机调整宽高
var widthAndHeight = Math.random() * 100 + 80;
this.style.width = widthAndHeight + "px"
this.style.height = widthAndHeight + "px"
this.style.lineHeight = widthAndHeight + "px"
//获取小球移动后的偏移量
var offsetLeft = this.offsetLeft;
var offsetTop = this.offsetTop;
var width = this.offsetWidth;
var height = this.offsetHeight;
var parent = this.offsetParent;
//将获取的信息显示到页面中
var showPanle = document.getElementById("showOffsetInfo");
var showInfo = `距离左边距离:${offsetLeft}
距离顶边距离:${offsetTop}
元素宽度:${width}
元素高度:${height}
父级元素:${parent}`;
showPanle.innerText = showInfo;
}, 500);
this.innerText = "停止"
} else {
clearInterval(time);
this.innerText = "开始"
}
}
})();
}
</script>
</head>
<body>
<p id="ball">开始</p>
<div id="showOffsetInfo"></div>
</body>
</html>
案例展示效果:
client概述: 用于获取指定元素的宽度与高度,与offsetHeight、offsetWidth功能一致,但是获取元素宽度与高度时,不会考虑元素的边框大小。
常见属性:
属性 | 描述 |
---|---|
clientWidth | 返回元素的可见宽度 |
clientHeight | 返回元素的可见高度 |
scroll属性
概述: scroll指滚动,用来描述网页整体与浏览器之间的关系。
应用场景: 在浏览网页时,浏览器的高度与宽度是固定的,但是在我们日常浏览的网页中,页面的高度往往大于浏览器的高度。如果我们需要获取用户在这个页面滚动的距离,则我们可以使用:scrollTop属性以及scrollLeft属性在获取。
属性解释:
属性 | 描述 |
---|---|
scrollTop | 返回匹配元素的滚动条的垂直位置 |
scrollLeft | 返回匹配元素的滚动条的水平位置 |
scrollHeight | 在没有滚动条的情况下,返回元素内容的总高度 |
scrollWidth | 在没有滚动条的情况下,返回元素内容的总宽度 |
语法:
/*标准写法*/
document.documentElement.scrollTop
document.documentElement.scrollLeft
/*chrome浏览器*/
document.body.scrollTop
document.body.scrollLeft
/*兼容写法*/
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
案例演示:
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<title>青鸟技术栈</title>
<style>
* {
margin: 0;
padding: 0;
}
#box-content {
min-height: 5600px;
background-color: aliceblue;
}
#goBank {
width: 44px;
height: 50px;
text-align: center;
background-color: #1d9bce;
color: #fff;
border-radius: 8px;
word-wrap: break-word;
padding-top: 8px;
border: 1px solid #318cc9;
box-shadow: 0px 0px 14px 4px rgb(123 185 227 / 38%);
display: none;
}
</style>
<script>
window.onload = function () {
//获取返回顶部的元素
var goBank = document.getElementById("goBank");
//当窗体发生滚动时,则进入该方法
window.onscroll = function () {
//获取滚动高度
var top = document.documentElement.scrollTop || document.body.scrollTop;
//当滚动距离超过900的时候,则显示返回顶部按钮
if (top >= 900) {
goBank.style.display = "block";
goBank.style.position = "fixed";
goBank.style.right = "0px"
goBank.style.bottom = "50px"
} else {
goBank.style.display = "none";
}
}
//点击返回顶部按钮时,实现返回顶部操作
goBank.onclick = function () {
var top = document.documentElement.scrollTop || document.body.scrollTop;
//使用定时器,使回到顶部变缓
var time = setInterval(() => {
top -= 80
document.documentElement.scrollTop = top;
document.body.scrollTop = top;
if (top <= 0) {
clearInterval(time);
}
}, 1)
}
}
</script>
</head>
<body>
<!-- 模拟页面内容高于5600px -->
<div id="box-content">
</div>
<div id="goBank">
返回顶部
</div>
</body>
</html>
▶️ 开始学习下一章: JavaScript+Jquery+ES6入门到放弃之面向对象