JavaScriptDOM获取元素

获取元素

1.通过ID

<div id="times">2022-1-28</div>
		<script>
		var ti = document.getElementById('times');
		 console.log(ti)// <div id="times">2022-1-28</div>
		 console.dir(ti)// div#times
		</script>

2.更具标签名

	<ul>
			<li>hahahah1</li>
		</ul>
		<ul>
			<li>hahahah1</li>
			<li>hahahah1</li>
			<li>hahahah1</li>
			<li>hahahah1</li>
		</ul>
		<ul id="ul">
			<li>hahahah1</li>
			<li>hahahah1</li>
		</ul>
		
		<script>
		var ti = document.getElementById('times');
		 console.log(ti)// <div id="times">2022-1-28</div>
		 console.dir(ti)// div#times
		 var lis = document.getElementsByTagName('li');
		 console.log(lis); //HTMLCollection(4) [li, li, li, li]
		 var uls = document.getElementsByTagName('ul');
		 var li1 = uls[1].getElementsByTagName('li');
		 console.log(li1); // HTMLCollection(4) [li, li, li, li]
		 var ulss = document.getElementById('ul')
		 var li2 = ul.getElementsByTagName('li');
		 console.log(li2); //HTMLCollection(2) [li, li]
		 
		</script>

3.通过h5新增得方法

<ul>
			<li class="qp">hahahah1</li>
			<li class="qp">hahahah2</li>
			<li>hahahah3</li>
			<li>hahahah4</li>
		</ul>
		<script>
		
		var li1 = document.getElementsByClassName('qp');
		console.log(li1); // HTMLCollection(2) [li.qp, li.qp]
		var allLi = document.querySelectorAll('li');
		console.log(allLi); //NodeList(4) [li.qp, li.qp, li, li]
		var firstLi = document.querySelector('li');
		console.log(firstLi); //<li class="qp">hahahah1</li>
		< /script>

4.特殊元素获取

		 var getBody = document.body;
		 console.log(getBody);
		 console.dir(getBody);
		 var getHtml =  document.documentElement;
		 console.log(getHtml);