1 - 获取元素的选择器API
2018-11-12 本文已影响0人
前端_冷羽
英语单词
advanced 高级
js组成
- DOM
- BOM
- ECMAScript
-
DOM: 操作HTML, CSS的API
-
BOM: 操作浏览器的API
-
ECMAScript: 是一套标准, 描述了基本语法和数据类型
id获取元素
document.getElementById('id名');
获取元素的属性和设置元素的属性
<body>
<div id="div1" class="big">myDiv</div>
</body>
<script>
var div = document.getElementById("div1"); // 根据id获取div
alert(div.id); // 获取div的id值
div.name = "show"; // 设置div的属性
div.style.color = "blue";
div.style.backgroundColor = "yellow"; // 在CSS里面是 - 分割属性, js是驼峰命名, zIndex, fontSize...
div.className += "bg-black";
</script>
根据标签名获取元素
<body>
<div>myDiv1</div>
<div>myDiv2</div>
<div>myDiv3</div>
</body>
<script>
// API: document.getElementsByTagName('标签名');
var divArr = document.getElementsByTagName('div'); // 获取全部div标签, 返回一个伪数组
console.log(divArr[0].innerText); // myDiv1 innerText就是获取元素的文本
console.log(divArr[1].innerText); // myDiv2
// 伪数组: 有数组的长度, 下标, 但是没有数组的方法, 比如sort,reverse...
</script>
根据类名获取元素
<body>
<div class="myDiv">myDiv1</div>
<div class="myDiv">myDiv2</div>
<div class="myDiv">myDiv3</div>
</body>
<script>
// API: document.getElementsByClassName('类名');
// 兼容性: IE8及以下不支持
var divArr = document.getElementsByClassName('myDiv'); // 获取全部类名myDiv, 返回一个伪数组
console.log(divArr[0].innerText); // myDiv1 innerText就是获取元素的文本
console.log(divArr[1].innerText); // myDiv2
</script>
根据name属性获取元素
<body>
<div name="myDiv">myDiv1</div>
<div name="myDiv">myDiv2</div>
<div name="myDiv">myDiv3</div>
</body>
<script>
// API: document.getElementsName('类名');
// 兼容性: IE8及以下不支持
var divArr = document.getElementsByName('myDiv'); // 获取全部类名myDiv, 返回一个伪数组
console.log(divArr[0].innerText); // myDiv1 innerText就是获取元素的文本
console.log(divArr[1].innerText); // myDiv2
</script>
根据选择器获取元素
<body>
<div class="myDiv" id="div1">myDiv1</div>
<div class="myDiv">myDiv2</div>
<div class="myDiv" id="div2">myDiv3</div>
</body>
<script>
// 选择器: CSS选择器
// API: document.querySelector('选择器');
// API: document.querySelectorAll('选择器'); // 这里多了All, 返回的是伪数组, 如果是类名
var myDiv = document.querySelector('#div1'); // 获取id为div1的元素
var divArr = document.querySelectorAll(".myDiv"); // 因为类名相同有很多, 用这个可以获取全部
var myDiv2 = document.querySelector('.myDiv'); // 如果用的不是All的API, 那么只会返回第一个类名为myDiv
console.log(myDiv2.innerText); // myDiv1
</script>
事件简介
元素.事件 = 结果
<body>
<div id="div1">myDiv1</div>
</body>
<script>
// 根据id获取div
var myDiv = document.getElementById("div1");
// 元素 div
// 事件 onclick 鼠标单击, 还有很多事件, 例如: onmouseover(鼠标移入), onmouseout(鼠标移出)...
myDiv.onclick = function() {
// 结果: 触发了事件要有什么改变, 这里我就把div字体颜色改变和body的背景颜色改变
myDiv.style.color = "red";
// body元素的专属获取: document.body, html元素就是: document.documentElement
document.body.style.backgroundColor = "pink";
}
</script>
实际应用
id应用场景 :
- 重用代码(2个元素用相同的效果, 只要改变id就行)
- 写不同的效果(这个div写开灯关灯, 那个div写选项卡...)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
li {list-style-type: none;}
*{margin: 0;padding: 0;}
.box {width: 200px;overflow: hidden;}
.box ul {height: 50px;}
.box ul li {float: left;width: 50px;text-align: center;line-height: 50px;height: 50px;background-color: red;color: #fff;}
.box ul li:hover {background-color: #000;}
.tab-box {width: 5000px;height: 200px;}
.tab-box div {float: left;width: 200px;height: 200px;background-color: #000;color: #fff;}
.box .bg-black {background: #000;}
</style>
</head>
<body>
<div class="box" id="box">
<ul class="tab-nav">
<li>nav1</li>
<li>nav2</li>
<li>nav3</li>
<li>nav4</li>
</ul>
<div class="tab-box">
<div>1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
</div>
</div>
</body>
<script>
// 选项卡核心原理: 就是设置一个自定义属性从0开始, 然后通过这个自定义属性显示对应下标的div
tab('box', 'tab-nav', 'tab-box'); // 封装成一个函数, 可以重用代码
// tab(); 只要把名字改一下继续调用即可, 结构不变
function tab(box, tabNav, tabBox) {
/**
@parmer
box : 大盒子
tab-nav : 导航
tab-box : 内容
*/
var box = document.getElementById(box); // 获取大盒子
var liList = box.getElementsByClassName(tabNav)[0].getElementsByTagName("li"); // 获取导航的li标签
var tabList = box.getElementsByClassName(tabBox)[0].getElementsByTagName("div"); // 获取内容的div标签
for (var i = 0; i < liList.length; i++) {
liList[i].index = i; // 设置索引
}
for (var i = 0; i < liList.length; i++) {
liList[i].onmouseover = function() { // 给每个li标签添加鼠标移入事件
for (var j = 0; j < liList.length; j++) { // 移入之后先把所有的li标签的类名清除和内容的div标签隐藏
liList[j].className = "";
tabList[j].style.display = "none";
}
this.className = "bg-black"; // 然后当前的设置
tabList[this.index].style.display = "block"; // 当前的索引给tabList这个数组, 然后通过索引显示div标签
}
}
}
</script>
</html>
name应用场景
<form class="" action="index.html" method="post">
用户名: <input type="text" name="user">
密码: <input type="password" name="pwd">
<input type="submit">
</form>
<script>
// 根据name选择器选择元素一般用在表单内
var formInput = document.getElementsByName('user');
var formInput = document.getElementsByName('pwd');
console.log(formInput);
</script>
类名选择器 和 选择器选择元素, 看实际情况, 如果要求兼容IE, 那就任意使用
