JavaScript Dom编程第一天

JavaScript Dom编程

在什么地方编写js代码

先明确Dom的定义:Document Object Model(文本对象模型)

D:文档(html文档,xml文档)O:对象(document对象的属性和方法)M:模型
Dom是针对xml(html)的基于树的api。
helloworld.html

在这里插入代码片<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//1.当整个html文档完全加载成功后触发window.onload事件
	//事件触发时,执行后面function里面的函数体
	window.onload = function(){
		//2.获取所有的button节点,并取得第一个元素
		var btn = document.getElementsByTagName("button")[0];
		//3.为button的onclick事件赋值:当点击button时,执行函数体
		btn.onclick = function(){
			//4.弹出helloworld
			alert("helloworld");
		}		
	}
</script>
</head>
<body>
	<button>ClickMe</button>	
</body>
</html>

然后又有如下的代码,比上面的简单很多,但是这代码有很大的耦合性
js-1.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- HTML和JS代码耦合起来 -->
	<button onclick="alert('helloworld...')">ClickMe</button>	
</body>
</html>

jsp-2解决了上述问题,在整个html文档被加载后,获取节点,但是script节点放在html文档的最后,不符合某些js代码的习惯。
jsp-2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<button>ClickMe</button>	
</body>
</html>
<script type="text/javascript">
	//1.获取button
	var btns = document.getElementsByTagName("button");
	alert(btns.length);
	//2.为button添加onclick响应函数
	btns[0].onclick = function(){
		alert("helloworld!!");
	}
	
</script>

代码自上而下执行,先alert1 再alert2,最后alert3,因为window.onload 事件在整个html文档被加载后触发执行,可以获取文档中的任何节点。
jsp-3.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	alert("1");
	//window.onload 事件在整个html文档被加载后触发执行。
	window.onload = function(){
		alert("3");
	}
	
</script>
</head>
<body>
	<button>ClickMe</button>	
</body>
</html>

<script type="text/javascript">
	alert("2"); 
</script>

如何获取文档中的节点

如何获取元素节点

1.document.getElementById:根据id属性来获取对应的单个节点

2.document.getElementByTagName:根据标签名获取指定节点名字的数组,数组对象length属性可以获取数组的长度。

3.document.getElementByName:根据节点的name属性来获取符合条件的节点数组,但是ie的实现方式和W3C有差别,在html文档中若某节点(li)没有name属性,则ie使用getElementsByName 不能获取到节点数组,但是火狐和chrone可以

4.其他的两个方法,ie根本就不支持,所以不建议使用。

如何获取属性节点(某一元素节点的属性)

读写方式(推荐通过元素节点 . XXX的方式来获取属性值和设置属性值)
1.获取指定的元素节点
var nameNode = document.getElementById(“name”);
2.读取指定属性的值
alert(nameNode.value);
3.设置指定的属性的值
nameNode.value = “sssss”;

如何获取元素节点的子节点(只有元素节点才有子节点!!!)

1.先获取某个节点的所有子节点
var cityNode = document.getElementById(“city”);
2.利用元素节点的childNodes方法可以获取指定元素节点的所有子节点。
但是该方法不实用
alert(cityNode.childNodes.length)
3.获取#city节点的所有li子节点
var cityLiNodes = cityNode.getElementByTagName(“li”);
alert(cityNodes.length);
4.获取制定节点的第一个子节点和最后一个子节点。
alert(cityNode.firstChild);
alert(cityNode.lastChild);

获取文本节点

获取文本节点(文本节点一定是元素节点的子节点)
1.获取文本节点所在的元素节点
2.通过firstchild定位到文本节点
3.通过操作文本节点的nodeValue属性来读写文本节点的值。
alert(bjTextNode.nodeValue);
bjTextNode.nodeValue = “尚硅谷”;
1)nodeName:代表当前节点的名字,只读属性,**如果给定节点是一个文本节点

实验一:实现点击每个li节点,都弹出文本值

<script type="text/javascript">
	window.onload = function(){		//点击每个li节点,都弹出文本值
		//1.获取所有的li节点
		//2.使用for循环进行遍历,得到没一个li节点
		for(var i = 0;i < liNodes.length;i++){
				//3.为每一个li节点添加onclick响应函数
				liNodes[i].onclick = function(){
					//4.响应函数中获取当前节点的文本节点的文本的文本值
					
					//5.alert打印
					//this为正在响应事件的那个节点
					alert(this.firstChild.nodeValue);
					//这里的this可以改成liNodes[i]吗,不行,??????
				}
		}
	}
</script>

?????处的疑问
在你点击的时候,上面那个for循环已经结束了,i此时是8,不会变了,liNodes[8]不指向任何节点。

实验二:实现点击每个li节点,若每个li节点的文本值没有^^开头,加上,有的话就去除

<script type="text/javascript">
	window.onload = function(){		
	
	var str ="^^abc";
	var reg = /^\^{2}/g;			//正则表达式,g表示尽可能多的匹配
	alert(reg.test(str));
	str = str.replace(reg,"");
	
	var str2 = "abc";
	alert(reg.test(str2));
}

1.先使用正则表达式判断是否是^^ 开始
2.调用js中的方法—字符串的replace(reg,str)方法除去指定的字符串。
在这里插入图片描述
法二

<script type="text/javascript">
	window.onload = function(){		
	
	var liNodes = document.getElementsByTagName("li");
	for(var i = 0;i<liNodes.length;i++){
		liNodes[i].onclick = function(){
			var val = this.firstChild.nodeValue;
			
			var reg = /^\^{2}/g;
			if(reg.test(val)){
				val = val.replace(reg,"");
			}else{
				val = "^^" + val;
			}
			this.firstChild.nodeValue = val;
		}
	}
}

节点的属性

关于节店点的属性:nodeType,nodeName,nodeValue
在文档中,任何一个节点都有这三个属性
而id,name,value是具体节点的属性
1.元素节点的三个属性
var bjNode = document.getElemtypeById(“bj”);
alert(bjNode.nodeType);//元素节点:1
alert(bjNode.nodeName);//节点名:li
alert(bjNode.nodeValue);元素节点没有nodeValue 属性值:null
2.属性节点
var nameAttr = document.getElementById(“name”).getAttributeNode(“name”);
alert(bjNode.nodeType);//属性节点:2
alert(bjNode.nodeName);//属性节点的节点名:属性名
alert(bjNode.nodeValue);属性节点的nodeValue 属性值:属性值
3.文本节点
var textNode = bjNode.firstChild;
alert(textNode.nodeType);//文本节点:0
alert(textNode.nodeName);//节点名:#text
alert(textNode.nodeValue);文本节点的nodeValue 属性值:文本值本身

注意:nodeType,nodeName是只读的,而nodeValue是可以被改变的,以上三个属性,只有在文本节点中使用nodeValue读写文本值时使用最多。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值