<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.redDiv{
width: 100px;
height: 100px;
background-color: red;
}
#secondDiv{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="redDiv"></div>
<div id="secondDiv" name="text "></div>
</body>
<script type="text/javascript">
//通过ID来获取一个元素
var bDiv = document.getElementById("secondDiv");
console.log(bDiv);
bDiv.onclick=function () {
alert("cao");
};
//通过标签名来获取元素
//通过标签名获取到的是一组元素，我们可以通过下标来访问这一组元素中的某一个
var divs =document.getElementsByTagName('div');
console.log(divs);
//通过类名来获取一组元素（哪怕只有一个也是放在数组里，通过下标来访问）
var rDiv = document.getElementsByClassName('redDiv');
console.log(rDiv);
var nDiv=document.getElementsByName('text');
console.log(nDiv);
//通过元素的style属性可以舍子该元素的行间样式。
//style后面的样式以驼峰法来写（第一个单词首字母小写，以后每个单词的首字母大写）
bDiv.style.backgroundColor="yellow";
bDiv.style.marginLeft = 100+"px";
//innerHTML修改标签的内容，直接赋值会导致标签原有的内容被覆盖。
bDiv.innerHTML = "草尼玛";
rDiv[0].style.backgroundColor="purple";
//querySelectorAll（''）可以根据CSS里面的选择器来获取一组元素，可以是后代选择器，群组选择器，nth-chlid（1）等。
//querySelector获取querySelectorAll获取到的第一个元素
var yellowDiv =document.querySelector(".redDiv");
console.log(yellowDiv);
var div1 = document.getElementsByClassName('redDiv');
div1[0].style="";
//等价
var div2 = document.getElementsByClassName("redDiv")[0];
div2.style="";
document.write('123');
document.write('<a href="#">哈哈</a>');
var rrDiv=document.getElementsByClassName("redDiv")[0];
rrDiv.onclick=function () {
// this代表的就是当前点击的元素
this.style.backgroundColor="black";
}
</script>
</html>
网友评论