【学习笔记】：DOM对象及事件绑定

一、DOM的概念

DOM的英文全称是 Document Object Model，即文档对象模型，是用以操作HTML文档和XML文档的API。

W3C将DOM分为三个不同的部分，分别是：核心DOM，XML DOM，HTML DOM。

二、DHTML与HTML DOM

所谓DHTML即Dynamic HTML，是动态的HTML。

这门技术可以使用客户端脚本语言，利用HTML DOM 控制HTML的元素，将静态的HTML内容变成动态。

---

本篇主要是对HTML DOM的学习总结。

HTML DOM可以把HTML文档看作一棵节点树，可以利用DOM对象的属性或方法对这些节点进行增删改查的操作。

三、Document对象

Document对象代表载入浏览器的HTML文档，可以通过全局对象Window获得Document对象。

获取元素方法

getElementById（id值）：根据id值获取一个元素。

getElementsByName（name值）：根据name值获取一个元素数组。

getElementsByTagName（tagName值）：根据标签名获取一个元素数组。

---

在HTML DOM中，每个部分都是节点：文档本身，元素，属性，注释都是节点。

四、Element对象

Element对象代表文档中的元素，可以通过Document的许多方法获取。

与属性相关方法

setAttribute(属性名，属性值)：将第一个input标签的type属性设置为button。

document.getElementByTagName("input")[0].setAttribute("type","button");

removeAttribute(属性名)：将id为"city"的元素的style属性移除。

document.getElementById("city").removeAttribute("style");

五、对DOM对象的操作

增删改查。

1、DOM对象的属性

innerHTML：元素（节点）的文本值。

parentNode：元素（节点）的父节点。

childNodes：元素（节点）的子节点。

2、创建元素

document.createElement("节点类型");//为指定的标签创建一个元素的实例。

3、挂载元素

parentElement.appendChild(childElement);//在父元素最后位置添加子元素。
parentElement.insertBefore(newElement,oldElement);//将元素作为父对象的子元素插入其中。

4、删除元素

parentElement.removeChild(chileElement);//删除父元素的指定子元素。

5、克隆元素

newElement = oldElement.cloneNode(boolean);//默认为false，即不克隆节点中的子节点。

六、调整元素样式的方式

直接利用元素的style属性节点设置。

    
        
        
        
    
    
        
hello
        
    

实现定义类选择器的样式，点击事件触发时，更改其className值即可。

    
        
        

        
        
    
    
        
hello
        
    

七、Event对象

Event对象代表事件的状态：如鼠标的位置，鼠标是否点击，键盘是否按下等等。

通常与函数结合使用，且函数不会再事件发生前执行。

1、常见的几类事件

点击事件

• onclick：单击事件
• ondbclick：双击事件

焦点事件

• onblur：失去焦点，一般用于表单校验。
• onfocus：获得焦点。

加载事件

• onload：图片或页面加载完成。

鼠标事件

• onmousedown：鼠标按下。
• onmouseup：鼠标松开。
• ommousemove：鼠标移动。
• onmouseover：鼠标移到元素上。
• onmouseout：鼠标从元素上移开。

键盘事件

• onkeydown：键盘按下。
• onkeyup：键盘松开。
• onkeypress：键盘按下并松开。

选中和改变事件

• onchange：域的内容被改变
• onselect：文本被选中

表单事件

• onsubmit ：提交表单按钮被点击。（事件绑定的函数返回false则表单将会被阻止提交）

• onreset：重置按钮被点击。

2、绑定事件的几种方法

直接在HTML标签上，指定事件的属性，属性值即为js代码）。

    
        
        
        
    
    
        
hello
        
    

通过DOM元素对象与匿名方法指定实现属性。

    
        
        
        
    
    
        
hello
        
    

还有其他的方法，以后遇到的时候再做总结。

---

参考：W3School