关于DOM

学习前端的html,css,js，都会讲到DOM，而且用起来也很简单直观。但过去，就是学会了那几个对象的几个方法，比如document.getElementById() ，没有完整的认识。最近在讲前端课程的时候，认真阅读了W3School的DOM教程，忽然明白到了DOM的真正含义，跟大家分享。

基本概念

具体来讲，DOM是对HTML中元素、属性等的抽象。每个HTML的文档节点都会被一个对象来表示，比如document对象表示的是整个文档，select对象表示的是HTML中的一个下拉列表框等等。

这里存在一个对应关系。DOM中的对象与HTML文档中的文档是对应的，改变DOM对象，HTML文档也会随之变化。比如以下代码：

var p = document.getElementById("content");p.style.border="1px solid green";

实际上会为文档中一个id为content 的p元素加一个绿色边框。

所以DOM就是用对象的方式表示HTML中的元素，以支持开发者通过js编程来控制HTML。或者理解为HTML元素提供给JS的接口。

对象有些什么特点呢？对象有属性和方法可以被调用，只要知道这个对象有哪些属性那些方法，就知道我们可以用js对它做哪些操作了。所以，有了w3school和MDN的参考文档，就可以发挥对网页控制的最大能力了。

js一直以来在网页中担任的动态效果的角色完全仰仗于DOM的可编程能力。

特别有意思的是DOM中的一些对象：

element对象，所有对象的父级对象，常用的getElementByTagName()，appendChild()，removeChild()方法，parentNode属性其实都是element对象上的。所以每个对象都可以使用

style对象，对HTML样式的抽象，修改该对象会反映在内联样式上。

attribute对象，HTML元素属性的抽象等等

event对象，对事件的封装，target属性指向触发事件的对象

DOM的基本操作

• 获得元素

  • getElementById()方法 根据ID获得元素

  • getElementsByTagName() 方法根据标签名字获得所有的此类标签，可以应用在某个具体元素上缩小查找范围为该元素内部

  • querySelector() 方法，特别强力，参数为css选择器，但是注意，只返回匹配的第一个元素。若是要返回所有的，使用querySelectorAll()方法。

  • nodeList 属性，获得子节点

  • parentNode 属性，找到元素的父级，另有nextSibling,previousSibling,fristChild,lastChild可以使用

• 创建元素

  • createElement()方法 创建元素

  • createTextNode()方法 创建文本节点

  • innerHTML属性，直接用字符串创建HTML对象

• 添加元素

  • appendChild()方法 在元素中添加子元素

  • insertBefore() 在元素前插入元素

• 删除元素

  • removeChild() 移除子元素，请注意参数为子元素，子元素必须是确实包含在该元素中的

• 替换元素

  • replaceChild() 替换子元素

• 修改属性

  • DOM对象.属性，如imgObj.src=”www.baidu.com/logo.png”

• 修改样式

  • DOM对象.style.具体样式名，参考Style对象 ，比如divObj.style.backgroundColor=”red”

• 事件处理

  • DOM对象.事件句柄=事件处理函数

buttonObj.onclick=function(){alert("Hello My Dear Friend");}

• 事件句柄类型

  • onclick 点击事件

  • onmouseover 鼠标移入对象

  • onmouseout 鼠标移出对象

  • onfocus 对象获得焦点

  • onkeydown 键盘按下

  • onkeyup 键盘弹起

  • onkeypress 键盘按下并弹起

  • onload 图片或者文档加载完成，window.onload 可以达到类似jquery中dom.ready的效果

  • onchange 内容改变，仅限输入框、文本域、下拉框

  • oninput 输入内容

  • onblur 失去焦点

  • onsubmit 表单提交

几个例子

适合初学者练手

• dom_create.html 简单创建元素并加入到对象中

• dom_remove.html 简单移除元素

• live.html 在标签中实时同步输入框内容

• select.html 简单的下拉列表联动

• table_new_row.html 根据输入框内容新建列表行，并可以点击每行删除

• dom_transfer.html 简单穿梭框实现