jQuery中DOM操作的预习内容

目录

目录：

一、DOM的分类

二、查找节点

一、DOM操作的分类 

一般来说，DOM操作分为3个方面，即DOM Core（核心）、HTML—DOM和CSS—DOM

1. DOM Core

DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如：XML。

JavaScript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribule()等方法，这些都是DOM Core的组成部分。

例如：

(1)、使用DOM Core来获取表单对象的方法：

     document.getElementByTagName(“from”);

(2)、使用DOM Core来获取某元素的src属性的方法：

     Element.getAttribule(“src”);

2.HTML—DOM

在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML—DOM的属性。

HTML—DOM的出现甚至比DOM Core还要早，它提供了一些更简明的记号来描述各种HTML元素的属性

例如：

(1)、使用HTML—DOM来获取表单对象的方法：

     document.forms  //HTML—DOM提供了一个form元素

 (2)、使用HTML—DOM来获取某元素的src属性的方法：

     element.src;

3.CSS—DOM

CSS—DOM是针对CSS的操作。在JavaScript中，CSS—DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果

例如：

(1)、设置某元素style对象字体颜色的方法：

element.style.color = “red”;

二、查找节点

使用jQuery在文档树上查找节点非常容易，可以通过第2章的jQuery选择器来完成

1.查找元素节点

获取元素节点并打印出它的文本内容，jQuery代码如下：

 var $li = $(“ul li:eq(1)”);         //获取<ul>理第2个<li>节点
 var li_txt = $li.text();           //获取第2个<li>元素节点的文本内容
 alert(li_txt);                 //打印文本内容

2.查找属性节点

利用jQuery选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值。attr()方法的参数可以是一个，也可以是两个。当参数是时，则是要查询的属性的名字

例如：

获取属性节点并打印出它的文本内容，jQuery代码如下：

var $para = $(“p”);        //获取<p>节点
  var p_txt = $para.attr(‘’title”);     //获取<p>元素节点属性title
  alert(li_txt);      //打印title属性值