一、DOM基础

1、DOM简介

2、节点类型

3、获取元素

一、DOM基础

1、DOM简介

DOM（Ducument Object Model）文档对象模型，DOM采用“树形结构”，用树节点来表示HTML页面的每一个元素。

html称为根节点，每一个元素就是一个节点，而每个节点就是一个对象，通过对对象的属性和方法操作，即可实现对元素操作。

2、节点类型

DOM节点共有12种，常见的有三种：

元素节点
属性节点
文本节点

如下：

节点的nodeType属性值

节点类型的注意事项：

一个元素就是一个节点，称为元素节点。
属性节点和文本节点是独立的节点，不属于元素节点。
只有元素节点才可以拥有子节点。

3、获取元素

获取元素，即获取元素节点，对于一个页面，我们要对某个元素进行操作首先要获得该元素。CSS里面通过选择器来获得元素，JavaScipt通过以下几种方式获得指定元素：

（1）getElementByld()

通过id来获取元素，该方法类似于CSS中的“id选择器”。

语法：document.getElementById("id名");

应用举例：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.οnlοad=function()
		{
			
			var myDiv=document.getElementById("div1");
			myDiv.style.color="red";
			document.getElementById("s").stysle.color="green";
		}s
	</script>
</head>

<body>
	<div id="div1">获取元素测试</div>
     <span id="s">要坚强，当然是选择原谅他啊！！！</span>
</body>

onload 事件会在页面或图像加载完成后立即发生。

（2）getElmenntsByTagName

该方法用于通过标签名来选中元素。

基本语法：

document.getElementsByTagName("标签名");

应用举例：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.οnlοad=function()
		{
			var oul=document.getElementById("list");
			var oli=oul.getElementsByTagName("li");
			oli[1].style.color="red";
			
		}
	</script>
</head>

<body>
	<ul id="list">
		<li>HTML</li>
		<li>CSS</li>
		<li>JavaScript</li>
	</ul>
</body>

（3）getElementsByClassName()

该方法通过类名来获取元素。

语法：

docunment.getElementsByClassName(“类名”);

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.οnlοad=function()
		{
			var oul=document.getElementsByClassName("select");
			oul[1].style.color="red";			
		}
	</script>
</head>

<body>
	<ul id="list">
		<li>HTML</li>
		<li>CSS</li>
		<li class="select">JavaScript</li>
		<li class="select">Java</li>
	</ul>
</body>

（4）querySelector()和querySelectorAll()

querySelector()表示选取满足条件的第一个元素；querySelectorAll()表示选取满足条件的所有元素。

应用举例：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.οnlοad=function()
		{
			var oul=document.querySelectorAll(".select");
			oul[1].style.color="red";		
		}
	</script>
</head>

<body>
	<ul id="list">
		<li>HTML</li>
		<li>CSS</li>
		<li class="select">JavaScript</li>
		<li class="select">Java</li>
	</ul>
</body>

（5）getElementsByName()

该方法获取的也是一个类数组，可以通过数组下标的形式准确获取某个元素。可用于获取表单元素，如单选按钮和复选框。

应用举例：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.οnlοad=function()
		{
			var oul=document.getElementsByName("select");
			oul[1].checked=true;/*表示该元素被选中*/		
		}
	</script>
</head>

<body>
	<label><input type="radio" name="select" value="HTML"/>HTML </label>
	<label><input type="radio" name="select" value="CSS"/>CSS </label>
	<label><input type="radio" name="select" value="JavaScript"/>JavaScript</label>
</body>

（6）document.title和docunment.body

这两个方法分别用于获取页面的title和body两个元素。

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.οnlοad=function()
		{
			document.body.innerHTML="<p>测试body</p>";		
		}
	</script>
</head>

<body>

4、创建元素

“动态DOM操作”，用JavaScript创建元素，这一元素在HTML中一开始是不存在的，HTML创建元素是静态的，而JavaScript创建元素是动态的。

使用JavaScript创建元素创建一个元素需要以下四步完成：

创建元素节点：createElement()
创建文本节点：createTextNode()
把文本节点插入元素节点：appendChild()
把组装好的元素插入到已有元素中：appendChild()

