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

摘要：得到空白节点之后，移到父节点上，删除子节点如果和在获取节点的过程中遇到

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;
}