首先了解一下,下列的定义方便理解
文档:一个网页可以称为文档
节点:网页中的所有内容都是节点(标签、属性、文本、注释等)
元素:网页中的标签
属性:标签(元素)的属性
- 获取元素的方式
1、根据id获取元素
var div1 = document.getElementById("box1");
2、通过类名获取元素
var p1Arr = document.getElementsByClassName("p1");
console.log(p1Arr instanceof Array);//false
console.log(Array.isArray(p1Arr));//false
console.log(p1Arr.length);
console.log(p1Arr[0]);
console.log(p1Arr[1]);
伪数组定义:
伪数组,就是像数组一样有 length 属性,也有 0、1、2、3 等属性的对象,看起来就像数组一样,但不是数组
常见的参数的参数 arguments,DOM 对象列表(比如通过 document.getElementsByTags 得到的列表)
就是element 后带 s 的单词组合 访问的话需要在后边加中括号加数字: 例 [0]
3、通过标签名获取元素
var tag1 = document.getElementsByTagName("div");
console.log(tag1);
console.log(tag1[0]);
4、通过name名获取元素
var userList = document.getElementsByName("user");
console.log(userList);
for (var i = 0; i < userList.length; i++) {
console.log(userList[i]);
}
- 通过选择器的querySelector获取元素
querySlector():获取指定选择器的第一个元素,参数就是选择器的名称
var div1 = document.querySelector(".box1");
console.log(div1);
var li1 = document.querySelector("ul>li");
console.log(li1);
var user_1 = document.querySelector("#user_1");
console.log(user_1)
- 通过选择器的querySelectorAll获取元素
querySelectorAll():获取指定选择器的所有的元素,参数就是选择器的名称
var boxList = document.querySelectorAll(".box1");
console.log(boxList);
var listLi = document.querySelectorAll("ul li");
console.log(listLi);
- 事件初识
事件:触发-响应机制
(1)、事件三要素
事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)
(2)、事件的基本使用
<script>
var box = document.getElementById('box');
box.onclick = function () {
console.log('代码会在box被点击后执行');
};
</script>
鼠标单击事件:onclick 浏览器加载完成事件:onload
例子:点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: crimson;
}
</style>
</head>
<body>
<button id="ran">点击随机改变颜色</button>
<button id="on">点击开灯</button>
<button id="off">点击关灯</button>
<button id="shu">1-16随机点名</button><span id="zi"></span>
<div id="box"> </div>
<ul>
<li>11111111111</li>
<li>22222222222</li>
<li>33333333333</li>
<li>44444444444</li>
<li>55555555555</li>
</ul>
<button id="huanse">换色</button>
</body>
</html>
<script>
//封装的随机颜色
function raRGb(){
var a= Math.floor(Math.random()*256)
var b= Math.floor(Math.random()*256)
var c= Math.floor(Math.random()*256)
return 'rgb('+a+','+b+','+c+')'
}
console.log(raRGb())
//随机数获取
function Random(n,m){
a=Math.floor(Math.random()*(m-n+1))+n
return a;
}
function rr(){
n=prompt('1')
m=prompt('2')
return Random(Number(n),Number(m))
}
//点击事件们
//随机该背景颜色
document.getElementById('ran').onclick=function(){
document.getElementsByTagName('body')[0].style.backgroundColor=raRGb()
}
//类似:开灯
document.getElementById('on').onclick=function(){
document.getElementsByTagName('body')[0].style.backgroundColor='white'
}
//类似:关灯
document.getElementById('off').onclick=function(){
document.getElementsByTagName('body')[0].style.backgroundColor='black'
}
//盒子的半透明
document.getElementById('box').onclick=function(){
document.getElementById('box').style.opacity=0.5
}
//输入2个数字,获取俩个数字之间的随机一个数
document.getElementById('shu').onclick=function(){
document.getElementById('zi').innerHTML=rr()
}
//li的隔行换色
document.getElementById('huanse').onclick=function(){
var a=document.getElementsByTagName('li')
for (var i=0;i<a.length;i++){
if (i%2==0){
document.getElementsByTagName('li')[i].style.backgroundColor=raRGb()
}
}
}
</script>