JavaScript Dom编程第一天

最新推荐文章于 2021-08-28 18:51:57 发布

cliff_hannibal

最新推荐文章于 2021-08-28 18:51:57 发布

阅读量115

点赞数

本文链接：https://blog.csdn.net/qq_41667276/article/details/104167851

版权

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 属性值:文本值本身