js中的获取元素的方式
- 通过getElementById的形式获取
- 通过getElementsByClassName形式获取元素
- 通过getElementsByTagName标签选择元素
- 静态获取和动态获取过程
- 通过选择器来获取元素
- js相关的命名规范
提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
通过getElementById的形式获取
getElementById这个就不用多说了,最开始使用的就是这个,也就是需要给标签一个id,然后通过标签选择到对应的对象。因为id是唯一的,所以也获取的这个变量其实也是唯一的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;margin: 10px auto;box-shadow: 0 0 10px 0 deeppink}
p{width: 200px ;height: 200px;background: blue;}
</style>
</head>
<body>
<div class="main">
<p id="id_p">p</p>
</div>
<script>
var id_p = document.getElementById("id_p");
id_p.onclick = function () {
this.style.backgroundColor = "red";
}
</script>
</body>
</html>
最简单的效果
过getElementsByClassName形式获取元素
既然有getElementsById那么与之对应的肯定也有根据className来获取的变量名,那就是cgetElementsById,可能会有点奇怪,就是id是唯一的,但是很多时候,我们的className并不是唯一的啊。那么对应获取到的应该也不是唯一的。是的,通过getElementsByClassName获取到的是一个对象数组,是一个数组,并不是一个唯一的值
var abox = document.getElementsByClassName("box");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: 10px auto}
p{margin: 10px auto;width: 150px;height: 150px;background: greenyellow }
</style>
</head>
<body>
<div class="main">
<p class="class_p">1</p>
<p class="class_p">2</p>
<p class="class_p">3</p>
</div>
<script>
var classes_p = document.getElementsByClassName("class_p");
console.log(classes_p.length);
classes_p[0].onclick = function () {
this.style.color ="red";
}
classes_p[1].onclick = function () {
this.style.backgroundColor ="blue";
}
classes_p[2].onclick = function () {
this.innerText = "换个内容试试";
}
</script>
</body>
</html>
注意:兼容:不兼容IE8以及以下
通过getElementsByTagName标签选择元素
与选择器一样,选择器可以使用标签选择器,那么在js中也是可以通过标签来选择到对应的标签的,它的使用跟getElementsByClassName一样,获取到的是一组数组。
var a_p = document.getElementsByTagName("p");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: 10px auto}
p{margin: 10px auto;width: 150px;height: 150px;background: greenyellow }
</style>
</head>
<body>
<div class="main">
<p >1</p>
<p >2</p>
<p >3</p>
</div>
<script>
<!--直接通过getElementsByTag来获取标签名字-->
var classes_p = document.getElementsByTagName("p");
console.log(classes_p.length);
classes_p[0].onclick = function () {
this.style.color ="red";
}
classes_p[1].onclick = function () {
this.style.backgroundColor ="blue";
}
classes_p[2].onclick = function () {
this.innerText = "换个内容试试";
}
</script>
</body>
</html>
显示效果如下所示:
注意:可以兼容所有浏览器
静态获取和动态获取过程
什么是静态获取过程和动态获取过程???
静态获取过程也就是当我们获取到一个节点之后,它的id改变以后不会影响到这个节点,就好比我们找到这个人,无论它改了什么名字,或者换了什么衣服,其实对我们所认识的这个人都没有任何影响
如:
<p id = "static">静态获取过程</p>
var oStatic = document.getElementById("static");
oStatic.style.color = "red";
oStatic.style.id = "s_static";
ostatic.style.color = "blue";
当id修改了之后,其对象的认知是不会进行改变的,注意为什么是id,因为id它具有唯一性
动态获取过程也就是如果我们每一次去修改其className的时候,这个时候都需要重新去获取一下这个数组,因为数组默认是会改变的。每当我们用到一次类数组的时候都会动态的获取一次
如:
<p class='dynamic'>p1</p>
<p class='dynamic'>p2</p>
<p class='dynamic'>p3</p>
var aDynamic= document.getElementsByClassName('xiao1'); //获取到dynamic类数组
console.log( aDynamic.length ); //先弹出长度 3
aDynamic[0].style.color = 'red'; //在给数组的第0个(p1)字体设置颜色
aDynamic[0].className = 'dynamic_2'; //然后将类数组的第一个的类名改一下,这个时候就只剩下2个dynamic
console.log(aDynamic.length ); //弹出长度,这时候肯定长度为2了
aDynamic[0].style.color = '#cc00ff'; // 这个时候再给数组的第0个添加颜色,添加的就不再是p1了,而是p2
演示代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.clearfix:after{
content: "";
display: block;
clear: both;
}
.fl_l{float: left}
.fl_r{float: right}
.main{width: 1200px;margin: 10px auto;box-shadow: 0 0 10px 0 deeppink}
p{width: 150px;height: 150px;background: greenyellow;margin: 10px}
</style>
</head>
<body>
<div class="main">
<div class="static_content">
<header>static_content</header>
<p id="static_p">static</p>
</div>
<div class="dynamic_content clearfix">
<header>dynamic_content</header>
<p class="dynamic_p fl_l">dynamic_1</p>
<p class="dynamic_p fl_l">dynamic_2</p>
<p class="dynamic_p fl_l">dynamic_3</p>
</div>
</div>
<script>
//静态的获取方法,只要获取了,就不会再改变
var oStatic = document.getElementById("static_p");
oStatic.style.background = "red";
oStatic.id = "static_p_2";
oStatic.style.color = "blue"; //id改变了,但是其依旧能够改变样式
//动态的获取方法,只要每使用一次,就需要动态的获取一次
var aDynamicP = document.getElementsByClassName("dynamic_p");
console.log(aDynamicP.length);
aDynamicP[0].onclick = function () {
aDynamicP[1].className = "dynamic_p_2 fl_l";
console.log(aDynamicP.length);
aDynamicP[1].style.backgroundColor = "blue";
}
</script>
</body>
</html>
显示效果如下所示:
静态的过程就直接改变了。动态的过程在点击第一个p元素的时候,console输出的为2,而不是原来的3,它会动态改变。这儿时候aDynamic中的第二个元素也就是对应的为dynamic3了。所以dynamic3的背景样式发生了改变
注意:getElementById是静态获取的过程,getElementsByClassName与getElementsByTagName都是动态获取的过程,但是一般很少去使用getElementsByTagName来修改。
通过选择器来获取元素
通过querySelector()和querySelectorAll()来进行选择器选取元素。,但是这种是兼容IE8及以上版本
querySelector是获取单个节点,如果选择器是类名或者标签名等,只会获取到一个,(如果您在后面加上下标就会报错,找不到这个元素)
var oBox = document.querySelector("#main.box");
oBox.style.color = "red";
querySelectorAll是获取节点下面所有同一类的标签元素。
var aBox = document.querySelectorAll(".content p");
console.log(aBox.length);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.clearfix:after{
content: "";
display: block;
clear: both;
}
.fl_l{float: left}
.fl_r{float: right}
.main{width: 1200px;margin: 10px auto;box-shadow: 0 0 10px 0 deeppink}
p{width: 150px;height: 150px;background: greenyellow;margin: 10px}
</style>
</head>
<body>
<div class="main">
<div class="qS">
<header>querySelector</header>
<p id="qS_p">querySelector</p>
</div>
<div class="content clearfix">
<header>querySelectorAll</header>
<p class="qSA_p fl_l">querySelectorAll</p>
<p class="qSA_p fl_l">querySelectorAll</p>
<p class="qSA_p fl_l">querySelectorAll</p>
</div>
</div>
<script>
var oP = document.querySelector(".qS #qS_p");
oP.style.color = "red";
var aP = document.querySelectorAll(".content .qSA_p");
console.log(aP.length);
aP[0].style.color = "blue"
aP[1].style.color = "red"
aP[2].style.color = "gold"
</script>
</body>
</html>
显示如下所示:
相对于以上所有的获取方式,这个时候querySelector与querySelectorAll显得更加的灵活一点。
js相关的命名规范
1.s: 表示字符串String
2.b: 表示布尔Boolean
3.a: 表示数组Array
4.o: 表示对象Object
5.fn: 表示函数Function
6.re: 表示正则Regular Expression
欢迎持续访问博客:http://blog.csdn.net/qq_29924041
附上99乘法表代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®"> <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">
<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.main{width: 1000px;margin: 20px auto;box-shadow: 0 0 10px 0 deeppink;text-align: center;border: 1px solid transparent}
.box{width: 800px;height: 600px;box-shadow: 0 0 6px 0 red;margin: 10px auto;border: 1px solid transparent}
.clearfix:after{
content: '';
clear: both;
display: block;
}
.box p{
width: 70px;
height: 40px;
float: left;
border: 1px solid red;
margin: 5px;
font-size: 14px;
line-height: 40px;
padding:0px 2px;
text-align: center;
}
</style>
</head>
<body>
<div class="main">
<div class="box clearfix">
<!--<p>1 * 1 = 1</p>-->
</div>
<div class="box clearfix"></div>
<div class="box clearfix"></div>
<div class="box clearfix"> </div>
</div>
<script>
var aBoxs = document.querySelectorAll(".box");
console.log(aBoxs.length);
// 第一个
for(var i = 1 ;i <= 9 ; i++){
for(var j = 1 ;j <= i; j++){
aBoxs[0].innerHTML += "<p>" + i +" * "+ j +" = "+i*j+"</p>";
}
aBoxs[0].innerHTML+="<br><br><br>";
}
// 第二个
for(var i = 9 ;i >= 1 ; i--){
for(var j = i ;j <= 9; j++){
aBoxs[1].innerHTML += "<p>" + i +" * "+ j +" = "+i*j+"</p>";
}
aBoxs[1].innerHTML+="<br><br><br>";
}
for(var i = 9 ;i >= 1 ; i--){
for(var j = 1 ;j <= i; j++){
aBoxs[3].innerHTML += "<p>" + i +" * "+ j +" = "+i*j+"</p>";
}
aBoxs[3].innerHTML+="<br><br><br>";
}
//第三个
for(var i = 1 ;i <= 9 ; i++){
for(var j = i ;j <= 9; j++){
aBoxs[2].innerHTML += "<p>" + i +" * "+ j +" = "+i*j+"</p>";
}
aBoxs[2].innerHTML+="<br><br><br>";
}
</script>
</body>
</html>