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);
}

        注意:

  1. 插入节点时必须找到要插入位置的父节点。
  2. 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);    //替换节点
}

        注意:

  1. 删除和替换节点时必须找到该节点的父节点。
  2. 删除节点时要加参数用参数.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{
		   		//
		   	}
		   }

本章总结

  1. DOM提供了操作节点属性的方法,包括getAttribute()和setAttribute()方法。
  2. 使用DOM操作节点,包括创建节点丶插入节点丶克隆节点丶删除节点和替换节点。
  3. 使用JavaScript提供的offset丶client和scroll属性可以获取元素位置。

练习小作业:

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

你可能感兴趣的:(javascript,html)