操作DOM的方法

创建节点

一、createElement

let elem = document.createElement("div");
  elem.id = 'test';
  elem.style = 'color: red';
  elem.innerHTML = '我是新创建的节点';
  document.body.appendChild(elem);

二、createTextNode

 var node = document.createTextNode("我是文本节点");
  document.body.appendChild(node);

三、cloneNode

 var dupNode = node.cloneNode(deep);
 deep :  true => 深克隆， false => 浅克隆
实践：

  

    我是父元素的文本
    

    
        我是子元素
    
  
  复制

四、createDocumentFragment

let fragment = document.createDocumentFragment();

实践:

  

修改节点

一、appendChild

child节点将会作为parent节点的最后一个子节点。
appendChild这个方法很简单，但是还有有一点需要注意：如果被添加的节点是一个页面中存在的节点，则执行后这个节点将会添加到指定位置，其原本所在的位置将移除该节点，也就是说不会同时存在两个该节点在页面上，相当于把这个节点移动到另一个地方。
如果child绑定了事件，被移动时，它依然绑定着该事件

 parent.appendChild(child);


  

    要被添加的节点
  
  

  

  

  

    要移动的位置
  
        
  

二、insertBefore

parentNode.insertBefore(newNode,refNode);

//  parentNode表示新节点被添加后的父节点 newNode表示要添加的节点 refNode表示参照节点，新节点会添加到这个节点之前 
//  refNode 为必传项
//  如果refNode是undefined或null，则insertBefore会将节点添加到子元素的末尾

  

    父节点
    
                
        子元素
    
  
  

三、 removeChild

var deletedChild = parent.removeChild(node);

// deletedChild指向被删除节点的引用，它等于node，被删除的节点仍然存在于内存中，可以对其进行下一步操作。
// 如果被删除的节点不是其子节点，则程序将会报错。我们可以通过下面的方式来确保可以删除：
if(node.parentNode){
    node.parentNode.removeChild(node);
}

四、 replaceChild

 parent.replaceChild(newChild,oldChild)

// newChild是替换的节点，可以是新的节点，也可以是页面上的节点，如果是页面上的节点，则其将被转移到新的位置 oldChild是被替换的节点

实践：


  

    父节点
    
                
        子元素
    
  
  

二、document.getElementsByTagName

返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection。 整个文件结构都会被搜索，包括根节点。返回的 HTML集合是动态的, 意味着它可以自动更新自己来保持和 DOM 树的同步而不用再次调用document.getElementsByTagName()

var elements = document.getElementsByTagName(name);

// 不传参数返回null
// name 是一个元素的名称的字符串，特殊字符*代表所有元素


  
div1
  
div2
    
  
      

三、document.getElementsByName

var elements = document.getElementsByName(name)
// 返回的是nodeList， 且是随着增加删除自动变化的
// 在html中，并不是所有元素都有name属性，比如div是没有name属性的，可以强制加上name属性，也是可以被添加的
// 在IE中，如果id设置成某个值，然后传入getElementsByName的参数值和id值一样，则这个元素是会被找到的，所以最好不好设置同样的值给id和name


  

  

  

  

  

四、document.getElementsByClassName

var elements = document.getElementsByClassName(names); // or:
  var elements = rootElement.getElementsByClassName(names);
// elements 是一个集合，也是动态更新的，包含所有元素
// names 是一个字符串 表示要匹配的类名列表，类名通过空格分隔
// getElementsByClassName 可以在任何元素上调用，不仅仅是document，调用这个方法的元素将作为本次查找的根元素

  var elements = document.getElementsByClassName("test1 test2");

// 获取所有class为test的元素
  var elements = document.getElementsByClassName("test");
