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>

相关推荐