lovecoding
/
vipAllDay


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">111</div>
    <div class="box1">222</div>
    <button>我是一个按钮</button>
    <ul>
        <li id="aaa">1234567</li>
        <li id="aaa">1234567</li>
        <li id="aaa">1234567</li>
        <li id="aaa">1234567</li>
        <li id="aaa">1234567</li>
        <li id="aaa">1234567</li>
        <li id="aaa">1234567</li>
    </ul>
    <h3 class="hh">我的</h3>
    <span></span>
    <!-- 
        元素
            getElementById
            querySelector
        数组（伪数组）
            getElementsByClassName
            getElementsByTagName
            querySelectorAll
     -->
    <script>
        // 1.获取id选择器  document.getElementById
        var box = document.getElementById("box");
        console.log(box)
        // 2.获取类选择器  document.getElementsByClassName
        var box1 = document.getElementsByClassName("box1");
        console.log(box1[0].innerText,'类');
        // 3.获取标签选择器 document.getElementsByTagName
        var btn = document.getElementsByTagName("button");
        console.log(btn);
        // 4.通过css样式选择器获取全部标签 document.querySelectorAll
        var lis = document.querySelectorAll("ul li");
        console.log(lis);
        // 5.通过css样式选择器获取当前标签 document.querySelector
        var h3 = document.querySelector(".hh");
        console.log(h3);
        var span = document.querySelector("span");
        // var span = document.getElementsByTagName("span");
        console.log(span)
        span.innerText = '啊哈哈哈'
        // innerHTML innerText 区别
    </script>
</body>
</html>