HTML DOM总结

HTML DOM总结

1：HTML DOM介绍

HTML DOM：HTML Document Object Model

定义了访问和操作 HTML 文档的标准方法。

• 核心DOM：针对任何结构的的标准文档
• XML DOM：针对XML结构文档的标准文档，XML DOM 定义了所有 XML 元素的对象和属性，以及访问它们的方法。
• HTML DOM：针对HTML文档的标准文档，定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

HTML DOM 是W3C制定的一套对关于如何获取、修改、添加或删除 HTML 元素的标准。

DOM 将 HTML 文档表达为树结构。

当网页被加载时，浏览器会创建页面的文档对象模型

HTML DOM 模型被构造为对象的树。

2：DOM节点：

在HTML DOM中，所有事物都是节点，DOM是节点树的HTML

• 整个文档是一个文档节点
• 每一个html元素是元素节点
• html元素内的文本是文本节点
• html元素的属性是属性节点
• 注释是注释节点

节点树中所有节点都可以通过js来访问，可以修改、删除、添加以及创建节点

节点树中的节点之间是层级关系，父(parent)、子(child)、同胞(sibling)。

• 节点树中的顶端节点是根节点(root)
• 除了根节点之外的所有节点都有父节点
• 一个节点只有一个父节点，可以有许多祖先节点，可以有许多子节点以及后代节点
• 拥有相同父节点的节点是同胞节点

3：DOM属性

所有html元素都是一个对象，有对象属性和对象方法，属性是能够获取和设置的值，方法是对元素的CRUD；

属性是能够获取和设置的html元素的值

HTML DOM 属性：

• innerHTML：元素节点的文本值
• parentNode：元素节点的父节点
• childNodes：元素节点的自己点
• attributes：元素节点的属性节点
• firstChild:首个子元素
• lastChild：最后一个子元素
• nodeName:节点的名称
  • nodeName是只读的
  • 元素节点的nodeName与标签名一样
  • 属性节点的nodeName与属性名一样
  • 文本节点的nodeName是#text
  • 文档节点的nodeName是#document
• nodeValue：节点的值
  • 元素节点的nodeValue：undefined || null
  • 文本节点的nodeValue：文本本身
  • 属性节点的nodeValue：属性值
• nodeType：节点的类型
  • 只读
  • 元素：nodeType为：1
  • 属性：nodeType为：2
  • 文本：nodeType为：3
  • 注释：nodeType为：8
  • 文档：nodeType为：9

4：DOM方法

方法是在节点元素上进行的操作

HTML DOM 方法：

• document.getElementById("id")
• document.getElementsByTagName("TagName")
• document.getElementsByClassName("class")//ie5,6,7,8无效
• element.appendChild()：把新的节点添加到指定节点
• removeChild()：删除子节点
• replaceChild()：替换子节点
• insertBefore()：在指定的子节点前面插入新的子节点
• document.createAttribute()：创建属性节点
• document.createElement()：创建元素节点
• document.createTextNode()：创建文本节点
• getAttribute()：返回指定的属性值
• setAttribute()：设置属性的值

5：DOM修改

• js能够改变页面中所有html元素--e.innerHTML="文本"
• js能够改变页面中所有html属性--e.src="a.jpg"
• js能够改变页面中所有css样式--e.style.color = "#0f0"
• js能够创建新的HTML元素
• js能够删除已有的HTML元素
• js能够对页面中的所有事件做出反应

创建元素：

parent.appendChild(child)
parent.insertBefore(newChild,targetChild)

删除HTML元素：

var child=document.getElementById("p1");
child.parentNode.removeChild(child);

替换 HTML 元素:

parent.replaceChild(newCihld,oldChild)

6：DOM事件

onclick
onload
onunload
onchange
onmouseover
onmouseout
onmousedown
onmouseup
onmousemove

转载于:https://www.cnblogs.com/bijiapo/p/5473760.html