一、自定义属性
自定义标签-H4
自定义标签-H5
二、排他思想
三、节点操作
3.1子找父、父找子
1.body：
document.bodyDOM&BOM DAY03
自定义属性
获取属性
H4
<div id="box" class="box" title="这是一个div" sex="男" age="18">这是一个div</div>
<script>
const box = document.querySelector('#box');
//获取自带属性
console.log(box.id);
console.log(box.className);
console.log(box.title);
console.log(box);
//获取自定义属性
console.log(box.getAttribute('age'));
console.log(box.getAttribute('sex'));
H5
<div id="box" class="box" title="这是一个div" data-sex="男" data-age="18">这是一个div</div>
<script>
const box = document.querySelector('#box');
//获取自定义属性
console.log(box.dataset);
console.log(box.dataset.age);
console.log(box.dataset.sex);
</script>
修改属性
H4
box.setAttribute('sex', '女');
H5
box.dataset.age = 1;
box.dataset.sex = 1;
节点操作
body和html节点操作
const body = document.body;
console.log(body);
const html = document.documentElement;
console.log(html);
console.log(body.clientHeight);
console.log(html.clientHeight);
父节点
console.log(li.parentNode) 返回上一级父标签
console.log(li.parentNode.parentNode) 返回上两级父标签
console.log(li.closest('.container'));
console.log(li.closest('#hearder'));
返回指定父级dom节点
子节点
console.log(ul.firstChild);
console.log(ul.lastChild);
console.log(ul.childNodes);
会受到空格回车的影响----可以获得文本节点----返回值是元素
console.log(ul.children)
不受空格回车的影响---是集合不是数组----返回值是元素
console.log(ul.firstElementChild)
console.log(ul.lastElementChild)
不受空格回车影响，获得的是dom节点
兄弟间节点
获取节点之后的dom节点
console.log(p.nextSibling);
会受空格回车的影响获得文本节点
console.log(p.nextElementSibling);
不受空格回车影响
获取节点之前的dom节点
console.log(p.previousSibling);
会受空格回车的影响获得文本节点
console.log(p.previousElementSibling);
不受空格回车影响
创建节点
<div id="box">div</div>
<script>
const box = document.querySelector('#box');
let p = document.createElement('p');
console.log(p)
p.className = 'p';
p.innerHTML = '这是一个段落';
</script>
添加节点
box.appendChild(p);
console.log(box)
在某个标签的节点之前添加标签
body.insertBefore(p, btn);把p的dom节点放在btn节点的前面
删除节点
body.removeChild(box);
排他思想
使用索引对应关系进行切换
<script>
const tab = document.querySelectorAll('.tab');
const item = document.querySelectorAll('.item');
tab.forEach(function (v, i) {
v.addEventListener('click', function () {
if (i == 0) {
tab.style.backgroundColor = 'red';
tab[1].style.backgroundColor = 'orange';
item.style.display = 'block';
item[1].style.display = 'none';
}
else {
tab.style.backgroundColor = 'red';
tab[0].style.backgroundColor = 'orange';
item.style.display = 'block';
item[0].style.display = 'none';
}
})
})
</script>
自定义属性
<script>
const tab = document.querySelectorAll('.tab');
const item = document.querySelectorAll('.item');
const tabs = document.querySelector('.tabs');
tabs.addEventListener('click', function (e) {
let tipTip = e.target.dataset.tip;
tab.forEach(function (v, i) {
if (v.dataset.tip == tipTip) {
v.style.backgroundColor = 'red';
item.forEach(function (a) {
if (a.dataset.tip == tipTip) {
a.style.display = 'block';
}
else {
a.style.display = 'none';
}
})
}
else {
v.style.backgroundColor = 'orange';
}
})
})
</script>
阻止a标签默认跳转事件
方法一
子 <a href="javascript:;">去百度</a>1
方法二
const a = document.querySelector('a');
a.addEventListener('click', function (e) {
e.preventDefault();
3.2html:
document.
parentNode 父节点
