根据id获取元素
使用document.getElementById(’【id名】’)
<div id="demo"></div>
<script>
window.onload = function() {
var a = document.getElementById('demo');
console.log(a);
}
</script>
根据标签名获取元素
使用document.getElementsByTagName(’【标签名】’),获得的是一个数组
还可以使用document.getElementsByTagName(’【标签名】)[下标]获得元素
<div id="demo" class="sd" name='demo1'></div>
<script>
window.onload = function() {
var a= document.getElementsByTagName('div');
console.log(a);
var b = document.getElementsByTagName('div')[0];
console.log(b);
}
</script>
根据name获取元素
使用document.getElementsByName(’【name】’),获得的是一个数组
还可以使用document.getElementsByName(’【name】)[下标]获得元素
<div id="demo" class="sd" name='demo1'></div>
<script>
window.onload = function() {
var a = document.getElementsByName('demo1');
console.log(a);
var b = document.getElementsByName('demo1')[0];
console.log(b);
}
</script>
根据类名获取元素
使用document.getEblementsByClassName(’【类名】’),获得的是一个数组
还可以使用document.getElementsByClassName(’【类名】)[下标]获得元素
<div id="demo" class="sd" name='demo1'></div>
<script>
window.onload = function() {
var a = document.getElementsByClassName('sd');
console.log(a);
var b = document.getElementsByClassName('sd')[0];
console.log(b);
}
</script>
根据选择器获取元素
使用document.querySelector(’【类名/id名/元素】’),只返回第一个
而使用document.querySelectorAll(’【类名/id名/元素】)拿到的是全部,是一个列表
<div id="demo" class="sd" name='demo1'></div>
<div id="demo">
<span>我是第二个</span>
</div>
<script>
window.onload = function() {
var a = document.querySelector('div'); //元素 类选择器 id
console.log(a);
var b = document.querySelector('#demo'); //元素 类选择器 id
console.log(b);
var c = document.querySelectorAll('#demo'); //获得列表
console.log(c);
}
</script>