菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 王文博--20221109--JS-dom-day03 [打印本页]

作者: 博5237 时间: 2022-11-9 23:40
标题: 王文博--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();

欢迎光临菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/)