WebAPI（二）
（一）操作元素样式
1.通过style操作元素的样式
语法：元素.style.样式属性名 = '样式属性值';
代码举栗：
<body>
<div>div</div>
<script>
document.querySelector('div');
div.style.width = '500px';
div.style.height = '500px';
div.style.backgroundColor = '#000';
div.style.color = 'red';
</script>
</body>
若设置少量的样式时，可以选择使用style。样式多的话最好不要采用。
仅仅做设置样式.
2.开关灯案例
<body>
<button>close</button>
<script>
//获取按钮元素
var button = document.querySelector('button');
//获取body元素
var body = document.body;
//给按钮注册onclick事件
button.onclick = function () {
//判断按钮的内容是否是关灯，若是则改为开灯
if(this.innerText == 'close') {
this.innerText = 'open';
//改body的背景色
body.style.backgroundColor = '#000';
}
else {
this.innerText = 'close';
body.style.backgroundColor = '#fff';
}
//否则改为关灯
};
</script>
</body>
3.tag切换案例
js代码举栗：
//获取一组li
var lis = document.querySelectorAll('li');
//获取一组类名为item的div
var items = document.querySelectorAll('.item');
//循环遍历li分配编号和注册事件
for (var i = 0; i < lis.length; i++) {
//分配编号
lis[i].index = i;
//注册事件
lis[i].onmouseenter = function () {
//获取点击的li的编号
var num = this.index;
// alert(num);
//让当前点击的li样式突出。加类名active.
for (var j = 0; j < lis.length; j++) {
lis[j].className = ''; //初始化tag的默认样式
items[num].style.display = 'none';
}
this.className = 'active';
//让对应的div展示出来.通过编号找对应的div 设置为显示
items[num].style.display = 'block';
}
}
（二）操作元素属性
1.操作表单的value属性
操作文本框的内容不要使用innerText和innerHTML。
innerText和innerHTML可以获取标签之前的内容。
代码举栗：
<body>
<input type="text" value="张三">
<script>
var input = document.querySelector('input');
console.dir(input);
//获取
console.log(input.value);
//设置
input.value = '李四';
</script>
</body>
2.操作表单的disabled属性
代码举栗：
<body>
<input type="button" value="anniu" disabled="disabled" >
<script>
var input = document.querySelector('input');
console.dir(input);
//获取
console.log(input.disabled); //布尔值，true表示禁用
//设置
input.disabled = false; //false表示不禁用
</script>
</body>
3.其他属性
都是设置布尔值false。
代码举栗：
<body>
<input type="checkbox" checked >
<input type="radio" checked >
<select>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">邯郸</option>
<option value="">赤峰</option>
</select>
<script>
var ck = document.querySelector('input[type=checkbox]');
console.log(ck.checked);
ck.checked = false;
</script>
</body>
4.扩展
1）readonly 只读属性，用户不能手动修改文本框
<input type="text" id="total" value="1" readonly >
2）checked选择器
:checked 可以获取已经选中的表单元素。
代码举栗：
<body>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked>
<input type="checkbox">
<script>
var ckeds = document.querySelectorAll('input:checked');
console.log(ckeds.length); //输出2
</script>
</body>
5.全选框案例
//获取thead中的复选框
var all = document.querySelector('#all');
//获取tbody中一组复选框
var cks = document.querySelectorAll('tbody input[type = checkbox]');
all.onclick = function() {
var isChange = this.checked;
for(var i = 0; i < cks.length; i++) {
cks[i].checked = isChange;
}
};
for(var i = 0; i < cks.length; i++) {
cks[i].onclick = function() {
var len1 = cks.length;
var len2 = document.querySelectorAll('tbody input[type = checkbox]:checked').length;
// if(len1 == len2) {
// all.checked = true;
// }
// else {
// all.checked = false;
// }
all.checked = len1 == len2; //返回false或true给checked，与if-else功能相同
};
}
（三）自定义行内属性
标签上的属性包括：系统给的：id、className、href、src、title...；和自定义的。
自定义属性无法通过 元素.属性 的方式获取。会返回 undefined
语法：
获取：元素.getAttribute(name);
//可以获取自定义的属性，也可以获取系统给的属性
设置：元素.setAttribute(name,value);
删除：元素.removeAttribute(name);
自定义属性作用：一般可以将未来需要的属性存到自定义属性中。
（四）节点的层级
1.节点的关系
嵌套关系、并列关系
2.根据子节点获取父节点
语法：子节点.parentNode
代码举栗：
<body>
<ul>
<li>li1</li>
<li class="li2">li2</li>
<li>li3</li>
</ul>
<script>
//获取第二个li
var son = document.querySelector('.li2');
son.onclick = function(){
//找父元素
var ul = this.parentNode;
ul.style.background = 'red';
}
</script>
</body>
var body = this.parentNode.parentNode; //找父元素的父元素
3.根据父节点获取子节点
1）语法：父节点.childNodes;
获取的节点包含了所有节点（注释、文本、标签都是节点）
代码举栗：
<body>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
<script>
var ul = document.querySelector('ul');
console.log(ul.childNodes);
</script>
</body>
2）语法：父元素.children;（常用）
获取的仅仅是元素（标签转换后）
代码举栗：
<script>
var ul = document.querySelector('ul');
console.log(ul.children);
</script>
3）语法：父节点.firstElementChild;
4）语法：父节点.lastElementChild;
代码举栗：
//获取第一个元素类型的孩子
var first = ul.firstElementChild;
console.log(first); //得到第一个li
//获取最后一个元素类型的孩子
var last = ul.lastElementChild;
console.log(last); //得到第二个li
4.节点的nodeType
返回节点的类型，可以通过nodeType筛选想要的节点
文档节点：document.nodeType // 9;
元素节点：ul.nodeType // 1;
文本节点：文本节点.nodeType // 3;
5.节点的nodeName
用来检测标签的名字。
console.log(ul.nodeName); //输出UL
6.节点的nodeValue
用来检测文本节点的内容
