JavaScript-DOM

DOM元素

DOM元素介绍

DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API。DOM 是载入到浏览器中的文档模型，以节点树的形式来表现文档，每个节点代表文档的构成部分（例如:页面元素、字符串或注释等等）。

获取DOM元素

• 通过标签获取

  // 由于相同标签可以在一个页面出现多次，所以通过标签获取的内容是一个包含所有具有相同标签名的包含DOM的伪数组
  let oDiv = document.getElementsByTargetName('div');
  

• 通过name属性获取

  // name值可重复，所以获取到的内容是一个包含DOM的伪数组
  let oDiv = document.getElementsByName('myName');
  

• 通过类名获取

  // 类名可重复，所以获取到的内容是一个包含DOM的伪数组
  let oDiv = document.getElementsByClassName('className');
  

• 通过ID获取

  // ID不可重复，所以获取到的内容是一个DOM元素
  let oDiv = document.getElementById('id');
  

• 通过选择器获取

  // 参数： 标签：标签名、类：.类名、ID：#id
  
  // 返回满足条件的第一个DOM元素
  let oDiv = document.querySelector('.className');
  
  // 返回一个包含所有满足条件DOM元素伪数组
  let oDiv = document.querySelectorAll('button');
  

操作节点

• 创建节点

  // 创建节点
  let newDiv = document.createElement('div');
  

• 删除节点

  // 通过父节点的 removeChild 方法删除
  oDiv.parentNode.removeChild(oDiv);
  
  // 通过自身的 remove 方法删除
  oDiv.remove();
  

• 插入节点

  // 在当前节点的内部的末端添加节点
  parentNode.append(newNode);
  
  // 在当前节点所选子元素的后面添加节点
  parentNode.insertBefore(newNode, childNode);
  

• 克隆节点

  // 复制节点
  /*
  copyNode 参数:
  	false(默认)：浅拷贝，只复制当前节点，不复制子节点
  	true：深拷贝，即复制当前节点，又复制子节点
  */
  let newDiv = oDiv.copyNode(true);
  

节点关系

• 获取父节点

  let parentNode = chirdNode.parentNode;
  

• 获取兄弟节点

  // 获取上一个兄弟节点(兼容写法)
  chirdNode.peviousElementSibling || chirdNode.previousSibling
  
  // 获取下一个兄弟节点(兼容写法)
  chirdNode.nextElementSibling || childNode.nextSibling
  

• 获取第一个子节点 / 最后一个子节点

  // 会将所有节点算入
  parentNode.firstChild
  parentNode.lastChild
  
  // 只会将标签节点算入
  parentNode.firstElementChild
  parnetNode.lastElementChild
  

• 获取所有子节点

  // 获取所有子节点，只包含标签节点
  parentNode.children
  
  // 获取所有子节点，包含所有节点
  // childNodes 获取到的伪数组是 NodeList 类型，NodeList 元素具有一个属性：nodetype
  // 根据 nodetype 的值，可以判断当前节点的类型：1：标签节点、2：属性节点、3：文本节点
  parentNode.childNodes
  

操作属性节点

由于每次获取页面中能够的DOM元素时，JavaScript都会将DOM元素封装成一个对象，所以我们可以使用部分操作对象的方法来操作DOM元素

<div name="myName" title="myTitle"></div>

let oDiv = document.querySelector('div');

• 获取属性节点

  console.log(oDiv.name);
  
  cosole.log(oDiv.getAttribuate('title'));
  

• 修改属性节点

  oDiv.name = 'newName';
  
  oDiv.setAttribuate('title', 'newTitle');
  

• 添加属性节点

  oDiv.newAttr1 = 'newValue1';
  
  oDiv.setAttribuate('newAttr2', 'newValue2');
  

• 删除属性节点

  delete oDiv.name;
  
  oDiv.removeAttribuate('title');
  

操作节点样式

• 添加节点样式

  • 添加类名

    .active{
        background: pink;
    }
    

    oDiv.className = 'active';
    

  • 设置style属性的值

    oDiv.style.width = '100px';
    oDiv.style.marginTop = '50px';
    

  注意：通过JavaScript设置DOM元素style属性时，都是设置的行内样式，所以会覆盖部分原有的css样式

• 获取节点样式

  • 通过style获取

    console.log(oDiv.style.width);
    console.log(oDiv.style.marginTop);
    

    注意：通过style属性只能获取到通过JavaScript设置的属性值，不能获取到通过css设置的属性值

  • 通过window对象的getComputedStyle方法

    // getComputedStyle 接受一个DOM元素 ，会返回这个DOM元素的所有属性值
    let oDivStyle = window.getComputedStyle(oDiv);
    
    console.log(oDiv.style.width);
    console.log(oDiv.style.marginTop);