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

标题: 陈紫怡-20221109-BOM&DOM-03 [打印本页]

作者: Dasmondlicht 时间: 2022-11-9 23:43
标题: 陈紫怡-20221109-BOM&DOM-03
一、今日学习内容
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();

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