JS——DOM
自定义属性操作
标签自带属性：id\class\onclick等固有属性
支持添加属性：获取固有属性，undefined
获取属性（自定义、固有均支持）： -getAttribute('自定义id名')
设置属性 -setAttribute('id名',"vale")
移除属性： removeAttribut('属性名') 或者：box.class='';[将值设为空]
元素.属性 一般只对固有属性进行操作。
h5设置： data-自定义属性名 data=idx --> 但是获取自定义属性： box.dataset.idx [ie11开始支持]
box.dataset[idx]
//孩子节点 a instanceof Array:并不是数组，只是类数组对象
ul.childNodes //注意：包含所有儿子：文本、li、注释、回车换行{
即： 其长度问题注意！
ele.nodeType : {
1:li，元素节点
3:文本节点，回车换行
8:注释节点
}
}
//box.nextSibling:下一个兄弟节点，包括：元素，文本节点等
//box.nextElementSibling:下一个兄弟元素
//同理：previous
// chrome ,fireFox火狐开发插件
element.parentNode 父亲节点
//获取html元素——父亲为 #document [document无上一级，返回null]
var oHtml = document.documentElement
document.html
//不同浏览器兼容性问题：考虑版本问题【完全跟金融领域，又是另一种思维】或者期本质一样，不同金融工具
//孩子节点 a instanceof Array:并不是数组，只是类数组对象
ul.childNodes //注意：包含所有儿子：文本、li、注释、回车换行{
即： 其长度问题注意！
ele.nodeType : {
1:li，元素节点
3:文本节点，回车换行
8:注释节点
}
}
// children属性：得到元素的所有子元素-->具体定位某个节点 重点掌握：得到元素的所有元素子节点
ul.children.length
// firstChild : 所有孩子的第一个节点【所有儿子包括文本节点中选择第一个】 --- lastChild
// firstElementChild : ie9+以后支持
//表格删除行列
tbody.removeChild(this.parentNode.parentNode); //tbody.removeChild(tr)
对象禁用
btn.onclick = function() {
if (ul.children.length > 0) {
let eleRe = ul.removeChild(ul.children[0]);
console.log(eleRe);
} else {
btn.disabled = true;
}
}
行内样式为： 建议双引号，“”
元素查找——>元素操作
获取元素地内容
innnerHTML 支持标签
innerText 不支持
ondbclick：双击事件
// appendChild：在末尾添加儿子
oUl.appendChild(oLi);
// 第二个参数：参照物，// // 在一个儿子前添加，如果不存在null，在末尾添加
oUl.insertBefore(oLi, null);
//在第几个元素前添加元素
oUl.insertBefore(oLi, oUl.children[0]);
//复制第一个li到末尾ul
var ul = document.getElementsByTagName('ul')[0];
var first = ul.children[0];
ul.appendChild(first); //剪切粘贴
//克隆一份
var clone1 = ul.children[0].cloneNode(true); //cloneNode():默认参数为false,浅复制；true为深复制
ul.appendChild(clone1);
父亲做代理，来处里儿子点击事件
// true:表示在捕获阶段监听； false:表示在冒泡阶段监听
<div class="fa">
<div class="son"></div>
</div>
<script>
var fa = document.querySelector('.fa');
var son = document.querySelector('.son');
// onclick attachEvent
son.addEventListener('click', function() {
console.log('冒泡 son');
}, false);
fa.addEventListener('click', function() {
console.log('冒泡 fa');
}, false);
document.addEventListener('click', function() {
console.log('冒泡 documnet');
}, false);
son.addEventListener('click', function() {
console.log('true son');
}, true);
fa.addEventListener('click', function() {
console.log('true fa');
}, true);
document.addEventListener('click', function() {
console.log('true documnet');
}, true);
</script>
function addEventListener(ele, eventName, fn) {
if (ele.addEventListener) {
ele.addEventListene(eventName, fn);
} else if (ele.attachEvent) {
ele.attachEvent('on' + eventName, fn);
} else {
ele['on' + eventName] = fn;
}
}
addEventListener(btn, 'mouseover', function() {
console.log('ok');
});
精灵图：
1、精灵图技术产生的目的：很多大型网页在首次加载的时候都需要加载很多的小图片，而考虑到在同一时间，
服务器拥堵的情况下，为了解决这一问题，采用了精灵图这一技术来缓解加载时间过长从而影响用户体验的这个问题。2、精灵图技术的本质：所谓精灵图就是把很多的小图片合并到一张较大的图片里，所以在首次加载页面的时候，
就不用加载过多的小图片，只需要加载出来将小图片合并起来的那一张大图片也就是精灵图即可，这样在一定程度上减少了
页面的加载速度，也一定程度上缓解了服务器的压力。
