一. 什么是DOM对象
- 定义：DOM(Document Object Mode，文档对象模型)是一套web标准，定义了访问HTML文档的一套属性、方法和事件
- 本质：网页与脚本语言沟通的桥梁。脚本语言通过DOM对象来访问html页面，从而改变文档的结构、样式和内容
- 当浏览器载入HTML文档，它就会成为doument 对象
- HTML DOM独立于平台和编程语言，它可被任何编程语言，如Java、JavaScript和VBScript使用
二. DOM对象
1. 在HTML DOM中：
- 文档对象：整个HTML文档
- 节点对象：所有的HTML元素是元素节点
- 属性对象：依附于元素节点，所有节点的属性都是节点
- 文本对象：HTML元素内的文本是文本节点
2. 两个顶级节点：
- Window：表示当前打开的浏览器窗口
- Document：表示窗口中显示的当前html页面(文档)
当浏览器载入 HTML 文档, 它就会成为 Document 对象
Document 对象是HTML文档的根节点与所有其他节点（元素节点，文本节点，属性节点, 注释节点）
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问
提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问
三. HTML DOM 节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点
四. 节点的父、子、同胞关系
节点树中的节点彼此拥有层级关系，常用父(parent)、子(child)、同胞(sibling)等术语来描述这些关系：父节点拥有子节点，同级的子节点被称为同胞
- 在节点树中，顶端节点被称为根(root)
- 每个节点都有父节点、除了根(它没有父节点)
- 一个节点可拥有任意数量的子节点
- 同胞是拥有相同父节点的节点
这些关系如下图所示：
五. Document 对象属性和方法
document对象的属性和方法:
属性/方法 | 描述 |
document.title
| 返回当前文档的标题
|
document.URL
| 返回当前文档完整的URL
|
document.forms
| 返回对文档中所有Form对象引用
|
document.getElementsByClassName()
| 返回文档中所有指定类名的元素集合，作为NodeList对象
|
document.getElementById()
| 返回对拥有指定id的第一个对象的引用
|
document.getElementsByName()
| 返回带有指定名称的对象集合
|
document.getElementsByTagName()
| 返回带有指定标签名的对象结合
|
document.images
| 返回对文档中所有image对象引用
|
document.querySelector()
| 返回文档中匹配指定的CSS选择器的第一元素
|
document.querySelectorAll()
| document.querySelectorAll()是HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
|
实例1：document.title
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
The title of the document is:
<script type="text/javascript">
document.write(document.title)
</script>
</body>
</html>
结果：
实例2：document.URL
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
The URL of the document is:
<script type="text/javascript">
document.write(document.URL)
</script>
</body>
</html>
结果：
实例3：document.forms
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>
<script type="text/javascript">
document.write("This document contains: ")
document.write(document.forms.length + " forms.")
</script>
</body>
</html>
结果：
实例4：document.getElementsByClassName()
<!DOCTYPE html>
<html>
<head>
<title>My title</title>
</head>
<body>
请输入你的名字: <input type="text" class="name" />
<br>
请输入他的名字: <input type="text" class="name" />
<br>
<button onclick="myFunction()">点我</button>
<script type="text/javascript">
function myFunction(){
var i
var x = document.getElementsByClassName("name")
for (i=0; i<x.length; i++) {
x[i].style.backgroundColor = "blue";
}
}
</script>
</body>
</html>
结果：
实例5：document.getElementById()
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function getValue(){
var x = document.getElementById("myHeader");
alert(x.innerHTML);
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">This is a header</h1>
<p>Click on the header to alert its value</p>
</body>
</html>
结果：
实例6：document.getElementsByName()
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function getElements(){
var x = document.getElementsByName("myInput");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br/>
<input name="myInput" type="text" size="20" /><br/>
<input name="myInput" type="text" size="20" /><br/>
<br/>
<input type="button" onclick="getElements()" value="How many elements named 'myInput'?" />
</body>
</html>
结果：
实例7：document.getElementsByTagName()
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function getElements(){
var x = document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br/>
<input name="myInput" type="text" size="20" /><br/>
<input name="myInput" type="text" size="20" /><br/>
<br/>
<input type="button" onclick="getElements()" value="How many input elements?" />
</body>
</html>
结果：
实例8：document.getElementsByTagName()
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function getElements(){
var x = document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br/>
<input name="myInput" type="text" size="20" /><br/>
<input name="myInput" type="text" size="20" /><br/>
<br/>
<input type="button" onclick="getElements()" value="How many input elements?" />
</body>
</html>
结果：
六. Element 对象
在HTML DOM中，元素对象：一个HTML元素，即一个HTML标签对
元素对象：
- 可以有子节点、父节点
- 可以有属性
- 有节点名称、节点类型、节点值
七. Element 对象的属性和方法:
属性/方法 | 描述 |
element.attributes
| 返回一个元素的属性数组
|
element.childNodes
| 返回元素的一个子节点的数组
|
element.ClassName
| 设置或返回元素的class属性
|
element.getAttribute()
| 返回指定元素的属性值
|
element.getAttributeNode()
| 返回指定属性节点
|
element.getElementsByTagName()
| 返回指定标签名的所有子元素集合
|
element.getElementsByClassName()
| 返回文档中所有指定类名的元素集合，作为NodelList对象
|
element.nodeName
| 返回元素的标记名(大写)
|
element.nodeType
| 返回元素的节点类型，元素节点的nodeType属性值是1，属性节点的属性值是2，文本节点的属性值是3
|
element.nodeValue
| 返回元素的节点值
|
实例1：element.attributes
<!DOCTYPE html>
<html>
<body>
<p>点击按钮来查看 button 元素拥有多少属性</p>
<button id="myBtn" onclick="myFunc()">试一下</button>
<p id="demo"></p>
<script>
function myFunc() {
var x = document.getElementById("myBtn").attributes.length;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
结果：
实例2：element.childNodes， 注意：元素中的空格被视为文本，而文本被视为节点
<html>
<body>
<p id="demo">请点击按钮来获得 body 元素子节点的相关信息</p>
<button onclick="myFunc()">试一下</button>
<script>
function myFunc() {
var txt = "";
var c = document.body.childNodes;
for (i=0; i<c.length; i++) {
txt = txt + c[i].nodeName + "<br>";
};
var x = document.getElementById("demo");
x.innerHTML = txt;
}
</script>
</body>
</html>
结果：
实例3：element.className
<!DOCTYPE html>
<html>
<body id="myid" class="mystyle">
<script>
var x = document.getElementsByTagName("body")[0];
document.write("Body class name is: " + x.className);
</script>
</body>
</html>
结果：
实例4：element.getAttribute()
<!DOCTYPE html>
<html>
<body>
请阅读 <a href="http://www.baidu.com" target="_blank">百度一下</a>
<p id="demo">请点击按钮来显示上面这个链接的 target 属性值</p>
<button onclick="myFunc()">试一下</button>
<script>
function myFunc() {
var a = document.getElementsByTagName("a")[0];
document.getElementById("demo").innerHTML = a.getAttribute("target");
}
</script>
</body>
</html>
结果：
实例5：element.getAttributeNode()
<!DOCTYPE html>
<html>
<body>
请阅读 <a href="http://www.baidu.com" target="_blank">百度一下</a>
<p id="demo">请点击按钮来显示上面这个链接的 target 属性值</p>
<button onclick="myFunc()">试一下</button>
<script>
function myFunc() {
var a = document.getElementsByTagName("a")[0];
var x = document.getElementById("demo");
x.innerHTML = a.getAttributeNode("target").value;
}
</script>
</body>
</html>
结果：
实例6：element.getElementsByTagName()
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
<p id="demo">请点击按钮来改变某个列表项的文本</p>
<button onclick="myFunc()">试一下</button>
<script>
function myFunc() {
var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";
}
</script>
</body>
</html>
结果：
实例7：element.getElementsByClassName()
<!DOCTYPE html>
<html>
<body>
<ul>
<li class="drink">Coffee</li>
<li>Tea</li>
</ul>
<p id="demo">请点击按钮来改变某个列表项的文本</p>
<button onclick="myFunc()">试一下</button>
<script>
function myFunc() {
var list = document.getElementsByClassName("drink")
alert(list[0].innerHTML)
}
</script>
</body>
</html>
结果：
实例8：element.nodeName 得到的元素节点名是大写
<!DOCTYPE html>
<html>
<body>
<p id="demo">请点击按钮来获得 body 元素子节点的节点名</p>
<button onclick="myFunc()">试一下</button>
<script>
function myFunc() {
var txt = "";
var c = document.body.childNodes;
for (i=0; i<c.length; i++) {
txt = txt + c[i].nodeName + "<br>";
};
var x = document.getElementById("demo");
x.innerHTML = txt;
}
</script>
</body>
</html>
结果：
实例9：element.nodeType
<!DOCTYPE html>
<html>
<body>
<p id="demo">请点击按钮来获得 body 元素子节点的节点类型</p>
<button onclick="myFunc()">试一下</button>
<script>
function myFunc() {
var txt = "";
var c = document.body.childNodes;
for (i=0; i<c.length; i++) {
txt = txt + c[i].nodeType + "<br>";
};
var x = document.getElementById("demo");
x.innerHTML = txt;
}
</script>
</body>
</html>
结果：
实例10：element.nodeValue
<!DOCTYPE html>
<html>
<body>
<p id="demo">请点击按钮来获得 button 元素的节点值</p>
<button onclick="myFunc()">试一下</button>
<script>
function myFunc() {
var c = document.getElementsByTagName("button")[0];
var x = document.getElementById("demo");
x.innerHTML = c.childNodes[0].nodeValue;
}
</script>
</body>
</html>
结果：
八. DOM事件
1. 我们可以再事件发生时执行Javascript，比如当用户在 HTML 元素上点击时
如需在用户点击某个元素时执行代码，请向一个HTML事件属性添加 Javascript 代码：
onclick = action...
一般等号后面是js的函数名，比如onclick = "myFunc()"
2. DOM事件分类
- 键盘事件
- 鼠标事件
- 框架/对象 (Frame/Object)事件
- 表单事件
- 拖动事件
3. HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
4. 常用事件
- onclick：点击事件
- onload：加载事件
- onmousemove：鼠标被移动
- onmousedown：鼠标按钮被按下
- onmouseup：鼠标按钮被松开
- onmouseout：鼠标从某元素移开
- onmouseover：鼠标移到某元素上
- onsubmit：确认按钮被点击
参考文章
http://www.w3school.com.cn/h.asp
http://www.runoob.com/html/html-tutorial.html
