Dom(四)——获取元素的方法通过id获取元素getElementById通过标签名获取元素getElementsByT

通过id获取元素getElementById

var oDiv = document.getElementById('content');

通过标签名获取元素getElementsByTagName，返回的是一个类数组，只有length这一个属性

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

如果想获取标签名下第几个元素，后面必须[number]

<body>
    <div></div>
    <script>
    var oDiv = document.getElementsByTagName("div")[0];
        console.log(oDiv)
    </script>
</body>

通过name获取元素 getElementsByName ，返回类数组，只有length属性

<body>
    <div></div>
    <input type="radio" name = "sex">女
    <input type="radio" name= "sex" >男
    <script>
    var oDiv = document.getElementsByTagName("div")[0];
        console.log(oDiv)
    var xingbie = document.getElementsByName("sex")
    console.log(xingbie)
    </script>
</body>

querySelector() 方法仅仅返回匹配指定选择器的第一个元素

<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
   </ul>
   <script>
       var one = document.querySelector("li");
       console.log(one)
   </script>
</body>

querySelectorAll()返回匹配指定选择器下所有的元素

<body>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
   </ul>
   <script>
       var one = document.querySelector("li");
       console.log(one)
       var two = document.querySelectorAll("li")
       console.log(two)
   </script>
</body>