4.js的dom

1.DOM:document object model的简写,文档对象模型.将整个html页面看作倒挂的树,html页面每个标签看作树的节点对象.
在这里插入图片描述

2.DOM的作用:
2.1:有了DOM模型,我们方便操作节点对象内容
2.2:有了DOM模型,我们方便操作节点对象属性
2.3:有了DOM模型,我们方便操作节点对象样式
2.4:有了DOM模型,我们方便操作节点对象事件

3.获得元素节点对象的方式:
3.1:通过ID名获得一个节点对象:document.getElementById(“id名”)
3.2:通过标签名获得节点对象集合:document.getElementsByTagName(“标签名”)
3.3:通过类名获得节点对象集合:document.getElementsByClassName(“类名”)
3.4:通过name属性名获得节点对象集合:
document.getElementsByName(“name属性名”)
eg://3.1:通过ID名获得一个节点对象
var ob1=document.getElementById(“d2”);
//用对名调用方法输出内容
alert(ob1.innerHTML);

			//3.2:通过标签名获得节点对象集合
			var ob2=document.getElementsByTagName("h2");
			//遍历集合,输出每个标签对象内容
			for(var i=0;i<ob2.length;i++){
				//用对名调用方法输出内容
				alert(ob2[i].innerHTML);
			}
			
			//3.3:通过类名获得节点对象集合
			var ob3=document.getElementsByClassName("c2");
			//遍历集合,输出每个标签对象内容
			for(var i=0;i<ob3.length;i++){
				//用对名调用方法输出内容
				alert(ob3[i].innerHTML);
			}
			
			//3.4:通过name属性名获得节点对象集合
			var ob4=document.getElementsByName("like");
			//遍历集合,输出每个标签对象内容
			for(var i=0;i<ob4.length;i++){
				//用对名调用方法输出内容
				alert(ob4[i].value);
			}

4.DOM节点对象操作:
4.1:DOM操作节点对象的内容:包括节点对象文本内容,子节点标签,及子节点的文本内容
获取节点对象的内容:节点对象.innerHTML
设置节点对象的内容:节点对象.innerHTML=“新值”;
删除节点对象的内容:节点对象.innerHTML="";
eg:function show1(){
//获取节点对象的内容:节点对象.innerHTML
alert(document.getElementById(“d3”).innerHTML);
}
function show2(){
//设置节点对象的内容:节点对象.innerHTML=“新值”;
document.getElementById(“d3”).innerHTML=“我是中国人”;
}
function show3(){
//删除节点对象的内容:节点对象.innerHTML="";
document.getElementById(“d3”).innerHTML="";

		}

4.2:DOM操作节点对象的文本:标签中文本
	获取节点对象的文本:节点对象.innerText
	设置节点对象的文本:节点对象.innerText="新值";
	删除节点对象的文本:节点对象.innerText="";
	eg:function show4(){
			//获取节点对象的文本:节点对象.innerText
			alert(document.getElementById("d3").innerText);
		}
		function show5(){
			//修改节点对象的文本:节点对象.innerText="新值"
			document.getElementById("d3").innerText="我是千锋人";
		}
		function show6(){
			//获取节点对象的文本:节点对象.innerText=""
			document.getElementById("d3").innerText="";
		}

4.3:DOM操作节点对象的属性:
	获取节点对象的属性:节点对象.属性名
	设置节点对象的属性:节点对象.属性名="新值";
	删除节点对象的属性:节点对象.属性名="";
	eg:function show7(){
			//获取节点对象的属性:节点对象.属性
			alert(document.getElementById("d4").src);
		}
		function show8(){
			//修改节点对象的属性:节点对象.属性="新值"
			document.getElementById("d4").src="img/4.jpg";
		}
		function show9(){
			//清空节点对象的属性:节点对象.属性=""
			document.getElementById("d4").src="";
		}

