js抓取网页内容(HTML中最常用的节点类型和方法，你知道吗？)

　　js抓取网页内容(HTML中最常用的节点类型和方法，你知道吗？)

　　在HTML中，我们最常用的节点类型有：元素节点Element(1)、属性节点Attr(2)、文本节点Text(3)、文档节点Document(9)) .

　　(2)nodeName 和 nodeValue

　　这两个属性完全取决于节点的类型，nodeName 是节点的标签名称，nodeValue 是节点的值。对于元素节点 Element，nodeValue 始终为 null。

　　2.1.2表示节点关系

　　DOM 中的节点具有一定的关系，正是通过这些关系构建了 DOM 树。Node 定义了允许我们通过这些关系来操作 DOM 节点的属性和方法。

　　(1)childnodes 属性：该属性返回由节点的所有子节点组成的NodeList 对象。NodeList 对象的操作请参考《JavaScript 高级编程》第一节0.1第 3 版。

　　(2)parentNode 属性：指向节点的父节点

　　(3)previousSibling 和 nextSibling 属性：前一个和下一个兄弟节点，兄弟节点是具有相同父节点的节点。

　　(3)firstChild 和 lastChild 属性：第一个和最后一个子节点

　　(4)hasChildNodes()方法：判断一个节点是否有一个或多个子节点

　　(5)ownerDocument：指向节点所在的文档对象Document

　　注意：虽然每个节点都有childNodes属性，但是有些节点没有子节点，在介绍具体节点类型时会详细说明。

　　2.1.3节点操作方法

　　(1)最常用的节点操作方法是appendChild()，用来给节点添加子节点，返回新添加的子节点。如果添加的子节点不是调用该方法之前的节点子节点，则将新节点添加到该节点的末尾；否则，将现有子节点移动到该节点的末尾。

　　(2)insertBefore()：该方法接受两个参数：要插入的节点和引用节点，如果不传递第二个参数，则默认添加到末尾。

　　(3)replaceChild()：该方法可以起到删除节点的作用，同时也接收两个参数，第一个参数是要插入的节点，第二个参数是要替换的节点；如果参数小于2会报错，被替换节点的所有关系指针都会从它被替换的节点复制过来，被替换的节点还在文档中，但是文档中没有它的位置。

　　(4)removeChild()：移除一个节点，类似于replaceChild，被移除的节点还在文档中，但是没有地方放。

　　2.1.4 其他方法

　　(1)cloneNode()：cloneNode()方法对一个节点进行复制，并返回复制的节点。该方法还接收一个布尔参数，表示是否进行深拷贝。如果进行深拷贝，则clone this 节点的整个节点树，否则就克隆这个节点。

　　注意：IE在进行节点复制的时候有个bug，就是会复制节点的JS属性，比如事件处理函数。

　　(2)normalize()：该方法的作用是对文档中的文本节点进行处理，如删除空文本节点、合并相邻的两个文本节点等。

　　2.2 文档类型

　　在 JS 中，Document 类型代表整个文档。在浏览器中，document对象是HTMLDocument的一个实例，代表了整个HTML页面，同时也是window对象的一个​​属性，所以可以作为一个全局对象来访问。它具有以下特点：

　　[1] 节点类型为 9

　　[2]nodeName 是#document

　　[3] 节点值为空

　　[4] 父节点为空

　　[5] ownerDocument 为空

　　[6]子节点可以是DocumentType（最多一个）、Element（最多一个）、ProccessingInstruction或Comment。

　　Document 类型可以表示 HTML 页面或其他基于 XML 的文档，但它最常用作 HTMLDocument 的实例来表示 HTML 页面。通过document对象，不仅可以获取页面相关的信息，还可以修改页面的内容和结构。.

　　2.2.1 获取文档的子节点

　　有两种方法可以获取文档的子节点：通过 documentElement 属性，它指向 html 元素，或者通过 childNodes[0]。

　　另外，作为HTMLDocument的一个实例的document对象还有一个body属性，即document.body，它指向该元素。

　　Document的子节点也可能是DocumentType，但是浏览器对document.doctype属性的支持不同，可以总结如下：

　　[1] IE8及以下，如果有文档类型声明，会被误认为是Comment节点，document.doctype一直为null。

　　[2] IE9+等新浏览器，如果有文档类型声明，则作为文档的第一个子节点。

