王文博--20221109--JS-dom-day03

一、今日学习内容
1.自定义属性
  1.1获取属性
     H4：获取自定义属性
       console.log(box.getAttribute('age'));
       console.log(box.getAttribute('sex'));
     H5：获取自定义属性
      console.log(box.dataset);
      /console.log(box.dataset.age);
1.2修改属性
    H4:box.setAttribute('sex', '女');
    H5:box.dataset.age = 1;
          box.dataset.sex = 1;
2.节点操作
  2.1body和html节点操作
  const body = document.body;
   const html = document.documentElement;
  console.log(body.clientHeight);
    console.log(html.clientHeight);
  2.2父节点
  console.log(li.parentNode)  
  console.log(li.closest('.container'));
console.log(li.closest('#hearder'));
  2.3子节点
  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节点
  2.4兄弟间节点
     获取节点之后的dom节点console.log(p.nextSibling);---会受空格回车的影响获得文本节点
                   console.log(p.nextElementSibling);---不受空格回车影响
     获取节点之前的dom节点console.log(p.previousSibling);---会受空格回车的影响获得文本节点
                         console.log(p.previousElementSibling);---不受空格回车影响
  2.5创建节点let p = document.createElement('p');
  2.6添加节点box.appendChild(p);
  2.7在某个标签的节点之前添加标签 body.insertBefore(p, btn);把p的dom节点放在btn节点的前面
  2.8删除节点body.removeChild(box);
3.阻止a标签默认跳转事件
  方法一<a href="javascript:;">去百度</a>
  方法二const a = document.querySelector('a');
a.addEventListener('click', function (e) {
       e.preventDefault();