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

你可能感兴趣的:(HTML DOM总结)