三十：javaScript之DOM对象
1.DOM对象简介
DOM，全称“Document Object Model（文档对象模型）”，它是由W3C组织定义的一个标准。
在前端开发时，我们往往需要在页面某个地方添加一个元素或者删除元素，这种添加元素、删除元素的操作就是通过DOM来实现的。
2.DOM结构
DOM采用树形结构作为分层结构，以树节点形式表示页面中各种元素或内容。
举例：
<html>
<head>
<title><title>
<body>
<h1>我要自学网</h1>
<p>我要自学网成立于……</p>
</body>
</html.>
上面这个HTML文档使用DOM树形结构解析为：
22.png
在DOM中，每一个元素看成一个节点，而每一个节点就是一个“对象”。也就是我们在操作元素时，把每一个元素节点看成一个对象，然后使用这个对象的属性和方法进行相关操作。
下面我们介绍几个关于节点的概念。
1、根节点
在HTML文档中，html就是根节点。
2、父节点
一个节点之上的节点就是该节点的父节点，例如h1的父节点就是body，body的父节点就是html。
3、子节点
一个节点之下的节点就是该节点的子节点，例如h1就是body的子节点。
4、兄弟节点
如果多个节点在同一层次，并拥有相同的父节点，那么这几个节点就是兄弟节点。
例如h1和p就是兄弟节点，因为他们拥有相同的父节点body
DOM对象节点属性;
parentNode 获取当前节点的父节点
childNodes 获取当前节点的子节点集合
firstChild 获取当前节点的第一个子节点
lastChild 获取当前节点的最后一个子节点
previousSibling 获取当前节点的前一个兄弟节点
nextSibling 获取当前节点的后一个兄弟节点
attributes 元素的属性列表
其实除了上表列举的属性之外，还有nodeName、nodeValue和nodeType等几个比较重要的属性。
DOM节点操作简介:
在DOM学习中，对于节点的操作是核心内容，也是整个JavaScript入门教程中最核心技术之一。大家一定要花心思去认真掌握。在一般的前端工作面试中，这些操作是最基本的
关于DOM节点常用操作如下：
（1）创建节点；
（2）插入节点；
（3）删除节点；
（4）复制节点；
（5）替换节点；
获取DOM中指定元素:
在[CSS入门教程]的学习中，我们知道：如果想要对某个元素进行样式操作，就必须先通过一种方式来选中该元素（也就是[CSS选择器]，然后才能进行相关样式的操作。在JavaScript中，如果想要对节点进行创建、删除等操作，同样也要通过一种方式来选中该节点。只有你获取了该元素节点，才能进行各种操作，很容易理解吧。
在JavaScript中，可以通过以下2种方式来选中指定元素：
（1）getElementById()；
（2）getElementsByName()
一、getElementById()
在JavaScript中，如果想通过id来选中元素，我们可以使用document对象的getElementById()方法。
getElementById()方法类似于CSS中的id选择器。
语法：
document.getElementById("元素id");
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="lvye">绿叶学习网JavaScript入门教程</div>
<script type="text/javascript">
var e = document.getElementById("lvye");
e.style.color = "red";
</script>
</body>
</html>
在浏览器预览效果如下：
13-4-1.png
分析：
这里使用document.getElementById()的方法获取id为lvye的div元素，然后把这个DOM对象赋值给变量e，然后使用DOM对象的style对象来设置div元素颜色为红色。我们在“JavaScript操作CSS样式”这一节会详细给大家介绍这种方法。
二、getElementsByName()
在JavaScript中，如果想通过name来选中元素，我们可以使用document对象的getElementsByName()方法。
语法：
document.getElementsByName("表单元素name值");
说明：
getElementsByName()方法都是用于获取表单元素。
与getElementById()方法不同的是，使用该方法的返回值是一个数组，而不是一个元素。因此，我们想要获取具体的某一个表单元素，就必须通过数组下标来获取。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input name="web" id="radio1" type="radio" value="HTML"/>
<input name="web" id="radio2" type="radio" value="CSS"/>
<input name="web" id="radio3" type="radio" value="JavaScript"/>
<input name="web" id="radio4" type="radio" value="jQuery"/>
<script type="text/javascript">
alert(document.getElementsByName("web")[0].value);
</script>
</body>
</html>
在浏览器预览效果如下：
13-4-2.png
其实可以这样说， getElementById()和getElementsByName()这两种方法是“JavaScript选择器”。
创建节点:
在JavaScript中，创建新节点都是先用document对象中的createElement()和createTextNode()这2种方法创建一个元素节点，然后再通过appendChild()、insertBefore()等方法把新元素节点插入现有的元素节点中去。
语法：
var e = document.createElement("元素名"); //创建元素节点
var t = document.createTextNode("元素内容"); //创建文本节点
e.appendChild(t); //把元素内容插入元素中去
举例1：创建简单节点
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var e = document.createElement("h1");
var txt = document.createTextNode("绿叶学习网");
e.appendChild(txt); //把元素内容插入元素中去
document.body.appendChild(e);
</script>
</body>
</html>
在浏览器预览效果如下：
13-5-1.png
举例2：创建复杂节点
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var e = document.createElement("input");
e.id = "submit";
e.type = "button";
e.value = "提交";
document.body.appendChild(e);
</script>
</body>
</html>
在浏览器预览效果如下：
13-5-2.png
插入节点:
在JavaScript中，插入节点有2种方法：
（1）appendChild();
（2）insertBefore();
1、appendChild()
在JavaScript中，我们可以使用appenChild()方法把新的节点插入到当前节点的“内部”。
语法：
obj.appendChild(new)
说明：
obj表示当前节点，new表示新节点。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function insert() {
var e = document.createElement("li");
var str = document.getElementById("txt").value; //获取文本框的值
var txt = document.createTextNode(str);
e.appendChild(txt);
var list = document.getElementById("list");
list.appendChild(e);
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
列项文本：<input id="txt" type="text"/><br />
<input type="button" value="插入新项" onclick="insert()" />
</body>
</html>
在浏览器预览效果如下：
13-6-1.png
分析：
我们在文本框中输入列表项文本“jQuery”，然后点击“插入新项”按钮，浏览器预览效果如下：
13-6-2.png
2.nsertBefore()
在JavaScript中，我们可以使用insertBefore()方法将新的子节点添加到当前节点的“末尾”。
语法：
obj.insertBefore(new,ref)
说明：
obj表示父节点；
new表示新的子节点；
ref指定一个节点，在这个节点前插入新的节点。
举例：
<!DOCTYPE html>
<html >
<head>
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function insert() {
var e = document.createElement("li");
var str = document.getElementById("txt").value; //获取文本框的值
var txt = document.createTextNode(str);
e.appendChild(txt);
var list = document.getElementById("list");
list.insertBefore(e,list.firstChild);
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
</ul>
列项文本：<input id="txt" type="text"/><br />
<input type="button" value="插入新项" onclick="insert()"/>
</body>
</html>
在浏览器预览效果如下：
13-6-3.png
分析：
我们在文本框中输入列表项文本“jQuery”，然后点击“插入新项”按钮，浏览器预览效果如下：
13-6-2.png
删除节点
语法：
obj.removeChild(oldChild);
举例1：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
//定义删除函数
function del() {
var e = document.getElementById("list");
//判断元素节点e是否有子节点
if (e.hasChildNodes) {
e.removeChild(e.lastChild); //删除e元素的最后一个子节点
}
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input type="button" value="删除" onclick="del()"/></div>
</body>
</html>
在浏览器预览效果如下：
13-7-1.png
复制节点
语法：
obj.cloneNode(bool)
说明：
参数obj表示被复制的节点，而参数bool是一个布尔值，取值如下：
（1）1或true：表示复制节点本身以及复制该节点下的所有子节点；
（2）0或false：表示仅仅复制节点本身，不复制该节点下的子节点；
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function add() {
var e = document.getElementById("list");
document.body.appendChild(e.cloneNode(1));
}
</script>
</head>
<body>
<ul id="list">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>ASP.NET</li>
</ul>
<input type="button" value="添加" onclick="add()" />
</body>
</html>
在浏览器预览效果如下：
13-8-1.png
替换节点
语法：
obj.replaceChild(new,old)
说明：
obj，表示被替换节点的父节点；
new，表示替换后的新节点；
old，需要被替换的旧节点。
举例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function replace() {
//获取两个文本框的值
var tag = document.getElementById("tag").value;
var txt = document.getElementById("txt").value;
//获取p元素
var lvye = document.getElementById("lvye");
//根据两个文本框的值创建新节点
var e = document.createElement(tag);
var t = document.createTextNode(txt);
e.appendChild(t);
document.body.replaceChild(e,lvye);
}
</script>
</head>
<body>
<p id="lvye">绿叶学习网</p>
<hr />
输入标签：<input id="tag" type="text"/><br />
输入文本：<input id="txt" type="text"/><br />
<input type="button" value="替换" onclick="replace()" />
</body>
</html>
在浏览器预览效果如下：
13-9-1.png
