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

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

js--DOM操作