Document对象，Element对象和Node对象简介_document頧歪ode撖寡情_poclist的博客

Document对象：

根元素的访问，也就是HTML标签的访问。使用document.documentElement访问根对象。
使用Document对象查找对象
- getElementById()：通过节点的id属性，查找对应节点。
- getElementsByName()：通过节点的name属性，查找对应节点。
- getElementsByTagName()：通过节点名称，查找对应节点。
使用Document对象的方法创建节点：
- crateElement(tagName)：创建元素节点。
- createTextNode(data)：创建文本节点。
- createAttirbute(name)：创建属性节点。(不使用)

Element对象：

操作Element对象的属性：
- 获取属性：getAttribute(name);方法
- 设置属性：setAttribute(name,value)方法。
- 删除属性：removeAttribute(name);方法。
在Element对象中查找Element对象：
- 在Element对象的范围内，可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法。而该方法返回的是一个集合。

Element对象的一个案例：

在一个<ul></ul>标签下创建一个li标签

 <body>
  	<ul id="city">
    	<li id="bj" name="beijing">北京</li>
		<li id="tj" name="tianjin">天津</li>
  		<script type="text/javascript">
  			//创建一个标签元素
			var liElment = document.createElement("li");
			//创建一个文本节点
			var textElement = document.createTextNode("上海");
			//将文本节点加到标签元素下面
			liElment.appendChild(textElement);
			//为标签元素创建属性
			liElment.setAttribute("id","sh");
			liElment.setAttribute("name","Shanghai");
			//将标签元素加到ul标签下
			document.getElementById("city").appendChild(liElment);
  		</script>
  </body>

Node对象包含：

节点名称，值和类型。
父节点，子节点和同辈节点。
节点属性
检测子节点和属性。
操纵Dom节点树。
复制和移动节点。

节点名称，值和类型：

nodeName：其内容就是给节点的名称。
- 如果是元素节点，nodeName返回这个元素的名称。
- 如果是属性节点，nodeName返回这个属性的名称。
- 如果是文本节点，nodeName返回这个内容为#text的字符串。
nodeType：返回一个整数，这个数值代表给点节点的类型。
- Node.ELEMENT_NODE：1，元素节点。
- Node.ATTRIBUTE_NODE：2，属性节点。
- Node.TEXT_NODE：3，文本节点
nodeValue：返回给定节点的当前值(字符串)：
- 如果给定节点是一个元素节点：返回null。
- 如果给定节点是一个属性节点：返回属性的值。
- 如果给定节点时一个文本节点：返回文本节点的内容。

下面是使用的示例：

<body>
    <ul id="city">
    	<li id="bj" name="beijing">北京</li>
		<li id="tj" name="tianjin">天津</li>
	<script type="text/javascript">
		var bj = document.getElementById("bj");
		//元素节点
//		alert(bj.nodeName);//li
//		alert(bj.nodeType);//1
//		alert(bj.nodeValue);//null
		//属性节点
//		var name = bj.getAttributeNode("name")
//		alert(name.nodeName); //name
//		alert(name.nodeType); //2
//		alert(name.nodeValue); //beijing
		var p = document.getElementsByTagName("p")[0];
		var text = p.childNodes[0];
		alert(text.nodeName);//#text
		alert(text.nodeType);//3
		alert(text.nodeValue);//你好
	</script>
  </body>

父节点，子节点和同辈节点：

父节点：parentNode:
- parentNode返回的永远都是一个节点，因为只有元素节点才有可能包含子节点。
- document节点没有父节点。也就是文档节点没有父节点，也就是HTML
子节点：childNode：
- childNodes，获取指定节点的所有子节点。其实上个例子已经使用了。
- firstChild：指定第一个子节点。
- lastChild：指定最后一个子节点。
同辈节点：
- nextSibling：返回一个给定节点的下一个兄弟节点。
- previousSibling：返回一个节点的上一个兄弟节点。

示例如下：

 <body>
  	<ul id="city">
    	<li id="bj" name="beijing">北京</li>
		<li id="tj" name="tianjin">天津</li>
	<p>你好</p><input type="text">
	<script type="text/javascript">
		//获取p标签的父，子，兄节点
		var p = document.getElementsByTagName("P")[0];
		alert(p.parentNode);//body
		alert(p.childNodes[0].nodeValue)//你好
		alert(p.previousSibling.nodeValue)//空格，说明空格也会作为一个节点
		alert(p.nextSibling.nodeName);//input。这里就没出现空格，就是input节点
	</script>
  </body>

节点属性：

节点属性attributes是Node接口定义的属性。
节点属性attributes就是节点的属性(特别是元素节点)的属性。
事实上，attributes中包含的是一个节点所有属性的集合。

attributes.getNameItem()和Element元素的getAttribute()方法很相似。

<body>
     <ul id="city">
    	<li id="bj" name="beijing">北京</li>
		<li id="tj" name="tianjin">天津</li>
	<script type="text/javascript">
		var bj = document.getElementById("bj");
		alert(bj.attributes[1].nodeValue);		
	</script>
  </body>

检测子节点和属性

查看是否有子节点：hasChildNodes();
查看是存在属性：hasAttributes();
- 即使节点中没有定义属性，其attributes属性还是有效的，而且长度是0。同样childNodes属性也是如此。
当你想知道某个节点是否包含子节点或属性时，使用hasChildNodes(),hasAttributes()。如果想知道包含多少个：attributes和childNodes属性。
在IE中不存在hasAttributes();方法。(不使用)