应用举例：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.οnlοad=function()
		{
			var oDiv=document.getElementById(("content");
	        var oStrong=document.createElement("strong");//创建元素节点
			var oText=document.createTextNode("测试创建元素");//创建文本节点
			oStrong.appendChild(oText);//将文本节点插入到元素节点
			oDiv.appendChild(oStrong);//将组装好的元素插入到div元素
		}
	</script>
</head>

<body>
	<div id="content"></div>
</body>

5、插入元素

插入元素：即JavaScript把创建好的元素插入到已经存在的元素中，插入元素有两种方法：

appendChild()
insetBefore()

（1）appendChild()

该方法用于将一个新元素插入到父元素的内部子元素的末尾。

A.appendChild(B);

将新元素B插入到父元素A中的末尾。

（2）insetBefore()

该方法用于将新元素插入到父元素中的某个子元素之前。

A.insertBefore(B,ref);

将新元素B插入到父元素B中的ref元素之前。

6、删除元素

用于删除父元素下的某个子元素。

A.removeChild(B);

删除父元素A的子元素B

7、复制元素

使用cloneNode（）方法来实现复制元素。

obj.cloneNode(bool)

obj表示被复制的元素

bool=true,表示复制元素本身及其复制该元素下的所有子元素。

bool=false,表示仅仅复制元素本身。

8、替换元素

A.replaceChild(new,old);

A为父元素，new为新子元素，old为旧子元素。

二、DOM进阶

1、HTML属性操作

html属性操作有两种方式：使用对象属性和使用对象方法

（1）使用对象属性对HTML属性操作

1）获取HTML属性值

获取属性值，通过属性名来找到该属性对应的值。

obj.attr

obj是元素名，是一个DOM对象；attr是属性名。

要想获得某个属性的值，首先要使用getElementById()等方法找到这个元素节点，然后才可以获取该属性的值。

应用举例：

点击按钮获取输入文本框的数据

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
</head>

<body>
	<input id="txt" type="text"/>
	<input id="btn" type="button" value="获取"/>
	<script type="text/javascript">
		var oBtn=document.getElementById("btn");
		oBtn.οnclick=function()
		{
			var oTxt=document.getElementById("txt");
			alert(oTxt.value);
		}
	</script>
</body>

2）设置HTML属性值

obj.attr="值";

obj是元素名，是一个DOM对象，attr是属性名。

（2）使用对象方法对HTML属性操作

1）getAttribute()

该方法用来获取元素的某个属性的值。使用对象属性方式无法获得自定义属性，而使用对象方法可以获得对象属性。

obj.getAttribute("attr")

obj是元素名，attr是属性名。

应用举例：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.οnlοad=function()
		{
			var oBtn=document.getElementById("btn");
			oBtn.addEventListener("click",function(){
				alert(oBtn.getAttribute("id"));
			},false)
		};
	</script>
</head>

<body>
	<input id="btn" type="button" value="按钮" data="test"/>
 	
</body>

2）getAttribute()

该方法用来设置元素的某个属性。

obj.setAtrribute("attr","值")

obj是元素名，attr是属性名，“值”是要设置的属性值。

3）removeAttribute()

该方法用于删除元素的某个属性。

obj.removeAttribute("attr")

4）hasAttribute()

该方法用来判断元素是否含有某个属性。

obj.hasAttribute("attr")

2、CSS属性操作

（1）获取CSS属性值

使用getComputedStyle()方法来获取一个CSS属性的取值。JavaScript操作css属性用驼峰写法。

getComputedStyle(obj).attr

obj表示DOM对象，attr表示CSS属性名。

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		#box
		{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.οnlοad=function()
		{
			var oBtn=document.getElementById("btn");
			var oBox=document.getElementById("box");//获取CSS DOM对象
			oBtn.οnclick=function()
			{
				alert(getComputedStyle(oBox).backgroundColor);
			}
		};
	</script>
</head>

<body>
	<input id="btn" type="button" value="按钮" data="test"/>
 	<div id="box"></div>
</body>

（2）设置CSS属性值

有两种方法设置：style对象和cssText()方法

1）style对象

obj.style.attr="值";

obj表示DOM对象，attr表示CSS属性名。该属性用驼峰写法。

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		#box
		{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.οnlοad=function()
		{
			var oBtn=document.getElementById("btn");
			var oBox=document.getElementById("box");//获取CSS DOM对象
			oBtn.οnclick=function()
			{
				oBox.style.backgroundColor="blue";
			}
		};
	</script>
</head>

<body>
	<input id="btn" type="button" value="按钮" data="test"/>
 	<div id="box"></div>
</body>

2）cssText属性

该属性可以用来同时设置多个CSS属性。注意该属性使用css写法，不能用骆驼峰写法。

obj.style.cssText="值";

应用举例：

<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		#box
		{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
	<link type="text/css" rel="stylesheet" href="style.css">
	<script type="text/javascript">
		window.οnlοad=function()
		{
			var oBtn=document.getElementById("btn");
			var oBox=document.getElementById("box");//获取CSS DOM对象
			oBtn.οnclick=function()
			{
				oBox.style.cssText="width:50px;height=50px;background-color:blue;";
			}
		};
	</script>
</head>

<body>
	<input id="btn" type="button" value="按钮" data="test"/>
 	<div id="box"></div>
</body>