js 的常用选择器
Posted py-小白
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 的常用选择器相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$永远保存学习的心态$</title> </head> <body> <div>我是通过标签获取(紫色)</div> <div id="box">我是通过id获取(橙色)</div> <div class="box1">我是通过class获取(黄色)</div> <form action="" name="box2"> 我是通过name获取(绿色) </form> <div class="box3"> 我是通过querySelector获取(青色) </div> <div class="box4">我通过querySelectorAll获取(蓝色)</div> <script src="common.js"></script> <script> var div = document.getElementsByTagName("div")[0]; //根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 //document.getElementsByTagName("标签名字"); var box = document.getElementById("box"); //根据id属性的值获取元素,返回来的是一个元素对象 //document.getElementById("id属性的值"); var box1 = document.getElementsByClassName("box1")[0]; //根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持) //document.getElementsByName("name属性的值") var box2 = document.getElementsByName("box2")[0]; //根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持) //document.getElementsByClassName("类样式的名字") var box3 = document.querySelector(‘.box3‘); //根据选择器获取元素,返回来的是一个元素对象 (有的浏览器不支持)IE8以上支持 //document.querySelector("选择器的名字");
var box4 = document.querySelectorAll(‘.box4‘)[0]; //根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象 (有的浏览器不支持)IE8以上支持 //document.querySelectorAll("选择器的名字") div.style.color = ‘#8B00FF‘; box.style.color = ‘#ff7f00‘; box1.style.color = ‘#ff0‘; box2.style.color = ‘#00ff00‘; box3.style.color = ‘#0ff‘; box4.style.color = ‘#00f‘; </script> </html> </script> </body> </html>
以上是关于js 的常用选择器的主要内容,如果未能解决你的问题,请参考以下文章