示例如下：

<body>
   	<input type="text" id="username" value="http://blog.csdn.net/facekbook/article/details/username">
	<script type="text/javascript">
//		var username = document.getElementById("username");
//		alert(username.hasChildNodes());//false
//		alert(username.hasAttribute());//无效果	
		var p = document.getElementsByTagName("p")[0];
		alert(p.hasChildNodes());//true
	</script>
  </body>

操作Dom节点数：

插入节点：
- appendChild()方法。
- insertBefore()方法。
- 没有insertAfter()方法。
删除节点：
- removeChild()方法。
替换节点：
- replaceChild()

示例

<body>
    <ul id="city">
    	<!--注意这里不要回车-->
	    <li id="bj" name="beijing">北京</li><li id="tj" name="tianjin">天津</li>
	<script type="text/javascript">
	//创建<li id="sh" name="shanghai">上海</li>节点，增加到天津节点的前面
//		var liElement = document.createElement("li");
//		liElement.appendChild(document.createTextNode("上海"));
//		liElement.setAttribute("id","sh");
//		liElement.setAttribute("name","shanghai");
//		liElement.insertBefore(document.getElementById("tj"));
//		document.getElementById("city").appendChild(liElement);
		//<li id="sh" name="shanghai">上海</li>节点插入北京节点的后面，没有insertAfter()方法。
		var liElement = document.createElement("li");
		liElement.appendChild(document.createTextNode("上海"));
		liElement.setAttribute("id","sh");
		liElement.setAttribute("name","shanghai");
		var bjElement = document.getElementById("bj")
		//得到兄弟节点
		var nextElement = bjElement.nextSibling;
		liElement.insertBefore(nextElement);
		//添加到city下面
		document.getElementById("city").appendChild(liElement);
	</script>
  </body>

复制和移动节点：

复制节点：cloneNode(boolean)方法，其中boolean参数是判读是否复制子节点。
移动节点：由三种方法组合完成：
- 查找节点：
  - getElementById();通过节点id属性，查找对应节点。
  - getElementsByName();通过节点名称，查找对应节点。
  - getElementsByTagName();通过节点名称，查找对应节点。
- 插入节点：
  - insertBefore()方法
  - appendChild()方法。
- 替换节点：
  - replaceChild()方法。

示例代码如下：

  <body>
  	<ul id="city">
    	<li id="bj" name="beijing">北京</li>
		<li id="tj" name="tianjin">天津</li>
	<ul id="game">
    	<li id="fk" name="fankong">反恐精英</li>
		<li id="xj" name="xingji">星际</li>
	<script type="text/javascript">
		//当点击北京节点，就和反恐精英替换
		document.getElementById("bj").onclick = function(){
			//得到北京节点
			var bjElement = document.getElementById("bj");
			//得到反恐精英
			var fkElemet = document.getElementById("fk");
			//这里也可以:this.parentNode.replaceChild(fkElemet,bjElement);
			bjElement.parentNode.replaceChild(fkElemet,bjElement);
	</script>
  </body>

复制案例：

<body>
  		<input type="button" id="login" value="http://blog.csdn.net/facekbook/article/details/登陆">
			按钮来这：
		<script type="text/javascript">
			document.getElementById("login").onclick = function(){
				var loginElement = document.getElementById("login");
				//也可以写成:var copy = this.cloneNode(true);
				var copy = loginElement.cloneNode(true);
				var pElemet = document.getElementsByTagName("p")[0];
				pElemet.appendChild(copy);
		</script>
  </body>

Document对象：根元素的访问，也就是HTML标签的访问。使用document.documentElement访问根对象。使用Document对象查找对象getElementById()：通过节点的id属性，查找对应节点。getElementsByName()：通过节点的name属性，查找对应节点。getElementsByTagName()：通过节点名称，查找对应节点。使
document 对象在浏览器窗口中，每个对象都会包含一个 document 属性，该属性引用窗口中显示HTML文档的 document 对象。 document 对象与它所包含的各种节点（如表单、图像和链接）构成了文档对象模型。访问文档对象浏览器在加载文档时，会自动构建文档对象模型，把文档中同类元素对象映射到一个集合中，然后以 document 对象属性的形式允许用户访问。以下集合都是HTMLColle...

public static void main(String[] args) { // 根据全国各个高校的地址，获取视频中相应列表的URL和要抓取的值 Document document = null; try { document = Jsoup .connect( 一、基本知识 1.1 API和Web API API（Application Programming Interface，应用程序编程接口）是一些预定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码或理解内部工作机制的细节。简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。 Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM），主要针对于浏览器做交互效果。Web API一般都有输入和输出（函数

在HTML文档中，可以通过节点对象的 node Type属性来区分节点类型。 node Type属性返回一个数字，不同的数字代表不同的节点类型，常见的节点类型包括： 1. 元素节点（ Element Node ）： node Type为1，代表HTML文档中的标签元素，如<div>、<p>等。 2. 文本节点（Text Node ）： node Type为3，代表HTML文档中的文本内容，如标签元素中的文字。 3. 注释节点（Comment Node ）： node Type为8，代表HTML文档中的注释内容，如。 4. 文档节点（ Document Node ）： node Type为9，代表整个HTML文档。 5. 文档类型节点（ Document Type Node ）： node Type为10，代表HTML文档的文档类型声明，如<!DOCTYPE html>。通过判断节点对象的 node Type属性，可以方便地区分不同类型的节点对象，从而进行相应的操作。