一、获取DOM（事件源）的三种方式

var oDiv1 = document.getElementById("box1");

var oDiv2 = document.getElementByTagName("div")[0];

var oDiv3 = document.getElementByClassName("box")[0];

步骤如下：

1）获取事件源：document.getElementById("box");

2）绑定事件：事件源box，事件onclick和function（）{事件驱动程序}

3）书写事件驱动程序：关于DOM的操作

二、绑定事件的方式

直接绑定匿名函数

(1)直接绑定匿名函数

var oDiv = document.getElementById("box");

oDiv.onclick = function(){

      alter("");

}

(2)先定义函数，再绑定

var oDiv = document.getElementById("box");

oDiv.onclick =fn;

function fn(){alert("")}

(3)行内绑定

<div id="box" onclick="fn()"></div>

<script>

function fn(){alert("")}

</script>

三、JavaScript入门函数window.onload()

此函数调用，是当页面加载完毕（文档和图片的时候），触发的onload()函数，文档先加载，图片资源后加载。

<script>

window.onload = function(){

console.log("alex");

}

</script>

四、样式属性操作

步骤：

1）获取事件源

2）事件

3）事件驱动程序

<div id='box'></div>

<script>

  window.onload = function(){

  var oDiv = document.getElementById("box");

  oDiv.onclick = function(){

        oDiv.style.backgroundColor="yellow";

  }

  }

</script>

五、值的操作

双闭合标签：<innerText></innerText>

单闭合标签：img、input

节点操作

创建节点:

var a1 = document.createElement("li");

插入节点：

父节点.appendChild(新的子节点)

解释：父节点的最后插入一个新的子节点

父节点.insertBefore("新的子节点，作为参考的子节点")

解释：在参考点前插入一个新的节点

如果参考点为null，那么它将在父节点最后插入一个子节点

删除节点：

父节点.removeChild(子节点）

解释：用父节点删除子节点。必须指定是删除哪个字节点

删除自己节点

解释：node1.parentNode.removeChild(node1);