JavaScript-DOM对象(Document Object Model)

介绍

HTML DOM(Document Object Model)定义了所有 HTML 元素的对象和属性/方法, 
HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。
浏览器加载Html页面时,会把Html元素封装在dom对象(document),document对象引用存放在window对象中。
var doc = window.document; //可以省略window

1.HTML DOM常用方法
    getElementById(id) - 获取带有指定 id 的节点（元素） 
    appendChild(node)  - 插入新的子节点（元素） 
    removeChild(node)  - 删除子节点（元素） 
    replaceChild()     - 替换子节点
    insertBefore()     - 在指定的子节点前面插入新的子节点
    createElement()    - 创建元素节点
    createTextNode()   - 创建文本节点
    createAttribute()  - 创建属性节点
    setAttribute()     - 把指定属性设置或修改为指定的值 
    getAttribute()     - 返回指定的属性值 

2.HTML DOM常用属性
    innerHTML  - 节点的文本值 
    attributes - 节点的属性节点
    nodeName   - 节点名（元素/属性/文本）
    nodeValue  - 节点值（元素/属性/文本）
    
    parentNode - 节点的父节点
    childNodes - 节点的子节点
    firstChild/lastChild
    nextSibling/previousSibling

一.获取document元素

二.给document元素添加事件

1.onclick事件



2.onblur/onfocus事件



3.onchange事件
 

    111
    222
 


4.onkeydown/onkeyup事件   



5.onload事件
当document加载完成时触发    
     
 


6.onmousedown/onmouseup/onmouseout/onmouseover/onmousemove
 
  


7.onsubmit表单提交

    

    



8.阻止事件继续传播

    

三.对document节点增删改成

1.新增节点
var a = document.createElement("a");        
a.setAttribute("href", "http://www.baidu.com");         
a.innerHTML = "点击";
var div_= document.getElementById("div_");
div_.appendChild(a);
    
2.删除节点
var div_= document.getElementById("div_");
div_.parentNode.removeChild(div_);

3.替换节点  
var p = document.createElement("p");
p.innerHTML = "段落";     
var div_ = document.getElementById("div_");
div_.parentNode.replaceChild(p, div_);

4.克隆节点
var div_ = document.getElementById("div_");
var div_copy = div_.cloneNode(true);
div_.parentNode.insertBefore(div_copy, div_);

: http://www.jianshu.com/p/1eff601c9502
CSDN博客: http://blog.csdn.net/qq_32115439/article/details/78598158
GitHub博客: http://lioil.win/2017/11/21/js-dom.html
Coding博客: http://c.lioil.win/2017/11/21/js-dom.html