1、DOM
在学习DOM之前你应该已经具备了以下三个知识点的应用:HTML CSS javascript
DOM 是 W3C(万维网联盟)的标准。
W3C DOM 标准被分为 3 个不同的部分:
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
- HTML DOM - 针对 HTML 文档的标准模型
在下面的的介绍中,我们会针对html DOM进行举例和验证,HTML DOM 定义了所有 HTML 元素的对象和属性,以及访问它们的方法。换言之,HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
1 <html> 2 <head> 3 <title>DOM 教程</title> 4 </head> 5 <body> 6 <h1>DOM 第一课</h1> 7 <p>Hello world!</p> 8 </body> 9 </html>
在上面的 HTML 中:
- <html> 节点没有父节点;它是根节点
- <head> 和 <body> 的父节点是 <html> 节点
- 文本节点 "Hello world!" 的父节点是 <p> 节点
并且:
- <html> 节点拥有两个子节点:<head> 和 <body>
- <head> 节点拥有一个子节点:<title> 节点
- <title> 节点也拥有一个子节点:文本节点 "DOM 教程"
- <h1> 和 <p> 节点是同胞节点,同时也是 <body> 的子节点
并且:
- <head> 元素是 <html> 元素的首个子节点
- <body> 元素是 <html> 元素的最后一个子节点
- <h1> 元素是 <body> 元素的首个子节点
- <p> 元素是 <body> 元素的最后一个子节点
一些 DOM 对象方法
这里提供一些您将在本教程中学到的常用方法:
方法 | 描述 |
---|---|
getElementById() | 返回带有指定 ID 的元素。 |
getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 |
getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
appendChild() | 把新的子节点添加到指定节点。 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
insertBefore() | 在指定的子节点前面插入新的子节点。 |
createAttribute() | 创建属性节点。 |
createElement() | 创建元素节点。 |
createTextNode() | 创建文本节点。 |
getAttribute() | 返回指定的属性值。 |
setAttribute() | 把指定属性设置或修为指定的值。 |
编程接口:
可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。
方法是您能够执行的动作(比如添加或修改元素)。
属性是您能够获取或设置的值(比如节点的名称或内容).
innerHTML 属性
<html> <body> <p id="intro">Hello World!</p> <script> var txt1=document.getElementById("intro").innerHTML;var txt2= document.write(txt); </script> </body> </html>
在上面的例子中,getElementById 是一个方法,而 innerHTML 是属性。
innerHTML 属性可用于获取或改变任意 HTML 元素,包括 <html> 和 <body>。
对事件作出反应
当事件发生时,可以执行 JavaScript,比如当用户点击一个 HTML 元素时。
如需在用户点击某个元素时执行代码,请把 JavaScript 代码添加到 HTML 事件属性中:onclick=JavaScript
HTML 事件的例子:
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
1 <script> 2 function changetext(id){ 3 id.innerHTML = ‘Hello!‘; 4 } 5 </script> 6 <h1 onclick="changetext(this)" class="curser">请点击这段文本!</h1>
这段代码实现的是当你点击文本的时候,<h1>中的文本节点内容会变成Hello!
onchange 事件 :
function myfunction(){ var x = document.getElementById(‘fname‘); x.value= x.value.toUpperCase(); } 请输入你的英文名:<input type="text" id="fname" onchange="myfunction()" />
这段代码实现的是当你输入自己的英文名,并移出文本框的时候,英文名会变成大写。
getElementsByTagName:
<p>Hello Word!</p> <p>Dom 很有用</p> <script> x = document.getElementsByTagName(‘p‘); document.write("第二段的 innerHTML 是: " + x[1].innerHTML); </script>
这段代码使用的是另外一个方法,返回的是节点列表,然后使用下标获取某个<p>元素的值。