JS节点获取详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_36070347/article/details/84894949

## JavaScript获取节点方法

首先放出document对象中的方法，返回值就是返回的结果，后面有支持的浏览器。
document对象的方法
个人做的测试代码，选取了document.getElementNyTagName,和document.querySelector以及document.querySelectorAll 三种方式

个人实验代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<ul id="11">
		<li>11</li>
		<li>22</li>
		<li>33</li>
	</ul>
	<ul id="22">
		<li>44</li>
		<li>55</li>
		<li>66</li>
	</ul>
</body>
<script>
	var a=document.getElementsByTagName('ul');
	var a1=document.getElementsByTagName('ul')[0];
	var a2=document.getElementsByTagName('ul').children;


	var b=document.getElementsByTagName('li');
	var b1=document.getElementsByTagName('li')[0];
	
	var c=document.querySelector('ul');
	var c1=document.querySelector('ul')[0];
	var c2=document.querySelector('ul').children;
	
	var c3=document.querySelectorAll('ul');
	var c4=document.querySelectorAll('ul')[0];
	var c5=document.querySelectorAll('ul')[0].children;

	// var c=a.childNodes;
	console.log(a);
	console.log(a1);
	console.log(a2);
	console.log('');
	console.log(b);
	console.log(b1);
	console.log('');
	console.log(c);
	console.log(c1);
	console.log(c2);
	console.log(c3);
	console.log(c4);
	console.log(c5);
</script>
</html>

下面是运行的结果：
在这里插入图片描述