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