4.4:DOM操作节点对象的样式:节点对象.style.样式名="值"
	eg:function show10(){
			//给节点对象设置样式
			document.getElementById("d3").style.color="red";
			document.getElementById("d3").style.border="solid 1px blue";
		}

5.javaScript中常用事件:
5.1:onclick 鼠标点击某个对象
5.2:onchange 用户改变域的内容
5.3:onload 某个页面或图像被完成加载
5.4:onmouseover鼠标被移到某元素之上
5.5:onmouseout 鼠标从某元素移开
5.6:onfocus元素获得焦点
5.7:onblur 元素失去焦点
5.8:onsubmit 提交按钮被点击

6.事件机制:
6.1:捕获机制:当父元素与子元素具有相同的事件时,父元素的事件触发了,会自动触发子元素相同的事件,这叫捕获机制.(大部分浏览器不支持捕获机制)
6.2:冒泡机制:当父元素与子元素具有相同的事件时,子元素的事件触发了,会自动触发父元素相同的事件,这叫冒泡机制.(大部分浏览器支持冒泡机制)
eg:

冒泡机制

6.3:给元素绑定多个事件:节点对象.addEventListener("事件名",function(){事件操作});
	eg://给节点对象绑定多个事件
		function show(){
			document.getElementById("d8").addEventListener("mouseover",function(){
				alert("11");
			})
			
			document.getElementById("d8").addEventListener("mouseout",function(){
				alert("22");
			})
		}

7.DOM操作节点
7.1:创建节点对象
eg:/第一种:创建节点/
//创建节点对象
var node1=document.createElement(“h1”);
//创建文本
var node1Text=document.createTextNode(“我是千锋人”);
//将文本添加节点中
node1.appendChild(node1Text);
//将节点对象添加到body中
document.getElementById(“bd”).appendChild(node1);

		/*第二种:创建节点*/
			//创建节点对象
			var node2=document.createElement("h2");
			//设置节点的文本内容
			node2.innerHTML="成年人不玩猫抓老鼠的游戏";
			//将节点对象添加到body中
			document.getElementById("bd").appendChild(node2);
			
		/*第三种:创建节点*/
			//获得body中原来的内容
			var bodyContent=document.getElementById("bd").innerHTML;
			//加入内容到body中
			document.getElementById("bd").innerHTML=bodyContent+"<h3>二师兄,抓						个妖精给师傅玩玩</h3>";
			
7.2:添加节点对象:节点对象.appendChild(子节点);向元素添加新的子节点，作为最后一个子节					点。

7.3:修改节点对象:父节点对象.replaceChild(新的子节点,原来的子节点);
	eg:/*替换节点元素*/
		//创建一个新的子节点
		var node3=document.createElement("h4");
		//给节点设置文本
		node3.innerHTML="妖精来了,师傅快跑";
		//声明一个变量存原节点对象
		var oldNode=document.getElementById("d2");
		
		document.getElementById("bd").replaceChild(node3,oldNode);

7.4:复制节点对象:节点对象.cloneNode(true/false);克隆所有属性以及它们的值。
		如果您需要克隆所有后代，请把参数设置 true，否则设置为 false。
	eg://复制节点对象
		var copynode=document.getElementsByTagName("h1")[0].cloneNode(true);
		//将复制节点对象添加body中
		document.getElementById("bd").appendChild(copynode);

7.5:删除节点对象:父节点对象.removeChild(子节点);
	eg://获得要删除节点的父节点
			var parentNode=document.getElementById("bd");
			//获得要删除的节点
			var h2Node=document.getElementsByTagName("h2")[0];
			alert(h2Node.innerHTML);
			//删除节点对象
			parentNode.removeChild(h2Node);

8.前端程序调试
8.1:用代码调试:在认为在问题的代码地方用alert()弹出一个消息;
8.2:用断点调试:在浏览器页面->检查->source->打开要设计的页面->设置断点->重新加载调试页面->运行到断点处进入调试页面->再向下箭头一步一步调试,观察变量,找到出错地方.

9.超链接的问题:

删除选中的商品

おすすめ