DOM&BOM-03
1.自定义属性
data-
<div id="box" data-age="12" data-sex="22"></div>
dom.dataset---所有的自定义属性
dom.dataset.age
dom.dataset.age=新的值
2.排他思想
<script>
//get dom
const tab = document.querySelectorAll('.tab');
const item = document.querySelectorAll('.item');
const tabs = document.querySelector('.tabs');
tabs.addEventListener('click', function (a) {
console.log(a.target);
let tabTip = a.target.dataset.tip;
item.forEach(function (v, i) {
if (tabTip == v.dataset.tip) {
v.style.display = "block";
tab[i].style.backgroundColor = "f60";
} else {
v.style.display = "none";
tab[i].style.backgroundColor = "orange";
}
})
})
</script>
3.节点操作
3.1特殊节点---body、html
1.body
document.body
2.html
document.documentElement
3.2父找子、子找父
parendNode---查找父节点
fristChild---第一个子节点
lastChild---最后一个子节点
fristChild、lastChild拿到的节点并不一定是html节点
是文本节点---空格---回车---文本内容
childNode---查找父节点---数组---会受到空格回车这些的影响
children---集合，非数组---不会受到空格，回车影响
closet('选择器')---方法---向上查找，查找到选择器匹配位置，离自己最近的
firstElementChild
lastElementChild
dom节点，不会受到回车空格影响
3.3兄弟节点
回车--空格--文本标签
console.log(p.nextSibling);---下一个
console.log(p.previousSibling);---上一个
不会受到回车空格的影响--dom节点--标签
console.log(p.nextElementSibling);---上一个元素
console.log(p.previousElementSibling);---下一个元素
3.4创建节点
//创建节点
//createElement
let p = document.createElement('p');
// 添加属性
p.className = 'p';
// 添加文本内容
p.innerHTML = '这是动态创建的p标签';
3.5添加节点
//插入到指定位置
// 父节点.insertBefore(要添加的节点，添加的位置);
insertBefore(p,btn);
body.insertAfter(p, btn);----不存在
3.6删除节点
//removeChild()
body.removeChild(h1);
3.7阻止a标签跳转
<a href="https://www.baidu.com/">去百度</a>
<!-- <a href="javascript:;">去百度</a> -->
<script>
const a = document.querySelector('a');
// console.log(a);
a.addEventListener('click', function (e) {
// console.log('aaaaa');
// console.log(e);
// 阻止a标签的默认跳转事件
e.preventDefault();
// console.log(e.preventDefault);
})
</script>
|