　　注：Advanced JavaScript Programming第三版第1节0.1.2提到，当文档类型声明存在时，Safari、chrome和opera会解析文档声明，但不充当子文档的节点在chrome47.0.2526.80中测试，发现是文档的子节点。

　　2.2.2 文档信息

　　作为 HTMLDocument 的一个实例，文档对象具有普通 Document 实例对象所没有的属性，这些属性提供了一些关于网页的信息：

　　(1)document.title：可以通过title属性获取网页的标题，也可以修改网页的标题，修改后的标题会体现在浏览器的标题栏中.

　　(2)document.URL, document.domain, document.referrer：这三个属性都对应HTTP头，其中URL属性可以获取完整的URL，domain可以获取域名，referrer可以获取源当前页面的页面，如果没有源页面，则referrer为空。

　　这三个属性中，只能设置domain，但是设置的时候有一些限制，即：domain不能设置为不收录在URL属性中的domain，另外如果domain的设置一开始是“loose” ，它不能再设置为“紧”。

　　比如开头：document.domain=，然后设置：document.domain=，会报错。

　　2.2.3 查找元素

　　文档中定义的getElementById和getElementsByTagName方法大概是我们在处理js dom操作时首先接触到的方法。这两种方法在搜索元素时也很常用。此外，HTMLDocument还有一个独特的getElementByName方法，即根据name属性来查找元素。

　　(1)getElementById()方法：根据元素的id查找元素。注意这个方法在IE7及以下浏览器中是区分大小写的。另外，如果有多个页面相同的id元素，只会取第一个匹配的元素。在IE7及以下浏览器中还有一个奇怪的现象：如果一个表单元素的name属性匹配方法的id参数，并且该元素匹配id，那么该元素也被返回。

　　(2)getElementsByTagName() 方法：根据元素的标签名查找元素。该方法接受一个参数，返回一个由标签名与传入参数匹配的元素组成的NodeList对象。在HTMLDocument中，返回的是一个HTML采集 object，与NodeList非常相似，除了通过item()方法访问具有特定数字索引的节点外，还提供了namedItem()方法来匹配列表中具有特定名称的元素；同时，我们可以直接使用方括号的方法访问列表中的特定元素，可以传入数值索引值或字符串值，后台会自动调用对应的方法。

　　注意：我们也可以传入一个“*”通配符来获取页面的所有元素。

　　(3)getElementsByName() 方法：这也是HTMLDocument中才有的方法。它根据name属性的值来搜索元素。与getElementByTagName类似，这个方法也返回一个NodeList对象，而在HTMLDocument中它返回一个 HTML采集 对象。

　　2.2.4 特辑

　　文档对象也有一些特殊的集合，在 DOM0 阶段已经存在很多特殊的集合：

　　(1)document.anchors：获取页面中的所有锚点，即具有name属性的a元素。

　　（2)document.applet：获取页面中所有的小程序元素，但是现代网络中很少有小程序元素。

　　(3)document.images：获取页面中的所有img元素。

　　(4)document.links：获取页面上所有带有href属性的a元素。

　　2.2.5 DOM 一致性检查

　　由于DOM分为多个层次，也收录多个部分，因此需要检测浏览器实现了哪个部分。document.implementation 属性为此提供了信息。DOM1级别只实现了一个document.implementation的方法：hasfeature()，它有两个参数，第一个是DOM特征的名称，第二个是版本号。如果浏览器支持给定的功能和版本，则返回 true，下表列出了可检测的功能和版本号。

　　DOM一致性检测也是不够的，因为浏览器在实现的时候可以决定是否和DOM的功能一致，而且hasfeature()很容易返回true，但是返回true不代表浏览器确实实现了这个功能. 因此，在使用功能之前，还是需要进行能力测试。

　　2.2.6 文档编写

　　document 还提供了向文档写入内容的功能，有以下几种方式：

　　(1)document.write()和document.writeln()：两者的区别是writeln在每次调用结束时都会写一个\n符号。如果这个是在文档加载完之后调用的，这两个方法会重写整个页面。

　　(2)document.close()和document.open()：分别用于关闭和打开网页的输入流。

　　待续~~~

　　参考文章：

　　[1]0级DOM[]

　　分类：

　　技术要点：

　　相关文章：