从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）
复习：从零开始学前端：初识函数，合法属性与自定义属性 — 今天你学习了吗？（JS：Day2）
文章目录
前言
感觉JS牵连太深了，学的都是这个一点点那个一点点。
第三节课：中括号代替点操作，获取对象，自定义标签属性
一、“[ ]”代替“ . ”操作
要访问一个对象里面的属性，除了可以使用点，还可以使用[ ]。
原理：[ ]可以代替点操作的，也就是说下面这种写法跟上面的没什么区别。
注意：在使用[ ] 代替点操作时，中括号里面的属性名必须带上引号。
特殊：操作input里面的值。
拿前面学到的JS中修改样式为例进行操作
mydiv.style.backgroundColor = ‘pink’
可以换为
mydiv[“style”].backgroundColor = ‘pink’
或者
var style = “style”
mydiv[style].backgroundColor = '#afb
也可以换为
mydiv[“style”][“backgroundColor”] = ‘pink’
二、获取对象的具体方式
获取集合：
- document.getElementsByClassName(); //不兼容IE8以其一下浏览器；
- document.getElementsByTagName();
- document.getElementsByName();
- document.querySelectorAll(); //是找出所有匹配的节点后，返回对应的元素节点数组 //不兼容IE7以其一下浏览器
获取单个对象：
- document.getElementById();
- document.querySelector(); //不兼容IE7及其以下浏览器；
获取集合
var que = document.getElementsByClassName(‘mydiv’) //类名获取
que[0].onclick = function(){console.log(this.innerHTML)} //给一个增加点击事件
var tagName = document.getElementsByTagName(‘div’) //标签获取
var tagName = document.getElementsByTagName(‘div’)[0] //获取一个
var inp = document.getElementsByName(‘melody’) //名称获取
var que = document.querySelectorAll(‘.mydiv’); // 对应类名
var que = document.querySelectorAll(‘#mydiv’); // 对应id
var que = document.querySelectorAll(‘#mydiv span’); // 对应id下的span
获取元素是一个集合的话，需要拿到对应的元素，需要增加元素下标
que[0].onclick = function ( ) { }
获取单个对象
var que = document.getElementById(‘mydiv’)
var que = document.querySelector(‘.mydiv span a’)
// 是找到一个后立刻返回找到的第一个节点对象，如果没有则返回null
三、length属性
length长度：
使用字符串的length属性可以读取字符串的长度。长度以字符为单位，该属性为只读属性。
下面代码使用字符串的length属性获取字符串的长度。
var s = "String类型长度"; //定义字符串
console.log(s.length); //返回10个字符
四、自定义标签属性
定义标签属性
- getAttribute(“属性的名字”) //获取自定义属性的值
- setAttribute(“属性的名字”, ‘属性的值’) // 设置自定义属性的值
- show.removeAttribute(“属性的名字”) // 移除自定义属性
- 了解自定义标签属性：
//自定义标签属性：melody这种属性是人为添加的，叫自定义标签属性！
<div id="box" class="wrap" title="名字" melody="Melody" ></div>
- 如何操作合法的标签属性：
var box = document.getElementByid('box');
box.title = '我是甜柚';
// 获取class，不使用class，使用className
// 修改样式 class是关键字，所以会报错！
box.class = 'btn'; //错误！
box.className = 'btn'; //正确！
注意获取获取元素的类名不是使用class，是使用className
- 如何操作自定义标签属性
//自定义标签属性：candy这种属性是人为添加的，叫自定义标签属性！
//特点：不能直接通过点操作：
<div id="box" class="wrap" title="名字" melody="Melody"></div>
setAttribute(属性名,值)：
attr 属性名 value 属性值
box.setAttribute('melody','甜柚');
获取自定义标签属性，getAttribute(属性名)：
console.log(box.getAttribute('melody'));
判断自定义属性是否存在：
hasAttribute('属性名');
// 返回 true 存在 false 不存在
注意：
获取class，不使用class，使用className
<div id="box" class="wrap" melody="melody"></div>
<script>
var box = document.getElementById("box");
console.log(box.id) //box
console.log(box.className) //wrap
console.log(box.class) //undefined
console.log(box.melody) //undefined,自定义属性无法直接获取，box.melody代表对象上的某某属性
// 获取自定义标签属性
console.log(box.getAttribute('melody')) //自定义标签属性需要在这样获取
// 设置自定义标签属性
box.setAttribute("ususus", '自定义')
console.log(box)
</script>
删除自定义标签属性：
// 删除自定义标签属性：
box.removeAttribute('ususus')
// 判断自定义标签属性
console.log(box.hasAttribute("you")) //FALSE
实例：
原：
<div id="mybox" melody="meloddddy" kan="you"></div>
使用后：
代码：
var show = document.getElementById("mybox")
show.getAttribute("melody") //获取自定义属性的值
console.log(show)
show.setAttribute("tianyou", 'asdd') // 设置自定义属性的值
console.log(show)
show.removeAttribute("kan") // 移除自定义属性
console.log(show)
五、Arry数组
不是系统定制好的，而是人为自己定义的属性！如果再来访问这个自定义属性，就得能到这个值。
什么是数组？
数组对象的作用是：使用单独的变量名来存储一系列的值。
数组用法：
//如何返回数组
var arr = [5,2,0,1,3,1,4];
arr.2 //错误做法
//正确做法
arr[2]
//不能输用.操作的时候，就用[]取中括号。
//使用中括号的时候，必须使用引号，如有特殊，则值为数字；
数组存值的情况：
var arr = [1, 'melody',function(){alert(666)},[520,1314],true];
console.log( arr );
console.log( arr[2]() ); //表示执行arr的第三位的函数，“()”表示执行
二维数组：
var arr = [1, 'melody',function(){alert(666);renturn 666;},[520,1314],true];
// 如何找到520？
arr[3][0] // 先找到数组里面第3个，之后找到数据里面第1个；
console.log(typeof []); //object
预习：从零开始学前端：json对象，数据类型if，swich,三目运算 — 今天你学习了吗？（JS：Day4）
