DOM学习笔记

最新推荐文章于 2018-07-27 11:52:01 发布

UranusSuperITGirl

最新推荐文章于 2018-07-27 11:52:01 发布

阅读量150

点赞数

分类专栏： jQuery DOM 文章标签： jQuery DOM ViewUI

本文链接：https://blog.csdn.net/UranusSuperITGirl/article/details/84355554

版权

jQuery 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

DOM

1 篇文章 0 订阅

订阅专栏

一、什么是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="测试" οnclick="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" οnclick="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" οnclick="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" οnclick="displayNodeInfo3()"/>
<div id="test3">我是<br/>一个<br/>程序员</div>
<br/>
<input type="button" value="测试4" οnclick="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" οnclick="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="前插入一个节点" οnclick="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="删除一个节点" οnclick="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="删除一个节点" οnclick="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="删除全部子节点" οnclick="deleteNode()"/>
<ul>
    <li>向左走，向右走</li>
    <li>重庆森林</li>
    <li id="bang">瑞恩.高斯林</li>
</ul>
</body>
</html>