2021/10/18 前端开发之JavaScript+jQuery入门 第五章JavaScript DOM应用
目录
1.操作节点属性
1.1获取节点属性
1.2设置节点属性
2.创建和插入节点
2.1创建节点
2.2插入节点
3.删除和替换节点
3.1删除节点
3.2替换节点
4.获取元素位置
4.1 offset与client
4.2 scroll
本章总结
1.操作节点属性
1.1获取节点属性
语法：
getAttribute("属性名");1.2设置节点属性
语法：
setAttribute("属性名","属性值");示例：
//设置节点属性
function changeImage(){
document.getElementById("phoneimg").setAttribute("src","images/pro1.jpg");
document.getElementById("phoneimg").setAttribute("alt","5G");
}
//获取节点属性
function changeImage(){
var imagesrc=document.getElementById("phoneimg").getAttribute("src");
alert(imagesrc);
}2.创建和插入节点
2.1创建节点
语法：
document.createElement("元素名称");
//示例：创建一个图片标签
document.createElement("img");2.2插入节点
克隆和插入节点
| 名称 | 描述 |
| element.appendChild(childNode) | 为元素添加一个新的子元素(到元素的末尾)追加 |
| element.insertBefore(A,B) | 把A节点插入到B节点之前 指定位置 |
| element.cloneNode(deep) | 克隆某个指定的节点 |
//追加一个节点
var i=4;
function aaa(){
var node=document.createElement("li");
node.innerHTML="第"+i+"个";
document.getElementById("fu").appendChild(node);
i++;
}
//删除一个节点
function del (event) {
//event.target可以获取到事件源
var node=event.target;
node.parentElement.parentElement.removeChild(node.parentElement);
}
//克隆一个节点并追加
function bbb(){
var array=document.getElementsByTagName("li");
var newnode=array[0].cloneNode(true);
document.getElementById("fu").appendChild(newnode);
}注意：
- 插入节点时必须找到要插入位置的父节点。
- cloneNode(deep)中参数deep为布尔类型。若deep的值为true，则递归复制当前节点及该节点的所有子节点及内容；若deep值为false，则只复制当前节点。
3.删除和替换节点
3.1删除节点
语法：
node.removeChild(childNode);示例：
//删除一个节点
function del (event) {
//event.target可以获取到事件源
var node=event.target;
node.parentElement.parentElement.removeChild(node.parentElement);
}3.2替换节点
语法：
node.replaceChild(newnode,oldnode)
//第一个参数为新节点
//第二个参数为要替换的节点示例：
//替换一个节点
function replacePhoneImg(){
var content=document.getElementByClassName("content")[0]; //获取父元素
var phoneImg=document.getElementById("phoneimg"); //获取被替换的元素
var img=document.createElement('img'); //创建要替换的元素
img.setAttribute("src","images/pro1.jpg"); //设置创建好元素的属性
img.setAttribute("alt","8 Plus"); //设置创建好元素的属性
content.replaceChild(img,phoneImg); //替换节点
}注意：
- 删除和替换节点时必须找到该节点的父节点。
- 删除节点时要加参数用参数.target方法可以获取到事件源，动态的删除下标。否则无法删除最后一个。
4.获取元素位置
4.1 offset与client
offset指偏移，即这个元素在文档中占用的所有显示宽度；client指元素本身的可视宽度。offset属性下表所示。
| 属性 | 描述 |
| offsetHeight | 返回元素的高度 |
| offsetwidth | 返回元素的宽度 |
| offsetLeft | 返回元素的水平偏移位置(x轴) |
| offsetTop | 返回元素的垂直偏移位置(y轴) |
| offsetParent | 返回元素的偏移容器 |
为了更直观地理解offset属性，下图对offset的各个属性进行了标记。
由上图可知：
- offsetwidth与offsetHeight属性返回元素的宽度和高度，指元素自身的绝对宽度，不包括因overflow属性而未显示的部分，即由边框宽度+内边距+元素内容构成。
- offsetLeft属性返回当前元素左边界到它上级元素的左边界的距离。
- offsetTop属性返回当前元素上边界到它上级元素的上边界的距离。
- offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent属性父级元素中最近的元素(在包含层次中最靠近的)，并且是已进行过CSS定位的容器元素。
实现小球移动
var time; //定时器
var flag=false; //表示停止
var node; //获得小球
function move(){
if(!flag){
flag=true;
time= setInterval(step,10);
node.innerHTML="单击停止";
}else{
flag=false;
stop();
node.innerHTML="单击移动";
}
}
var num=1;
function step(){
node=document.getElementById("a");
num++;
node.style.left=num+'px';
}
function stop () {
clearInterval(time);
}通过offsetwidth和offsetHeight属性可以获得元素的绝对宽度和高度，但如果仅想得到元素的可见宽度和高度，则需要使用JavaScript提供的clientWidth和clientHeight属性，语法格式如下。
element.clientWidth; //获取元素的可见宽度，即元素宽度+内边距
element.clientHeight; //获取元素的可见高度，即元素高度+内边距4.2 scroll
scroll指滚动，用来描述网页整体与浏览器之间的关系。首先浏览器的高度是固定的，但在日常开发中，页面的高度一般远远大于浏览器的高度。这时如果想要获取滚动条滚动的距离，就可以使用JavaScript中提供的scrollLeft与scrollTop属性进行获取，语法格式如下。
element.scrollTop; //返回元素上边缘与视图之间的距离
element.scrollLeft; //返回元素左边缘与视图之间的距离- scrollHeight属性在没有滚动条的情况下，返回元素内容的总高度。
- scrollWidth属性在没有滚动条的情况下，返回元素内容的总宽度。
- scrollTop属性返回元素上边缘与视图之间的距离。
- scrollLeft属性返回元素左边缘与视图之间的距离。
实现网页中吸顶的效果：
//因为滚动事件在HTML中找不到标签去加事件
//获取滚动事件
window.onscroll=function() {
//输出到控制台
console.log(document.documentElement.scrollTop);
var node=document.getElementById("nav");
if(document.documentElement.scrollTop>node.offsetTop){
node.style.position="fixed"; //设置为固定定位
node.style.top="0px"; //设置上边距为0
node.style.marginTop="0"; //设置上外边距为0
node.style.width="100%"; //设置定位后的宽度为100%
}else{
//
}
}本章总结
- DOM提供了操作节点属性的方法，包括getAttribute()和setAttribute()方法。
- 使用DOM操作节点，包括创建节点丶插入节点丶克隆节点丶删除节点和替换节点。
- 使用JavaScript提供的offset丶client和scroll属性可以获取元素位置。
练习小作业：
- 制作论坛发帖页面
- 制作页面中的漂浮广告
- 制作带返回顶部功能的页面