DOM学习笔记
一、什么是DOM
本人认为，DOM和Java中的包JDOM是一样的东西，就好像是一个包，在包里面提供了一些方法可以让程序员对XHTML中的节点进行访问和操作。
DOM是文档对象模型（document objec model）的缩写。
在这里不详细介绍DOM的其他情况，只是记录了一些方法
二、操作：
1.访问DOM节点：
1.1 按id取元素：getElementById()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM</title>
<script>
function displayNodeInfo()
{
var x = document.getElementById("test");
alert("nodeName:"+x.nodeName+";nodeValue:"+x.nodeValue+";nodeType:"+x.nodeType);
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="displayNodeInfo();"/>
<br/>
<div id="test">Test</div>
</body>
</html>取到的节点是id值为"test”的div节点。
在DOM中一共有四种类型的节点：
| nodetype的值 | 节点类型 |
| 1 | 元素节点 |
| 2 | 属性节点 |
| 3 | 文本节点 |
| 4 | 注释节点 |
1.2 按标签名取元素集：getElementByTagName()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM</title>
<script>
function displayNodeInfo2()
{
var x = document.getElementsByTagName("li");
alert("长度为："+x.length);
}
</script>
</head>
<body>
<input type="button" value="测试2" onclick="displayNodeInfo2()"/>
<ul>
<li>太极1：从零开始</li>
<li>白鹿原</li>
<li>二次曝光</li>
</ul>
</body>
</html>getElementByTagName将会返回一个对象数组，每个对象分别对应着document对象中的一个列表项li元素，因此可以利用length属性查出这个数组里的元素个数。因为x是一个数组，因此可以用循环语句来遍历这个数组中的元素。
2.操作元素内的文本
想要获取元素内文本内容，首先需要理解，DOM中元素并不是直接包含文本的，而是包含在一个子文本节点的。理解这一点非常关键。
但是这个操作会因浏览器的不同而不同（某书上说的）
方法：元素.innerText不适用于火狐，适用于IE
方法：元素.firstChild.nodeValue适用于火狐，也适用于IE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM</title>
<script>
function displayNodeInfo3()
{
var x2 = document.getElementById("test3");
/* alert(x2.innerText);*/
alert(x2.firstChild.nodeValue);
}
</script>
</head>
<body>
<input type="button" value="测试3" onclick="displayNodeInfo3()"/>
<div id="test3">我是一个程序员</div>
</body>
</html>3.操作元素内的HTML
用法和innerText相似，但是可以适用于所有的浏览器，但是他会获取的不仅仅是文本，还有标签，举个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM</title>
<script>
function displayNodeInfo3()
{
var x2 = document.getElementById("test3");
alert(x2.innerText);
/*alert(x2.firstChild.nodeValue);*/
}
function displayNodeInfo4()
{
var x2 = document.getElementById("test3");
alert(x2.innerHTML);
}
</script>
</head>
<body>
<input type="button" value="测试3" onclick="displayNodeInfo3()"/>
<div id="test3">我是<br/>一个<br/>程序员</div>
<br/>
<input type="button" value="测试4" onclick="displayNodeInfo4()"/>
<div id="test4">我是<br/>一个<br/>程序员</div>
</body>
</html>上面两个方法分别用的是innerText和innerHTML方法，运行之后，会发现，按钮“测试3”点击之后，弹出来的对话框是按照格式输出的，而按钮“测试4”弹出来的对话框没有按格式输出，而是一行输出，同时输出了HTML标签<br>
4.修改DOM节点
4.1 创建DOM节点
常用方法如下：
| 方法 | 描述 |
| createAttribute(name) | 用给定名称name创建属性节点 |
| createCDATASection(text) | 用包含文本text的文本子节点创建一个CDATA Section |
| createComment(text) | 创建包含文本text的注释节点 |
| createDocumentFragment() | 创建文档碎片节点 |
| createElement(tagname) | 创建标签名为tagname的元素 |
| createEntityReference(name) | 创建给定名称的实体引用节点 |
| createProcessing Instruction(target,data) | 创建包含给定target和data的PI节点 |
| createTextNode(text) | 创建包含文本text的文本节点 |
举个例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM节点操作</title>
<script>
function createDiv()
{
var newDiv = document.createElement("div");
newDiv.setAttribute("id","test");
var bodyTags = document.getElementsByTagName("body");
var thisBody = bodyTags[0];
thisBody.appendChild(newDiv);
var textNode = document.createTextNode("这是一个新的div");
newDiv.appendChild(textNode);
}
</script>
</head>
<body>
<input type="button" value="创建一个新的div" onclick="createDiv()" />
</body>
</html>首先创建一个div元素，但是为了以后方便对此元素的引用，要给此元素添加一个id因此用setAttribute的方法，为div添加了一个id，之后要用appendChild方法将div元素添加到HTML中，此方法会将div添加到父节点的尾部，所以我们要找到目标父节点，我们想要将div添加到body标签里面，就要获取body元素，bodyTags是getElementsByTagName("body");返回的一个数组，因此body节点就是此数组中的第一个元素，之后将div添加至body里面，再创建一个text节点，添加到div元素里面。
4.2 插入DOM节点
在已有的HTML文档中插入一个DOM节点，首先要考虑插入的位置，是在某些元素之前还是之后，下面介绍两种常用方法：insetBefore和appendChild
1. insertBefore函数：
此函数可以在另一个子元素前插入一个元素：父节点.insertBefore(待插入节点，基准节点)
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM节点操作</title>
<script>
function insertBeforeE()
{
var liNode = document.createElement("li");
liNode.setAttribute("id","newOne");
var textNode = document.createTextNode("女朋友，男朋友");
liNode.appendChild(textNode);
var targetNode = document.getElementById("flag");
var ul = document.getElementsByTagName("ul")[0];
ul.insertBefore(liNode,targetNode);
}
</script>
</head>
<body>
<input type="button" value="前插入一个节点" onclick="insertBeforeE()"/>
<ul>
<li>疯狂愚蠢的爱</li>
<li id="flag">蓝精灵</li>
<li>暮光之城</li>
</ul>
</body>
</html>2.appendChild函数
在前面的例子当中已经用过了
用法：父节点.appendChild(待插入节点)；
他不需要指定其兄弟节点的位置，因为他的作用是添加到末尾。
4.3 删除DOM节点
函数及用法：父节点.removeChild(待删除节点)
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM节点操作</title>
<script>
function deleteNode()
{
var ul = document.getElementsByTagName("ul")[0];
var deleteLi = document.getElementById("bang");
ul.removeChild(deleteLi);
}
</script>
</head>
<body>
<input type="button" value="删除一个节点" onclick="deleteNode()"/>
<ul>
<li>向左走，向右走</li>
<li>重庆森林</li>
<li id="bang">瑞恩.高斯林</li>
</ul>
</body>
</html>由于可以用parentNode方法获取元素的父节点，因此亦可以用一下方法来实现：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM节点操作</title>
<script>
function deleteNode()
{
var deleteLi = document.getElementById("bang");
remove(deleteLi);
}
function remove(elem)
{
if(elem)
{
elem.parentNode.removeChild(elem);
}
}
</script>
</head>
<body>
<input type="button" value="删除一个节点" onclick="deleteNode()"/>
<ul>
<li>向左走，向右走</li>
<li>重庆森林</li>
<li id="bang">瑞恩.高斯林</li>
</ul>
</body>
</html>删除全部节点：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DOM节点操作</title>
<script>
function deleteNode()
{
var ul = document.getElementsByTagName("ul")[0];
emptyNode(ul);
}
function emptyNode(elem)
{
while(elem.firstChild)
{
remove(elem.firstChild);
}
}
function remove(elem)
{
if(elem)
{
elem.parentNode.removeChild(elem);
}
}
</script>
</head>
<body>
<input type="button" value="删除全部子节点" onclick="deleteNode()"/>
<ul>
<li>向左走，向右走</li>
<li>重庆森林</li>
<li id="bang">瑞恩.高斯林</li>
</ul>
</body>
</html> 相关推荐
luvhl 2020-08-17
liaoxuewu 2020-07-08
liaoxuewu 2020-06-26
北京老苏 2020-06-25
Lophole 2020-06-14
SIMONDOMAIN 2020-06-14
luvhl 2020-06-13
SIMONDOMAIN 2020-05-31
hyMiss 2020-05-19
liaoxuewu 2020-05-19
书虫媛 2020-05-15
liaoxuewu 2020-05-11
liaoxuewu 2020-05-10
小仙儿 2020-05-09
hyMiss 2020-05-01
liaoxuewu 2020-04-29
星星有所不知 2020-10-12