DOM && 事件源

1、getElementById() 方法 返回带有指定 ID 的元素：

getElementById() 方法返回带有指定 ID 的元素：
    <div id="demo">节点</div>
    var demo = document.getElementById('demo');//获取父节点

2、getElementsByClassName() 方法 返回包含带有指定类名的所有元素的节点列表：

    <p class="intro">DOM 很有用。</p>
    <p class="intro">本例演示 <b>getElementsByClassName</b> 方法。</p>
    var x = document.getElementsByClassName("intro");

3、getElementsByTagName() 方法 通过标签名查找 HTML 元素：

    <p>DOM 很有用。</p>
    var x = document.getElementsByTagName("p");

4、querySelectorAll() 方法 通过 CSS 选择器查找 HTML 元素：

    <p class="intro">DOM 很有用。</p>
    <p id="intro">DOM 很有用。</p>
    var x = document.querySelectorAll("p.intro");
    var x = document.querySelectorAll("p#intro");

5、createElement() 方法 创建一个元素标签

    var h1=document.createElement("h1");

6、创建文本节点 createTextNode()

    var txt = document.createTextNode("这是一个盒子");

7、cloneNode() 方法 克隆一个节点 cloneNode(false/true)

    如果为true克隆下面的子节点，如果为false则只克隆当前的标签：
    <div id="app" data="111">
        <h1>asd</h1>
    </div>
    <button onclick="clone()">clone</button>
    <script>
     var oapp =document.querySelector("#app");
     var oh1 = document.querySelector("h1");
      function clone(){
        var newNode=oh1.cloneNode(true);
        oapp.appendChild(newNode);
    }
    </script>

8、innerHTML 属性

innerHTML 属性可用于获取或替换 HTML 元素的内容，（不替换用 "+="）
<div id="app" data="111">
        <h1>asd</h1>
</div>
<button onclick="insert()">insert</button>
<script>
var oapp =document.querySelector("#app"); 
function insert(){
        oapp.innerHTML+="<div><h1>写入文本</h1></div>";
}
</script>

9、 getAttribute(“属性名”) 读取属性值

<div id="app" data="111">
        <h1>asd</h1>
    </div>
<button onclick="Attribute()">.。。</button>
<script>
var oapp =document.querySelector("#app"); 
function Attribute(){
        alert(oapp.getAttribute("data"));//111
    }
</script>

10、setAttribute(属性名,值) 设置属性

<div id="app" data="111">
        <h1>asd</h1>
    </div>
<button onclick="Attribute()">.。。</button>
<script>
var oapp =document.querySelector("#app"); 
function Attribute(){
    oapp.setAttribute("title","hello");
    }
</script>

11、removeAttribute(“属性名”) 删除属性

oapp.removeAttribute("data")

事件

• onclick 鼠标双击事件
• click 鼠标单击
• mouseup 鼠标释放
• mousedown 鼠标按下
• mousemove 鼠标移动
• mouseout 鼠标离开
• onkeyup onkeydown 键盘
• UI focus(聚焦) blur(失焦)

事件源

event(事件源)

事件流：多个节点对象对同一事件进行响应的先后顺序
 目标阶段 冒泡阶段 捕获阶段
addEventListener 事件监听 
  ELE.addEventListener("mouseup",function(){},false);
如果在事件监听上第三个参数为false,是一个事件冒泡，如果是true的话是事件捕获
时间委托：把子事件委托给它的父级进行执行