1. DOM标准
1.1 定义
- Document Object Model：文档对象模型 ,是 HTML 和 XML 文档的编程接口。
- 定义了访问和处理 HTML 文档的标准方法。是W3C国际组织制定的统一标准。
- DOM 以树结构表达 HTML 文档。
1.2 分类
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对 XML 文档的标准模型
XML DOM 定义了所有 XML 元素的*对象*和*属性*，以及访问它们的*方法*。 - HTML DOM - 针对 HTML 文档的标准模型
HTML DOM 定义了所有 HTML 元素的*对象*和*属性*，以及访问它们的*方法*。换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
2. 节点（Node）
在 HTML DOM 中，所有事物都是节点。HTML文档是由DOM节点构成的集合。
2.1 节点的分类
- 文档节点(Document)：DOM标准将整个HTML文档的相关信息封装后得到的对象。
- 元素节点(Element)：DOM标准将HTML标签的相关信息封装后得到的对象。
- 属性节点(Attribute)：DOM标准将HTML标签属性的相关信息封装后得到的对象。
- 文本节点(Text)：DOM标准将HTML文本的相关信息封装后得到的对象。
2.2 节点的方法和属性
DOM方法是您能够执行的动作（比如添加或修改元素）。
DOM属性是您能够获取或设置的值（比如节点的名称或内容）。
-
nodeName: 代表当前节点的名字
nodeName 是只读的 元素节点的 nodeName 与标签名相同 属性节点的 nodeName 与属性名相同 文本节点的 nodeName 始终是 #text 文档节点的 nodeName 始终是 #document -
nodeType：返回一个整数, 这个数值代表着给定节点的类型，只读属性。
1 -- 元素节点 2 -- 属性节点 3 -- 文本节点 -
nodeValue：返回给定节点的当前值(字符串)，可读写的属性。
节点属性关系图元素节点, 返回值是 null 属性节点: 返回值是这个属性的值 文本节点: 返回值是这个文本节点的内容
2.3 常用方法和属性
一些常用的 HTML DOM 方法：
- getElementById(id) - 获取带有指定 id 的节点（元素）
- appendChild(node) - 插入新的子节点（元素）
- removeChild(node) - 删除子节点（元素)
一些常用的 HTML DOM 属性：
- innerHTML - 节点（元素）的文本值
- parentNode - 节点（元素）的父节点
- childNodes - 节点（元素）的子节点
- attributes - 节点（元素）的属性节点
3. DOM树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：
父元素：直接包含当前元素的元素就是当前元素的父元素
子元素：当前元素直接包含的元素就是当前元素的子元素
祖先元素：直接或间接包含当前元素的所有元素都是当前元素的祖先元素
后代元素：当前元素直接或间接包含的元素就是当前元素的后代元素
兄弟元素：有相同父元素的元素是兄弟元素
<html>
<head>
<meta charset="utf-8">
<title>My title</title>
</head>
<body>
<a href="Link.html">My Link</a>
<h1>My header</h1>
</body>
</html>
<html> 节点没有父节点；它是根节点
<head> 和 <body> 的父节点是 <html> 节点
文本节点 "My header" 的父节点是 <h1> 节点
<h1> 和 <a> 节点是同胞节点，同时也是 <body> 的子节点
可通过节点的 innerHTML 属性来访问文本节点的值
4. DOM API
可通过 JavaScript （以及其他编程语言）对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象，而编程接口则是对象方法和对象属性。
document对象 是window对象的一个属性，代表当前HTML文档，包含了整个文档的树形结构。
获取document对象的本质方法是：window.document，而“window.”可以省略。
4.1. 元素查询
- 在整个文档范围内查询元素节点 ：
| 功能 | API | 返回值 |
|---|---|---|
| 根据Id值查询 | document.getElementById(“id值”) | 一个具体的元素节点 |
| 根据标签名查询 | document.getElementsByTagName(“标签名”) | 元素节点数组 |
| 根据Name属性值查询 | document.getElementsByName(“name值”) | 元素节点数组 |
<body>
<div id="main">
<p id="intro">Hello World!</p>
<p>这个实例演示了 <b>getElementById</b> 方法!</p>
</div>
<script>
x=document.getElementById("intro");
document.write("<p>段落的文本为: " + x.innerHTML + "</p>");
</script>
<script>
x=document.getElementById("main").getElementsByTagName("p");
for (i=0;i<x.length;i++){
document.write(x[i].innerHTML);
document.write("<br>");
}
</script>
</body>
-
根节点
document.documentElement - 全部文档
document.body - 文档的主体访问根节点：
<body> <p>Hello World!</p> <div> <p>DOM 是非常有用的!</p> <p>这个实例演示了 <b>document.body</b> 属性。</p> </div> <script> //弹出body的内容 alert(document.body.innerHTML); </script> </body> -
在具体元素节点范围内查找子节点
| 功能 | API | 返回值 |
|---|---|---|
| 查找全部子节点 | element.childNodes | 节点数组 |
| 查找第一个子节点 | element.firstChild | 节点对象 |
| 查找最后一个子节点 | element.lastChild | 节点对象 |
| 查找指定标签名的子节点 | element.getElementsByTagName(“标签名”) | 元素节点数组 |
- 父节点
| 功能 | API | 返回值 |
|---|---|---|
| 查找指定元素节点的父节点 | element.parentNode() | 节点对象 |
- 查找指定元素的兄弟节点
| 功能 | API | 返回值 |
|---|---|---|
| 查找前一个兄弟节点 | node.previousSibling | 节点对象 |
| 查找后一个兄弟节点 | node.nextSibling | 节点对象 |
<body>
<p id="intro">Hello World!</p>
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
4.2. 属性操作
- 读取属性值
元素对象.属性名
<script>
document.getElementById("btn09").onclick = function(){
//1.获取文本框元素对象
var inputEle = document.getElementById("username");
//2.获取文本框的value属性值
var inputValue = inputEle.value;
alert(inputValue);
};
</script>
<button id="btn09">返回#username的value属性值</button>
- 修改属性值
元素对象.属性名=新的属性值<body> <script> function ChangeBackground() { document.body.style.backgroundColor="blue"; } </script> <input type="button" onclick="ChangeBackground()" value="修改背景颜色" /> <script> document.getElementById("btn10").onclick = function(){ //1.获取文本框元素对象 var inputEle = document.getElementById("username"); //2.设置文本框中的value属性值 inputEle.value = "New Value"; }; </script> </body>
4.3. 文本操作
- 读取文本值
- 修改文本值
获取元素的内容有两种方式:
- innerHTML
- childNodes 和 nodeValue 属性
//修改文本
<body>
<p id="p1">Hello world!</p>
<input type="button" onclick="ChangeText()" value="修改文本" />
<script>
function ChangeText()
{
document.getElementById("p1").innerHTML="Hello Runoob!";
}
</script>
//获取内容
<script>
txt=document.getElementById("p1").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
4.4 元素增删改
| API | 功能 |
|---|---|
| document.createElement(“标签名”) | 创建元素节点并返回，但不会自动添加到文档中 |
| document.createTextNode(“文本值”) | 创建文本节点并返回，但不会自动添加到文档中 |
| element.appendChild(ele) | 将ele添加到element所有子节点后面 |
| parentEle.insertBefore(newEle,targetEle) | 将newEle插入到targetEle前面 |
| parentEle.replaceChild(newEle, oldEle) | 用新节点替换原有的旧子节点 |
| parentEle.removeChild(childNode) | 删除指定的子节点 |
| element.innerHTML | 读写HTML代码 |
-
创建新元素
<body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> //创建了新的 <p> 元素： var para=document.createElement("p"); //创建新的文本节点 var node=document.createTextNode("这是一个新段落。"); //向 <p> 元素追加文本节点 para.appendChild(node); //向已有元素追加这个新元素 var element=document.getElementById("div1"); //将新元素作为父元素的最后一个子元素进行添加 element.appendChild(para); //insertBefore() //var child=document.getElementById("p1"); //element.insertBefore(para,child); </script> </body> -
删除已有元素
<body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); //找到您需要删除的子元素，然后使用 parentNode 属性来查找其父元素： //var child=document.getElementById("p1"); //child.parentNode.removeChild(child); </script> </body> -
替换HTML元素
<body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); var para=document.createElement("p"); var node=document.createTextNode("这是一个新的段落。"); para.appendChild(node); parent.replaceChild(para,child); </script> </body>
5. DOM事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数。</p>
<button id="myBtn">点我</button>
<script>
//名为 displayDate 的函数被分配给了 id=myButn" 的 HTML 元素。
//当按钮被点击时，将执行函数。
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
网友评论