张锐杰-20221109-DOM&BOM

1.自定义属性
  1.1获取属性
  H4： dom.getAttribute
  H5： dom.dataset
  1.2修改属性
  H4:    dom.setAttribute('sex', '女');
  H5:    dom.dataset.age = 1;
           dom.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();