蓝旭前端第六周预习——DOM
DOM简介
DOM
DOM 是一项 W3C (World Wide Web Consortium) 标准,定义了访问文档的标准:
“W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分:
- Core DOM - 所有文档类型的标准模型
- XML DOM - XML 文档的标准模型
- HTML DOM - HTML 文档的标准模型
XML DOM
定义了所有 XML 元素的对象和属性,以及访问它们的方法
HTML DOM
HTML DOM 是 HTML 的标准对象模型和编程接口,它定义了:
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
换言之:HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),HTML DOM 模型被结构化为对象树(节点数树)
通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。
HTML DOM 节点
在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的。 HTML根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
节点父、子和同胞
节点树中的节点彼此拥有层级关系。父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹):
- 在节点树中,顶端节点被称为根(root)
- 每个节点都有父节点、除了根(它没有父节点)
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
HTML DOM 方法
HTML DOM 方法是您能够(在 HTML 元素上)执行的动作
编程接口
可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性:
方法是您能够执行的动作(比如添加或修改元素);属性是您能够获取或设置的值(比如节点的名称或内容)
HTML DOM 属性
HTML DOM 属性是您能够设置或改变的 HTML 元素的值
innerHTML 属性
获取元素内容最简单的方法是使用 innerHTML 属性,innerHTML 属性可用于获取或替换 任何HTML 元素的内容,包括 和
childNodes 和 nodeValue属性
除了 innerHTML 属性,您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容
nodeName 属性
nodeName 属性规定节点的名称,是只读的:
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
- 注:nodeName 始终包含 HTML 元素的大写字母标签名
nodeValue 属性
nodeValue 属性规定节点的值:
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
nodeType 属性
nodeType 属性返回节点的类型。nodeType 是只读的,比较重要的节点类型有:
HTML DOM 访问(查找HTML元素)
访问 HTML 元素等同于访问节点,可以以不同的方式来访问 HTML 元素:
getElementById() 方法
返回带有指定 ID 的元素(最常用),语法:
node.getElementById("id");
getElementsByTagName() 方法
返回带有指定标签名的所有元素,语法:
node.getElementsByTagName("tagname");
getElementsByClassName() 方法
查找带有相同类名的所有 HTML 元素,语法:
node.getElementsByClassName("class");
注:getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效
注:此三个方法可叠用
通过 CSS 选择器查找 HTML 元素
查找class中的所有x元素:
document.querySelectorAll("element.classname")
HTML DOM 修改(改变元素、属性、样式和事件)
改变 HTML 内容
改变元素内容的最简单的方法是使用 innerHTML 属性;
改变 HTML 样式
document.getElementById("id")/元素名.style.属性="值";
使用事件(见 HTML DOM 事件)
HTML DOM 元素
查找 HTML 元素(见 HMTL DOM 访问)
创建新的 HTML 元素
appendChild()
向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上(将新元素作为父元素的最后一个子元素进行添加):
document.createElement("node"); node.appendChild(element);
insertBefore()
将e1放置e2前:insertBefore(e1,e2);
删除已有的 HTML 元素
removeChild()
删除父元素parent中的子元素child:parent.removeChild(child);
替换 HTML 元素
replaceChild()
将父元素parent中的子元素e2用e1替换掉:parent.replaceChild(e1,e2);
HTML DOM 事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应,即在事件发生时执行代码。
常见HTML事件
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
HTML 事件属性
即向 HTML 元素分配事件,以元素属性的形式
使用 HTML DOM 来分配事件
HTML DOM 允许使用 JavaScript 向 HTML 元素分配事件
onload 和 onunload 事件
当用户进入或离开页面时,会触发 onload 和 onunload 事件:onload 事件可用于检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的网页;onload 和 onunload 事件可用于处理 cookies。
onchange 事件
常用于输入字段的验证
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在鼠标指针移动到或离开元素后触发函数
onmousedown、onmouseup 以及 onclick 事件
onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时,触发 onmousedown 事件,然后,当鼠标按钮被松开时,会触发 onmouseup 事件,最后,当鼠标点击完成时,触发 onclick事件
HTML DOM 导航
通过 HTML DOM,您能够使用节点关系在节点树中导航
HTML DOM 节点列表
getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组,可以通过下标号访问这些节点
注:下标号从 0 开始
HTML DOM 节点列表长度
length 属性定义节点列表中节点的数量
导航节点关系
您能够使用三个节点属性:parentNode(父节点)、firstChild(首个子节点) 以及 lastChild(最后一个子节点) ,在文档结构中进行导航
DOM 根节点
这里有两个特殊的属性,可以访问全部文档:
- document.documentElement - 全部文档
- document.body - 文档的主体
HTML DOM 文档
HTML DOM 文档对象是您的网页中所有其他对象的拥有者
HTML DOM Document 对象
文档对象代表您的网页,如果希望访问 HTML 页面中的任何元素,那么总是从访问document 对象开始
查找HTML元素
改变HTML元素
添加和删除元素
添加事件处理程序
查找HTML对象