day13—HTML DOM编程

HTML DOM的概念

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法，它将 HTML 标签对象化，即将网页中的每个元素都看作一个对象，然后用访问对象的属性和方法的方式来操作元素。

DOM操作－CRUD：增删改查

DOM操作－查询

如果需要操作某 HTML 元素，必须首先能够找到该元素，才能读取该元素节点的各项信息，或者修改该元素的相关数据。

DOM 操作中，提供了多重查询元素节点的方式，根据实际需求采用不同的方式。

通过 id 查询：getElementById() 方法

通过层次（节点关系）查询：parentNode 等

通过标签名称查询: getElementsByTagName() 方法

通过 name 属性查询: getElementsByName() 方法

根据层次查找节点

DOM 节点树上的每个节点都有层次关系，比如有父节点、子节点，或者兄弟姐妹节点。因此，也可以根据层次关系来查找节点。常用的方式有：

parentNode：返回元素的父节点；

firstChild：返回元素的首个子节点；

lastChild：返回元素的最后一个子节点；

previousSibling：返回位于相同节点树层级的前一个节点；

nextSibling：返回位于相同节点树层级的下一个节点；

childNodes ：返回元素的所有子节点组成的数组。

ps：实际开发中，只会使用到parentNode方法，因为其他方法会受限于html标签放置产生的空格、回车等。下一节Jquery操作，会有更好的方法来弥补其他方法。

DOM 操作－增加

document.createElement() 方法用于创建新的元素节点，只需要将需要创建的元素节点的名称作为参数传入即可。该方法返回新创建的元素节点，可以对新节点设置信息后，再加入到 DOM 文档中。

创建新节点

var newNode = document.createElement("input");

//设置节点的信息

newNode.type = "text";

newNode.value = "mary";

newNode.style.color = "red";

上述代码创建一个 <input> 元素，并设置为文本框，且默认值为 mary，字体颜色为红色。

创建完新节点后，需要将新节点加入到节点树上。新节点必需作为节点树上某个已有节点的子节点存在，因此，可以使用方法 parentNode.appendChild(newNode)来实现。该方法实现追加的功能，即，新节点作为父节点的最后一个子节点存在 。



parentNode.insertBefore(newNode,refNode);

第一个参数表示需要加入的新节点，第二个参数refNode 为参考节点，新节点将位于此节点之前。需要注意的是，refNode 必需也是 parentNode 的子节点。



DOM 操作－删除

parentNode.removeChild(childNode)

如果需要删除某节点，则需要对其父节点调用 removeChild 方法。

也可以这样：

childNode.parentNode.removeChild(childNode)



事件

事件指 DHTML 对象在状态改变、操作鼠标或键盘时触发的动作，分为三类：

鼠标事件：如 onclick、ondblclick、onmousevoer、onmouseout等；

键盘事件：如 onkeydown、onkeyup等；

状态改变事件：如 onblur、onfocus、onload、onchange 等。

事件触发后将会产生一个 event 对象，该对象用于记载事件相关的所有信息，如引发事件的节点对象、位置等信息。

为元素定义事件时，最常用的方式是，在 html 属性定义中直接处理事件。

<input type=“button” value=“按钮” onclick=“method();” />

另外，也可以在 js 代码中为元素动态的定义事件，常用于动态创建页面元素时。

//btnObj 为一个按钮对象
btnObj.onclick = method;
//或
btnObj.onclick =  function(){
       alert(“hello”);    
       };

另外如果希望取消某事件，则只需要将 false 返回给事件句柄即可，代码如下所示：

<元素 onXXX = “return false；”/>

event 对象

任何事件触发后将会产生一个 event 对象，该对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息。该对象的常用属性有：clientX、clientY、cancelBubble 等。如果希望通过 event 对象获取事件的详细信息，首先需要获取 event 对象。在js代码中，获取 event 对象需要考虑浏览器兼容问题。

function function2() {
    alert(event.clientX + ":" + event.clientY);
}
<div onclick=“function2();”>div text</div>

firefox（火狐浏览器）不允许JS当中出现event关键字，但可在html代码中使用event关键字获取对象