dom基础API

之前也通过原生的dom操作写项目了，用到了很多的api，但是仅仅是用了，并不是那么的去了解它，我希望系统的学一下。

1. 节点

   • 元素节点
   • 文本节点
   • 属性节点
2. 获取元素
   document下的特有函数

       getElementById() // Id名字
       getElementByName() 根据name属性查找 返回一个NodeList
       getElementsByTagName(); // 标签名字 返回值一个对象数组HTMLCollection 对象数组里面每个都是对象object 
       getElementsByClassName('class);  // 类名 返回对象数组HTMLCollection   其它的元素也支持这个接口
       querySelector(); 返回单个Node 匹配到多个只返回第一个
       querySelector(); 返回一个NodeList
       forms document的属性，返回当前页面的所有form,是个HTMLCollection  
       close（）
       open（）
       write()
       writeln()

这里说下NodeList 和 HTMLCollection的区别 ：都是类数组，只是HTMLCollection多了namedItem （返回name为(“name”)的dom）
3. 获取和设置属性

    getAttribute（'属性名'） //不属于document对象，只属于元素节点对象 没有返回null
    setAttribute（'属性名',value）

4.创建节点

    createElement('div') 
    createTextNode('我是文本节点')
    cloneNode(boolean)    boolean表示是否复制子元素
    creatDocumentFragment（） 创建一个DocumentFragment 

文档碎片，它表示一种轻量级的文档，主要是用来存储临时节点，大量操作DOM时用它可以大大提升性能。
5. 节点修改
节点修改API都具有下面这几个特点：不管是新增还是替换节点，如果其原本就在页面上，那么原来位置的节点将被移除；修改之后节点本身绑定的事件不会消失；

     appendChild()  //parent.appendChild(child);
     insertBefore()  //parentNode.insertBefore(newNode, refNode);  // refNode是必传的，如果不传该参数会报错；
     removeChild() //删除指定的子节点并返回子节点 var deletedChild = parent.removeChild(node);  
     replaceChild() //parent.replaceChild(newChild, oldChild);  

如果refNode是undefined或null，则insertBefore会将节点添加到末尾；
原生dom中没有insertAfter的API的，我们实现它，

function interAfter(newNode,refNode){
        var parentNode = refNode.parentNode;
        if(parentNode.lastChild = refNode){
            parentNode.appendChild(newNode);
        }else{
            //插图到下一个兄弟节点的前面
            parentNode.insertBefore(newNode,ref.nextSibling)
        }
    }

1. 节点关系

---

 - 父关系

    parentNode: 元素父节点，每个元素都有  可能是 Element,Document或者DocumentFragment
    parentElement: 元素的父元素节点：与parentnNode区别是，父节点不许是一个Element元素，如果不是返回null

 - 子关系

    children: 返回一个实施的HTMLCollection，子节点都是Element
    childNodes: 返回一个实时的NodeList 元素的子节点列表，可能会有包含文本节点，注释节点等
    firstChild: 返回第一个子节点，不存在返回null，对应 firstElementChild
    lastChild: 返回最后一个子节点，不存在返回null，对应lastElementChild

 - 兄弟关系

    previousSibliing: 节点的前一个节点，如果不存在返回nul。有可能拿到文本节点和注释节点
    nextSibling: 节点后的一个节点，如果不存在返回null。有可能拿到文本节点和注释节点
    previousElementSibling：返回前一个元素节点，前一个节点必须是Element
    nextElementSibling: 返回后一个元素节点，后一个节点必须是Element

1. 样式相关API

---

    elem.style.color = 'red';  
    elem.style.setProperty('font-size', '16px');  
    elem.style.removeProperty('color');  

• 动态添加样式规则

    var style = document.createElement('style');  
    style.innerHTML = 'body{color:red} #top:hover{background-color: red;color: white;}';  
    document.head.appendChild(style);  

• window.getComputedStyle
  通过 element.sytle.xxx 只能获取到内联样式，借助 window.getComputedStyle 可以获取应用到元素上的所有样式，IE8或更低版本不支持此方法。

    var style = window.getComputedStyle(element[, pseudoElt]);  

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

    var clientRect = element.getBoundingClientRect();  

clientRect是一个 DOMRect 对象，包含width、height、left、top、right、bottom，它是相对于窗口顶部而不是文档顶部，滚动页面时它们的值是会发生变化的。

1. 添加事件

---

    element.removeEventListener() //添加一个事件
    element.addEventListener()   //删除一个事件

事件句柄

    onabort 图像的加载被中断。
    onblur  元素失去焦点。
    onchange    域的内容被改变。
    onclick 当用户点击某个对象时调用的事件句柄。
    ondblclick  当用户双击某个对象时调用的事件句柄。
    onerror 在加载文档或图像时发生错误。
    onfocus 元素获得焦点。
    onkeydown   某个键盘按键被按下。
    onkeypress  某个键盘按键被按下并松开。
    onkeyup 某个键盘按键被松开。
    onload  一张页面或一幅图像完成加载。
    onmousedown 鼠标按钮被按下。
    onmousemove 鼠标被移动。
    onmouseout  鼠标从某元素移开。
    onmouseover 鼠标移到某元素之上。
    onmouseup   鼠标按键被松开。
    onreset 重置按钮被点击。
    onresize    窗口或框架被重新调整大小。
    onselect    文本被选中。
    onsubmit    确认按钮被点击。
    onunload    用户退出页面。

鼠标键盘属性

    altKey  返回当事件被触发时，"ALT" 是否被按下。
    button  返回当事件被触发时，哪个鼠标按钮被点击。
    clientX 返回当事件被触发时，鼠标指针的水平坐标。
    clientY 返回当事件被触发时，鼠标指针的垂直坐标。
    ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。
    metaKey 返回当事件被触发时，"meta" 键是否被按下。
    relatedTarget   返回与事件的目标节点相关的节点。
    screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
    screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。
    shiftKey    返回当事件被触发时，"SHIFT" 键是否被按下。

标准 Event 属性

    bubbles 返回布尔值，指示事件是否是起泡事件类型。
    cancelable  返回布尔值，指示事件是否可拥可取消的默认动作。
    currentTarget   返回其事件监听器触发该事件的元素。
    eventPhase  返回事件传播的当前阶段。
    target  返回触发此事件的元素（事件的目标节点）。
    timeStamp   返回事件生成的日期和时间。
    type    返回当前 Event 对象表示的事件的名称。

标准 Event 方法

    initEvent() 初始化新创建的 Event 对象的属性。
    preventDefault()    通知浏览器不要执行与事件关联的默认动作。
    stopPropagation()   不再派发事件。

大概统计了这几类，多谢w3school提供资料，更详细的都在上面，element属性和方法远远不止这些还有很多。