标签：bsp 掌握 append previous 工具 child clone children 包括
自定义属性操作
标签自带属性：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‘);
});
标签：bsp 掌握 append previous 工具 child clone children 包括
原文地址：https://www.cnblogs.com/macro-renzhansheng/p/13025975.html
