2021/10/18 前端开发之JavaScript+jQuery入门第五章JavaScript DOM应用

最新推荐文章于 2024-03-13 16:05:34 发布

Abcdzzr

最新推荐文章于 2024-03-13 16:05:34 发布

阅读量463

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/Abcdzzr/article/details/120836249

版权

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定位的容器元素。

实现小球移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/练习1.js"></script>
		<style>
			@import url(css/练习1.css);
		</style>
	</head>
	<body>
		<div id="a" onclick="move()">点我移动</div>
	</body>
</html>

	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属性返回元素左边缘与视图之间的距离。

实现网页中吸顶的效果：

<div class="nav" id="nav">
        <div class="temp clearfix">
            <div class="nav-left">
                <ul id="a">
                    <li><a href="">小米商城</a></li>
                    <li><a href="">MIUI</a></li>
                    <li><a href="">IoT</a></li>
                    <li><a href="">云服务</a></li>
                    <li><a href="">金融</a></li>
                    <li><a href="">有品</a></li>
                    <li><a href="">小爱开放平台</a></li>
                    <li><a href="">企业团购</a></li>
                </ul>
            </div>
            <div class="nav-right">
                <a href="">登录</a>
                <a href="">注册</a>
                <a href="">购物车</a>
            </div>
        </div>
    </div>

//因为滚动事件在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属性可以获取元素位置。

练习小作业：

制作论坛发帖页面
制作页面中的漂浮广告
制作带返回顶部功能的页面

Abcdzzr

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021/10/18 前端开发之JavaScript+jQuery入门第五章JavaScript DOM应用

1.操作节点属性 1.1获取节点属性语法：getAttribute("属性名");1.2设置节点属性语法：setAttribute("属性名","属性值");示例：//设置节点属性function changeImage(){ document.getElementById("phoneimg").setAttribute("src","images/pro1.jpg"); document.getElementById(...
复制链接

扫一扫