原生获取 DOM 元素的方法

原生获取 DOM 元素的方法

1. 通过 id 获取

<div id="box"> </div>
<script>
    //注意：getElementById( ) 括号里不需要加 "#"
    let box = document.getElementById("box")
	console.log(box); // <div id="box"> </div>
</script>

2.通过 class 获取

<div class="box">我是 box1</div>    
<div class="box">我是 box2</div>    
<script>
    // 注意：1.getElementsByClassName( ) 括号里不需要加 "."
    //      2.以数组的形式返回
    let box = document.getElementsByClassName('box')[0]
	console.log(box);  // <div class="box">我是 box1</div>
    let box = document.getElementsByClassName('box')[1]
    console.log(box);  // <div class="box">我是 box2</div>
</script>

3.通过 name 获取

<div>
    <input type="text" name="box">
</div>    
<script>
    // 注意：只能含 name 属性的元素，才能通过 name 属性获取
    let box = document.getElementsByName('box')
	console.log(box); 
</script>

4.通过 标签名 获取

<ul>
    <li>我是第一个li</li>
	<li>我是第二个li</li>
	<li>我是第三个li</li>
	<li>我是第四个li</li>
</ul>
<script>
    // 注意：以数组的形式返回
    let li = document.getElementsByTagName('li')[1]
	console.log(li);  // <li> 我是第二个li </li>
</script>

5. 通过 querySelector 获取

<div id="box"> </div>
<script>
    // 注意：querySelector( ) 括号中的值是元素选择器，这里使用的是id选择器，所以要加 "#" 
    let box = document.querySelector('#box')
	console.log(box); // <div id="box"> </div>
</script>

6.通过 querySelectorAll 获取

    <ul>
        <li>我是第一个li</li>
        <li>我是第二个li</li>
        <li>我是第三个li</li>
        <li>我是第四个li</li>
    </ul>
    <script>
        // 注意：以数组的形式返回
        let li = document.querySelectorAll('li') //这里是包含了所有的 li
    </script>