JS--DOM_js document第几个子元素-CSDN博客

本文链接：https://blog.csdn.net/qq_43641432/article/details/103245947

Document Object Model 文档对象模型

文档的加载

DOM查询

获取元素节点的子节点（通过元素节点调用的）

获取父节点和兄弟节点

DOM其他方法

Document Object Model 文档对象模型

Dom通过Js操作网页的

节点Node：网页中的每一个部分都是一个节点。

常用的节点：

文档节点
元素节点：标签
属性节点：元素的属性
文本节点：标签中的文本内容。

	<body>
		<button id  = "btn">按钮</button>
		
		<!--文档标签 文档节点代表整个网页-->
		<script type="text/javascript">
			//console.log(document);/*HTMLDocument*/
			
			//获取button对象
			var btn  = document.getElementById("btn");
			console.log(btn);
			
			//修改按钮里面文字
			btn.innerHTML = "改过的btn";
			console.log();
		</script>
	</body>

文档的加载

浏览器在加载一个页面的时，按照自上而下顺序加载的。

onload，一张页面或者一个图像完成加载之后才触发。

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			//为windows绑定一个onload事件。在页面加载完成之后执行，确保Demo执行的时候，所有的Dom对象已经加载完毕了。
			
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(){
				alert("Hello！");};
			};     
		</script>
	</head>
	<body>
		<button id= "btn">按钮</button>
	</body>
</html>

DOM查询

innnerHTML 通过这个属性可以获取到元素内部的HTMlDemo，

对于自结束标签，没有内部，innerHTMl无意义。

根据id
根据标签名
根据名字

		<script type="text/javascript">
			window.onload = function(){
				//为1按钮绑定一个单级响应函数
				//ID
				var btn1 = document.getElementById("1");
				btn1.onclick = function(){
					//查找节点
					var bj = document.getElementById("bj");
					console.log(bj.innerHTML);//获取元素内部的Html属性
				};
				//为2按钮绑定一个双击级响应函数-
				//标签名--返回一个类数组对象
				var btn2 = document.getElementById("2");
				btn2.ondblclick = function(){
					var lis = document.getElementsByTagName("p");
					for(var i = 0;i<lis.length;i++){
						console.log(lis[i].innerHTML);
					}
				};
				为3按钮绑定一个双击级响应函数-
				
				var btn3 = document.getElementById("3");
				btn3.ondblclick = function(){
					var gender = document.getElementsByName("gender");
					for(var i = 0;i<gender.length;i++){
						console.log(gender[i].value);//读取class时候要用className
					};
				};
			};
		</script>

获取元素节点的子节点（通过元素节点调用的）

getElementsByTagName（）---》返回当前节点的指定标签名后代节点。

childNodes ---》表示当前节点的所有子节点-----》会获取包括文本节点（标签间的空白也会作为子节点）在在内的所有子节点

firstChild----》表示当前节点的第一个节点

lastChild----》表示当前节点的最后一个节点

				var btn4 = document.getElementById("4");
				btn4.onclick = function(){
					//查找city所有的子节点
					var city = document.getElementById("city");
					var lis  = city.getElementsByTagName("li");
					
					for(var i = 0;i<lis.length;i++){
						console.log(lis[i].innerHTML);
					}
				};
				var btn5 = document.getElementById("5");
				btn5.onclick = function(){
					
					var city = document.getElementById("city");
					//返回city的所有子节点
					
					var cns = city.childNodes;
					/*alert(cns.length);*/
					
					var cns2 = city.children;
					//children可以获取当前所有元素的子元素
					alert(cns[0].innerHTML);
				};
				
				var btn6 = document.getElementById("6");
				btn6.onclick = function(){
					//获取id为phone元素
					
					var phone = document.getElementById("phone");
					
					var fir = phone.firstChild;//获取当前元素的第一个子节点（包括空白
					
					//获取当前元素的第一个子元素（不兼容ie8）
					fir = phone.firstElementChild;
					
				};
			};

获取父节点和兄弟节点

				myclick("7",function(){
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					var pn = bj.parentNode;//获取#bj的父节点
					alert(pn.innerText);//只有文本，没有标签
				});
				myclick("8",function(){
					//返回前一个兄弟节点
					var and = document.getElementById("android");
					/*console.log(and);*/
					var ps = and.previousSibling;
					var pe = and.previousElementSibling;//获取前一个兄弟元素，不包括空白文本
					console.log(pe.innerHTML);
					
				});
				myclick("9",function(){
					//获取id为username的value值---改值
					var user = document.getElementById("username");
					var value = user.value;
					var value = "jint";
					console.log(value);
				});
				myclick("10",function(){
					//获取id为bj的文本值
					
				});

DOM其他方法

<script type="text/javascript">
			
			window.onload  =  function(){
				//获取body属性
				/*var body = document.getElementsByTagName("body")[0];
				console.log(body);*/
				//直接用这个方法
				var body = document.body;
				var de = document.documentElement;//HTML根标签
				var all = document.all;//页面中所有的元素
				all = document.getElementsByTagName("*");//页面中所有的元素
				
				//根据元素的class属性值查询
				//ie9以及以上的额浏览器支持
				var box1 = document.getElementsByClassName("box1");
				console.log(box1.length);
				
				var divs = document.getElementsByTagName("div");
				console.log();
				
				//需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素
				var div = document.querySelector(".box1 div");//可以在ie8中使用
				console.log(div.innerHTML);
				//该方法只返回一个，如果满足条件的元素有多个，
				
				//返回符合条件的额所有的元素--返回数组
				var div = document.querySelectorAll(".box1");
				
				
				
				
			}