• DOM,全称Document Object Model文档对象模型。
• JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随 心所欲的操作WEB页面。
• 文档
– 文档表示的就是整个的HTML网页文档
• 对象
– 对象表示将网页中的每一个部分都转换为了一个对象。
• 模型
– 使用模型来表示对象之间的关系,这样方便我们获取对象
• 节点:Node——构成HTML文档最基本的单元
• 常用节点分为四类
– 文档节点(document):整个HTML文档 document对象作为window对象的属性存在 的,我们不用获取可以直接使用。
– 元素节点(Element):HTML文档中的HTML标签
– 属性节点(Attr):元素的属性 表示的是标签中的一个一个的属 性,这里要注意的是属性节点并非是元素 节点的子节点,
而是元素节点的一部分。
– 文本节点(Text):HTML标签中的文本内容
<!--
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应查找 HTML 元素
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
1.通过 id 找到 HTML 元素 document.getElementById("txtName")
2.通过标签名找到 HTML 元素 getElementsByTagName("p");
3.通过类名找到 HTML 元素 document.getElementsByClassName("p1")
文档中的每一个元素都是一个对象。利用DOM提供的方法能得到任何一个对象。
我们可以把一个页面结构看做是一颗树,一棵树是由一个个节点构成的
节点及类型:
1.元素节点:就是html标签
2.属性节点:元素的属性,我们可以通过属性的方式来操作
3.文本节点:是元素节点的子节点,也就是存文本
-->
<!--
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
1.getElementByID方法
它是document对象特有的函数。该方法返回一个与那个有着给定id属性值的元素节点对应的对象。2.getElementsByTagName方法
可返回一个对象数组,每个对象分别对应着文档里有着给定标签的一个元素。
该方法也只有一个参数,该参数是标签的名字。3.getElementsByClassName方法
HTML5 DOM中新增的一个方法。这个方法让我们能通过class属性中的类名来访问元素。4.getElementsByName方法
getElementsByName() 方法可返回带有指定名称的对象的集合
该方法与 getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。
另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),
所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。
-->
<!--
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
如需改变 HTML 元素的样式,请使用这个语法:
document.getElementById(id).style.property=新样式
-->
<!--getAttribute方法只有一个参数,我们要查询的属性的名字。
该方法不属于document对象,只能通过元素节点对象调用。比如与getElementById方法合用:--><!--
setAttribute方法允许我们用属性节点的值做修改。
与getAttribute一样,setAttribute也只能用于元素节点。
setAttribute()方法需要我们向它传递两个参数:obiect.setAttribute(attribute,value)
-->
DOM常用属性:
<!--
1.nodeName 属性 :节点名称
nodeName 是只读的
元素节点的 nodeName 与标签名相同
属性节点的 nodeName 与属性名相同
文本节点的 nodeName 始终是 #text
文档节点的 nodeName 始终是 #document2.nodeValue 属性:节点的值。
元素节点的 nodeValue 是 undefined 或 null
文本节点的 nodeValue 是文本本身
属性节点的 nodeValue 是属性值3.nodeType属性,可以使用nodeType属性来获取节点类型。
nodeType属性共有12种取值,其中仅有三种较常用:
元素节点的nodeType属性值是1;
属性节点的nodeType属性值是2;
文本节点的nodeType属性值是3。
//属性节点不是元素的子节点
4.firstChild、lastChild属性
firstChild 获得第一个子节点
lastChild 获得最后一个节点
5.parentNode属性可返回某节点的父节点
-->
DOM动态创建节点:
1. 创建一个元素节点:
1). createElement("标签名"): 按照给定的标签名创建一个新的元素节点. 方法只有一个参数:被创建的元素节点的名字, 是一个字符串.
方法的返回值:是一个指向新建节点的引用指针. 返回值是一个元素节点, 所以它的 nodeType 属性值等于 1.
新元素节点不会自动添加到文档里, 它只是一个存在于 JavaScript 上下文的对象.
2. 创建一个文本节点:
1). createTextNode("文本值"): 创建一个包含着给定文本的新文本节点. 这个方法的返回值是一个指向新建文本节点引用指针.
它是一个文本节点, 所以它的 nodeType 属性等于 3.
方法只有一个参数:新建文本节点所包含的文本字符串. 新元素节点不会自动添加到文档里
3. 为元素节点添加子节点:
1). appendChild(): var reference = element.appendChild(newChild):
给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点.
方法的返回值是一个指向新增子节点的引用指针.
4. 插入节点:
1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面. 节点 targetNode 必须是
element 元素的一个子节点。
5 删除节点:
从一个给定元素里删除一个子节点
格式:var reference = element.removeChild(node);
返回值:返回值是一个指向已被删除的子节点的引用指针。
注意:某个节点被 removeChild() 方法删除时,这个节点所包含的所有子节点将同时被删除。
常用事件:
<!--
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
onclick事件:对象被点击时发生
window.onload事件:dom文档树加载完和所有文件加载完之后执行
onchange:会在元素值改变时触发
onmouseover 事件会在鼠标指针移动到指定的元素上时发生。
onmouseout 属性在鼠标指针移动到元素外时触发。
HTML 事件的例子:
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
-->
事件
说明
鼠标键盘事件
onclick
鼠标单击事件
ondbclick
鼠标双击事件
onmousedown
鼠标按下事件
onmouseup
鼠标松开事件
onmousemove
鼠标移动事件
onmouseover
鼠标移动到对象上事件
onmouseout
鼠标离开某对象事件
onkeypress
按下并松开键盘按键事件
onkeydown
按下键盘按键事件
onkeyup
松开键盘按键事件
事件
说明
页面窗口事件
onabort
图片在下载时被用户中断
onbeforeunload
当前页面的内容将要被改变时触发此事件
onerror
出现错误时触发此事件
onload
页面内容完成时触发此事件
onmove
浏览器的窗口被移动时触发此事件
onresize
当浏览器的窗口大小被改变时触发此事件
onscroll
浏览器的滚动条位置发生变化时触发此事件
onstop
浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
onunload
当前页面将被改变时触发此事件
事件
说明
表单事件
Onblur
当前元素失去焦点时触发此事件
onchange
当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus
当某个元素获得焦点时触发此事件
onreset
当表单中RESET的属性被激发时触发此事件
onsubmit
一个表单被递交时触发此事件