获取标签
通过id名获取
document.getElementById("id名")
<!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>
</head>
<body>
<div class="box" id="wrap">1</div>
<script>
// 通过id名获取 document.getElementById("id名");
var oDiv = document.getElementById("wrap");
console.log(oDiv);
</script>
</body>
</html>
类名获取
document.getElementsByClassName("类名")
<!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> </head> <body> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <ul class="wrap" id="list"> <li class="box">4</li> <li class="box">5</li> <li class="box">6</li> </ul> <script> // 通过类名获取 // document.getElementsByClassName("class名字") 获取整个文档下的对应标签 var oDiv = document.getElementsByClassName("box"); console.log(oDiv);//HTMLCollection(6) 元素集合 //获取元素集合中的具体某一个标签 语法 元素集合[下标] console.log(oDiv[0]); console.log(oDiv[2]); // 父元素.getElementsByClassName("class名字") 获取父元素下的对应标签 // 先获取父元素 通过class命名 var oUl = document.getElementsByClassName("wrap"); console.log(oUl[0]);//元素中哪怕只有一个也要通过下标的形式获取 // 获取ul下的box var wrap = oUl[0].getElementsByClassName("box"); console.log(wrap); </script> </body> </html>
标签名获取
document.getElementsByTagName("标签")
<!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>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<ul class="" id="">
<li>4</li>
<li>
<div>5</div>
</li>
<li>6</li>
</ul>
<script>
// 通过标签名获取
// document.getElementsByTagName("标签名") 获取整个文档下的对应标签
var oDiv = document.getElementsByTagName("div");
console.log(oDiv);//HTMLCollection(3)
console.log(oDiv[1]);
// 父元素.getElementsByTagName("标签名") 获取整个文档下的对应标签
var oUl = document.getElementsByTagName("ul")[0];
console.log(oUl);
var xDiv = oUl.getElementsByTagName("div");
console.log(xDiv);
</script>
</body>
</html>
鼠标事件
鼠标事件类型
语法
元素.事件类型 = function(){ 要做的事情 }
onclick 鼠标左键单击 ondbclick 鼠标双击 onmouseover/onmouseenter 鼠标移入 onmouseout/onmouseleave 鼠标移出 onmousemove 鼠标移动 onmousedown 鼠标按下 onmouseup 鼠标抬起 oncontextmenu 鼠标右键显示菜单
<!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: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div></div> <script> /* 需求 点击div盒子 输出今天周三 添加事件 元素.事件类型 = function(){ 要做的事情 } // 获取元素 var oDiv = document.getElementsByTagName("div")[0]; console.log(oDiv); // 添加事件 鼠标单击onclick oDiv.onclick = function () { console.log("单击"); } // 鼠标双击 ondbclick oDiv.ondblclick = function () { console.log("双击"); } // 鼠标移入 oDiv.onmouseover = function () { console.log("移入"); } // 鼠标移动 oDiv.onmousemove = function () { console.log("移动"); } // 鼠标移出 oDiv.onmouseout = function () { console.log("移出"); } // 鼠标按下 oDiv.onmousedown = function () { console.log("按下"); } // 鼠标抬起 oDiv.onmouseup = function () { console.log("抬起"); } // 鼠标右键显示菜单 oDiv.oncontextmenu = function () { console.log("右键显示菜单"); } // onmouseenter onmounseleave 移入移除 oDiv.onmouseenter = function () { console.log("移入"); } oDiv.onmounseleave = function () { console.log("移出"); } </script> </body> </html>
操作内容
闭合标签
获取
元素.innerHTML
元素.innerText
设置
元素.innerHTML = 值
元素.innerText = 值
元素.innerHTML 与 元素.innerText区别
相同点:都是重写闭合标签上的内容 不同点:innearHTML可以识别标签 innerText不识别标签
<!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> </head> <body> <div>这是一个div标签</div> <script> var oDiv = document.getElementsByTagName("div")[0]; // 闭合标签的内容 获取与设置 // 获取 元素.innerHTML 元素.innerText console.log(oDiv.innerHTML); console.log(oDiv.innerText); // 设置 元素.innerHTML = 值 元素.innerText = 值 重写之前的内容 oDiv.innerHTML = "这是一个新的文本内容"; oDiv.innerText = '123'; /* innerHTML innerText 的区别 相同点:都是重写闭合标签上的内容 不同点:innearHTML可以识别标签 innerText不识别标签 */ //区别 oDiv.innerHTML = "<em>可识别</em>"//可识别 oDiv.innerText = "<em>不可识别</em>"//不可识别 // 在原有的文本内容上追加内容 字符串数据类型遇到+是拼接 oDiv.innerHTML = oDiv.innerText +"1234567890"; </script> </body> </html>
表单元素
获取
console.log(元素.value)
设置
元素.value = 值
<!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> </head> <body> <form action=""> <input type="text" placeholder="请输入文本" value="文本"> </form> <script> var oInp = document.getElementsByTagName("input")[0]; // 表单元素的设置与获取 // 获取 console.log(oInp.value); // 设置 元素.value = 值 oInp.value = "密码" </script> </body> </html>
操作样式
获取
元素.style.样式名
设置
元素.style.样式名 = 值
<!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> </head> <body> <div style="width:300px;height:300px;background-color:red;"></div> <script> // var oDiv = document.getElementsByTagName("div")[0]; // 获取样式 元素.style.样式名 console.log(oDiv.style.width); console.log(oDiv.style.height); console.log(oDiv.style.backgroundColor); // 设置样式 元素.style.样式名 = 值 console.log(oDiv.style.width = "500px"); console.log(oDiv.style.height = "600px"); console.log(oDiv.style.backgroundColor = "orange"); </script> </body> </html>
操作属性
<!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> </head> <body> <div class="box" id="wrap"></div> <img src="../images/pic1.JPG" alt="狗头"> <input type="text"> <script> var oDiv = document.getElementsByTagName("div")[0]; var oImg = document.getElementsByTagName("img")[0]; var oInput = document.getElementsByTagName("input")[0]; console.log(oDiv,id); console.log(oDiv.className); console.log(oImg.src); console.log(oInput,type); oDiv.className = "box"; oInput.type = "password"; </script> </body> </html>
数据类型
概念
根据数据的特征及功能分为不同的数据类型,不同的数据类型有不同的操作
五种基本数据类型
number 数值类型 1234 string 字符串类型 "文字" '文字' boolean 布尔类型 true false undefined 未定义 null 空对象
特殊数据类型(复杂数据类型 引用数据类型 对象数据类型)
object 对象类型 { "name":"张三" } array 数组类型 [1,2,3,4] function 函数 function(){}
检测数据类型
<!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> </head> <body> <script> var a = 10; // 1.语法1 typeof(要检测的数据) console.log(typeof (a));//number // 2.语法2 typeof 要检测的数据类型 console.log(typeof a);//number console.log("结果", typeof a); console.log(1, typeof a);//1 'number' console.log(typeof "文字");//string console.log(typeof true);//boolean console.log(typeof undefined);//undefined console.log(typeof null);//object console.log(typeof {});//object console.log(typeof [1, 2, 3]);//object console.log(typeof function () { });//function </script> </body> </html>