JavaScript基础语法-DOM，前端小白必知必会

Posted 2021-09-01 若年封尘

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript基础语法-DOM，前端小白必知必会相关的知识，希望对你有一定的参考价值。

DOM重点核心

DOM树：

获取元素

有以下几种方式获取元素，返回的是一个元素对象。

var eleSelect = document.getElementById('selRate');

var lis = document.getElementsByTagName('li');

var nav = document.getElementsByClassName('nav');//H5新增获取元素方式

//返回指定选择器的第一个元素对象
//H5新增获取元素方式
var nav = document.querySelector('#nav');//id名
var li = document.querySelector('li');//标签名
var nav = document.querySelector('.nav');//类名

var lis = document.querySelectorAll('li');//获取所以li

注意：
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用；getElementsByTagName() 方法获得的是一个带有指定标签名的对象的集合，所以需要btn[0]调用；
getElementsByClassName() 方法返回文档中所有指定类名的元素集合；
querySelector() 方法返回指定选择器的第一个元素对象。

<body>
	<textarea name="" id="text" cols="30" rows="10">123</textarea>
	<button>发布</button>
	<ul>
		
	</ul>
	<script>
		//1.获取元素
		var btn = document.getElementsByTagName('button');
		console.log(btn[0]);
		console.log(btn);
		console.log(text);
		var text = document.getElementById('text');
		console.log(text);
	</script>
</body>