js--原生js DOM操作(增删改差)

Posted 2020-11-27 baimeishaoxia

js--DOM操作

1. dom获取

• DOM获取

  //参数是字符串
  document.getElementById() 获取特定 ID 元素的节点
  document.getElementsByTagName() 获取相同元素的节点列表
  document.getElementsByName() 获取相同名称的节点列表
  document.getAttribute() 获取特定元素节点属性的值
  
  //参数是ccs选择器字符串
  document.querySelectorAll(‘.b1 .c‘); 
  document.querySelector(‘.b1 .c‘); 
  
  //层次节点操作
  childNodes 获取当前元素节点的所有子节点
  firstChild 获取当前元素节点的第一个子节点
  lastChild 获取当前元素节点的最后一个子节点
  ownerDocument 获取该节点的文档根节点，相当与 document
  parentNode 获取当前节点的父节点
  previousSibling 获取当前节点的前一个同级节点
  nextSibling 获取当前节点的后一个同级节点
  attributes 获取当前元素节点的所有属性节点集合  
  
  
  //增删改
  write() 这个方法可以把任意字符串插入到文档中
  createElement() 创建一个元素节点
  cloneNode() 复制节点
  removeChild() 移除节点        
  repalceChild() 将新节点替换旧节点
  insertBefore() 将新节点插入在前面
  insertAfter() 将新节点插入在前面
  function insertAfter(newElement, targetElement) {
    //得到父节点
    var parent = targetElement.parentNode;
      if (parent.lastChild === targetElement) {
        parent.appendChild(newElement);
      } else {
        parent.insertBefore(newElement, targetElement.nextSibling);
      }
  }
      
  appendChild() 将新节点追加到子节点列表的末尾
  createTextNode() 创建一个文件节点                 

2 元素节点操作

//内容操作
document.getElementById(‘box‘).tagName; //元素名
document.getElementById(‘box‘).innerhtml; //元素内容
//属性操作 
//接受两个参数,属性名,属性值              尽量不要用
setAttribute() 设置特定元素节点属性的值
removeAttribute() 移除特定元素节点属性

//改变样式
document.getElementById(‘box‘).id; //获取 id
document.getElementById(‘box‘).id = ‘person‘; //设置 id
document.getElementById(‘box‘).title; //获取 title
document.getElementById(‘box‘).title = ‘标题‘ //设置 title
document.getElementById(‘box‘).style; //获取 CSSStyleDeclaration 对象
document.getElementById(‘box‘).style.color; //获取 style 对象中 color 的值
document.getElementById(‘box‘).style.color = ‘red‘; //设置 style 对象中 color 的值
document.getElementById(‘box‘).className; //获取 class
document.getElementById(‘box‘).className = ‘box‘; //设置 class

3 节点类型

//节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性 ，
//分别为：nodeName、nodeType 和 nodeValue。
节点类型 nodeName nodeType nodeValue
元素     元素名称     1      null
属性     属性名称     2     属性值
文本     #text       3     文本内容(不包含 html)

4 在非 IE 中，标准的 DOM 具有识别空白文本节点的功能，所以在火狐浏览器是 7
个，而 IE 自动忽略了，如果要保持一致的子元素节点，需要手工忽略掉它。

function filterSpaceNode(nodes) {
  for (var i = 0; i < nodes.length; i ++) {
    if (nodes[i].nodeType == 3 && /^s+$/.test(nodes[i].nodeValue)) {
      //得到空白节点之后，移到父节点上，删除子节点
      nodes[i].parentNode.removeChild(nodes[i]);
    }
  }
  return nodes;
}

//如果 firstChild、lastChild、previousSibling 和 nextSibling 在获取节点的过程中遇到
function removeWhiteNode(nodes) {
  for (var i = 0; i < nodes.childNodes.length; i ++) {
    if (nodes.childNodes[i].nodeType === 3 && /^s+$/.test(nodes.childNodes[i].nodeValue)) {
      nodes.childNodes[i].parentNode.removeChild(nodes.childNodes[i]);
    }
  }
  return nodes;
}