// 获取所有class同时包括 test1 和 test2 的元素
var elements = document.getElementsByClassName('test1 test2')
// 在id为father的元素子节点中获取所有class为child的元素
var elements  = document.getElementById('father').getElementsByClassName('child)

// 还可以调用Array.prototype 的方法
var testElements = document.getElementsByClassName('test');
  var testDivs = Array.prototype.filter.call(testElements, function(testElement){
    return testElement.nodeName === 'DIV';;
  });

五、document.querySelector

通过css选择器查询元素，注意选择器要符合css选择器的规则，
返回的是匹配的第一个元素，无匹配则返回null

var element = document.querySelector(selectors);

// 使用深度优先遍历元素获取

  

    

      第三级的span    
    
  
  
            
    同级的第二个div
  
  



// 拿到的第一个出现的第三级span

六、document.querySelectorAll

返回的是所有匹配的元素， 而且可以匹配多个选择符

var elementList = document.querySelectorAll(selectors);
// elementList 是一个静态nodeList
// selector 是一个逗号连接的包含一个或多个css选择器的字符串
// 如果selectors 参数中包含css伪元素，则返回一个空的elementList

var matches = document.querySelectorAll("div.note, div.alert");


  

    class为test
  
  

    id为test
  
  


// alert =>  class为test

关系节点

一、parentNode

每个节点都有一个parentNode属性，它表示元素的父节点。Element的父节点可能是Element，Document或DocumentFragment

二、parentElement

返回元素的父元素节点，与parentNode的区别在于，其父节点必须是一个Element，如果不是，则返回null

三、childNodes

返回一个即时的NodeList，表示元素的子节点列表，子节点可能会包含文本节点，注释节点等

四、children

一个即时的HTMLCollection，子节点都是Element，IE9以下浏览器不支持
children属性为只读属性，对象类型为HTMLCollection，你可以使用elementNodeReference.children[1].nodeName来获取某个子元素的标签名称

五、firstChild

只读属性返回树中节点的第一个子节点，如果节点是无子节点，则返回 null

六、lastChild

返回当前节点的最后一个子节点。如果父节点为一个元素节点，则子节点通常为一个元素节点，或一个文本节点，或一个注释节点。如果没有子节点，则返回null

七、hasChildNode

返回一个布尔值,表明当前节点是否包含有子节点.

八、previousSibling

返回当前节点的前一个兄弟节点,没有则返回null
Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如Node.firstChild和Node.previousSibling之类的方法可能会引用到一个空白符文本节点, 而不是使用者所预期得到的节点

九、previousElementSibling

previousElementSibling返回当前元素在其父元素的子元素节点中的前一个元素节点,如果该元素已经是第一个元素节点,则返回null,该属性是只读的。注意IE9以下浏览器不支持

十、nextSibling

Node.nextSibling是一个只读属性，返回其父节点的childNodes列表中紧跟在其后面的节点，如果指定的节点为最后一个节点，则返回null
Gecko内核的浏览器会在源代码中标签内部有空白符的地方插入一个文本结点到文档中.因此,使用诸如Node.firstChild和Node.previousSibling之类的方法可能会引用到一个空白符文本节点, 而不是使用者所预期得到的节点

十一、nextElementSibling

nextElementSibling返回当前元素在其父元素的子元素节点中的后一个元素节点,如果该元素已经是最后一个元素节点,则返回null,该属性是只读的。注意IE9以下浏览器不支持

元素属性

一、setAttribute

设置指定元素上的一个属性值，如果属性已经存在，则更新该值，否则添加一个新的属性用的名称和值

 element.setAttribute(name, value);

body>
  
ABC

二、getAttribute

getAttribute()返回元素上一个指定的属性值。如果指定的属性不存在，则返回null或""（空字符串）

let attribute = element.getAttribute(attributeName);  



  
ABC

  

三、removeAttribute

removeAttribute()从指定的元素中删除一个属性

body>
  
ABC
   

元素样式

一、window.getComputedStyle

二、getBoundingCLientRect

getBoundingClientRect用来返回元素的大小以及相对于浏览器可视窗口的位置