DOM:DOM可以使用脚本,动态的访问或操作,网页的内容、网页外观、网页结构。
DOM分类(学习属性和方法)
- 核心DOM:提供了同时操作HTML文档和XML文档的公共属性和方法
- HTML DOM:针对HTML文档提供的专用的属性和方法
- XML DOM:针对XML文档提供的专用的属性和方法
- CSS DOM:提供了操作CSS的属性和方法
- Event DOM:事件对象模型。如:onclick、onload等
HTML节点树
节点关系(根节点、子节点、父节点、兄弟节点)
DOM中节点类型
- document文档节点,代表整个网页,不代表任何HTML标记。是HTML标记的父节点。
- element元素节点,指任何HTML标记。每一个HTML标记就称一个“元素节点”。它可以有文本节点和属性节点。
- attribute属性节点,指HTML标记的属性。
- text节点,是节点树的最底层节点。
核心DOM中公共的属性和方法
- 提示:核心DOM中查找节点(标记),都是从根节点开始的。
- 节点访问
- nodeName:节点名称
- nodeValue:节点值。只有文本节点才有值,元素节点没有值。不包含标记,只是文本。
- firstChild:第一个子节点
- lastChild:最后一个子节点
- childNodes:子节点列表,是一个数组。
- parentNode:父节点
- 查找HTML标记
- document.firstChild
- document.documentElement
- 查找body标记
- document.firstChild.lastChild
- document.body
- 为什么,document.body.first找不到table节点?
- 核心DOM是针对的属性和方法,主要针对HTML4.0开发的。
- 在Firefox下,会把空格和换行,当成文本节点
- HTML4.0是没有DTD类型定义的
- 节点属性
- setAttribute(name,value):给某个节点添加一个属性
- getAttribute(name):获取某个节点属性的值
- removeAttribute(name):删除某个节点的属性
- 节点的创建
- createElement(tagName):创建一个HTML标记,一个节点
- tagName:的HTML标记名称,如:var imgObj = document.createElement(“img”);
- parentNode.appendChild(childNode):将创建的节点,追加到某个父节点下
- parentNode.removeChild(childNode):删除子节点
- createElement(tagName):创建一个HTML标记,一个节点