文档对象模型(DOM)

什么是DOM

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

W3C DOM 标准被分为 3 个不同的部分：

• 核心 DOM - 针对任何结构化文档的标准模型
• XML DOM - 针对 XML 文档的标准模型
• HTML DOM - 针对 HTML 文档的标准模型

这里主要学习HTML DOM

　　HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

　　换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

HTML DOM 节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

• 整个文档是一个文档节点 -- document对象
• 每个 HTML 元素是元素节点 -- element 对象
• HTML 元素内的文本是文本节点 -- text对象
  • 每个元素内至少有一个文本标签,即使元素内什么内容都没有也会有一个文本标签
  • 如果元素内有其他元素,那这个父元素内至少有两个文本标签
  • 如果元素内有多个元素,并且这些元素内没有文本,那这个父元素就有两个文本标签,如果有就是2+文本个数
• 每个 HTML 属性是属性节点 -- attribute对象
• 注释是注释节点 -- comment对象

 

通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。

查找节点

直接查找

document.getElementById("ID")//根据ID获取一个元素
document.getElementsByClassName("class") //返回包含带有指定类名的所有元素的节点列表。
document.getElementsByTagName ("x")//根据元素名获取元素的列表
document.getElementsByName("x")//返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。

间接查找 -- 根据已经查到的元素进行查找 

obj.parentElement//obj的父标签(元素节点),obj是已查到的元素
obj.children //obj所有子标签列表
obj.firstElementChild //obj的第一个子标签元素
obj.lastElementChild//obj的最后一个子标签元素
obj.nextElementSibling//obj同级下一个标签元素
obj.previousElementSibling//obj同级上一个标签元素
// 上面的都是查的元素节点,下面的可以是任何节点
obj.parentNode // 父节点
obj.childNodes // 所有子节点
obj.firstChild  // 第一个子节点
obj.lastChild  // 最后一个子节点
obj.nextSibling // 下一个兄弟节点
obj.previousSibling  // 上一个兄弟节点

节点的属性和操作

创建节点

document.createElement("标签名");//只能在document对象中创建节点,返回创建的节点对象

添加节点

//追加一个子节点（作为最后的子节点）
papa.appendChild(son)
//把增加的节点放到某个节点的前边
papa.insertBefore(son,某个节点)

删除节点

papa.removeChild(son);//获得要删除的元素，通过父元素调用删除

替换节点

papa.replaceChild(newson, oldson);

获取节点的字符串类型的内容

tag.innerTexT//返回标签内的所有文本内容,包括子标签内的.tag为标签
tag.innerHTML    //所有子节点(包括元素、注释和文本节点)但是不包括tag标签本身
tag.outerHTML    //返回自身节点与所有子节点
//更多
tag.textContent//与innerText类似，返回的内容带样式

标签节点属性

tag.attributes //获取所有标签属性{0:"id"}的形式,只有属性名没有属性值
tag.getAttribute("属性")//返回指定属性的值
tag.setAttribute("属性","值")//设置指定标签属性
tag.removeAttribute("属性")//删除属性
//下面是添加属性,并赋值
var s = document.createAttribute("age")
s.nodeValue = "18"
//也可以使用对象的方式来访问和修改属性
tag.属性 //可以用来访问属性
tag.属性="值" //可以给属性设置值
//区别当查看只有属性而没有值得属性时(比如默认选中的checked),对象的方法会返回true和false.而tag
.getAttribute()无论属性存不存在都返回null

class操作

tag.className//获取tag标签的类名(字符串)
tag.classList//获取类名(数组)
tag.classList.remove(cls)//删除指定类
tag.classList.add(cls)//添加类
tag.classList.toggle(cls)//存在就删除，否则添加
tag.classList.contains(cls)//存在返回true，否则返回false

指定CSS操作

tag.style.backgroundColor="red"//直接为tag标签设置样式

JS操作CSS属性的规律：

1.对于没有中横线的CSS属性一般直接使用style.属性名即可。如：

tag.style.width
tag.style.margin

2.对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。如：

tag.style.marginTop//margin-top

tag.style.borderLeft//border-left

 事件

HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。

<a onclick="f1();">//当a标签被点击时就会触发f1函数,

onabort	图像加载被中断
onblur	元素失去焦点
onfocus	元素获得焦点
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onerror	当加载文档或图像时发生某个错误
onchange	用户改变域的内容,通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown	某个键盘的键被按下
onkeypress	某个键盘的键被按下或按住
onkeyup	某个键盘的键被松开
onload	某个页面或图像被完成加载
onmousedown	某个鼠标按键被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标被移到某元素之上
onmouseup	某个鼠标按键被松开
onreset	重置按钮被点击
onresize	窗口或框架被调整尺寸
onselect	文本被选定
onsubmit	提交按钮被点击
onunload	用户退出页面

event对象

有时监视相关的多个标签时每个标签都写上监视属性以及执行的动作会很麻烦,这是只需要监视父(祖)标签,并且为函数传递event对象

<div onclick="f1(event);">
<div></div>
</div>

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

事件通常与函数结合使用，函数不会在事件发生前被执行！

event对象的常用属性

event.target //触发此事件的元素（事件的目标节点）
event.keyCode //被敲击的键生成的 Unicode 字符码

更多