一、DOM介绍

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标志语言的标准编程接口。DOM 定义了访问 HTML 和 XML 文档的标准。DOM 可以把 HTML 看做是文档树，通过 DOM 提供的 API 可以对树上的节点进行操作。下面我们来看一下 W3C 上的 dom 树
在这里插入图片描述

二、查找节点

2.1查找元素节点

var $li = $("ol li:eq(0)"); //获取<ol>里第一个<li>节点
var li_txt = $li.text(); //获取第一个<li>元素节点的文本内容
alert(li_txt); //打印文本内容

2.2查找属性节点

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

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

三创建节点

3.1创建节点元素

创建元素节点可以用 $(h t m l) 函数。$ (html) 方法会根据传入的 HTML 标记字符串，创建一个 DOM 对象，并将这个 DOM 对象包装成一个 jQuery 对象后返回。首先创建一个 li 元素如下所示：

var $li = $("<li></li>"); //创建一个<li>元素

当然上面只是创建出来了，要使用的话，还需要使用 append() 等方法将该元素插入文档中

3.2创建文本节点

var $li = $("<li>xnm</li>"); //创建一个<li>元素,包括元素节点和文本节点，“xnm”就是创建的文本节点

将新建的 li 元素插入到 ul 中

<script type="text/javascript">
      $(document).ready(function () {
    
    
        var li_obj = $("<li>黄色</li>");
        $("ul").append(li_obj);
      });
    </script>

四插入节点

4.1 DOM 插入现有元素内:

.append() 在每个匹配元素里面的末尾处插入参数内容。
.appendTo() 将匹配的元素插入到目标元素的最后面。
.html() 获取集合中第一个匹配元素的 HTML 内容设置每一个匹配元素的 html 内容。
.prepend() 将参数内容插入到每个匹配元素的前面（元素内部）。
.prependTo() 将所有元素插入到目标前面（元素内）。
.text() 得到匹配元素集合中每个元素的合并文本，包括他们的后代设置匹配元素集合中每个元素的文本内容为指定的文本内容。

4.2DOM 插入现有元素外:

.after() 在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点。
.before() 根据参数设定，在匹配元素的前面插入内容。
.insertAfter() 在目标元素后面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。
.insertBefore() 在目标元素前面插入集合中每个匹配的元素(注：插入的元素作为目标元素的兄弟元素)。

五删除节点

如果文档中某一个元素多余，那么我们可以使用 jQuery 中的 remove(),detach() 和empty() 方法删除节点

5.1detach() 方法

从 DOM 中去掉所有匹配的元素。.detach()方法和.remove()一样, 除了.detach() 保存所有 jQuery 数据而且和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入 DOM 时，这种方法很有用。

<script type="text/javascript">
      $(document).ready(function () {
    
    
        $("ul li").click(function () {
    
    
          alert($(this).html());
        });
        var $li = $("ul li:eq(1)").detach(); //删除元素
         //重新追加此元素,发现它之前绑定的事件还在,如果使用remove()方法删除元素的话,那么它之前绑定的事件将失效
         //$li.appendTo("ul");
      });
    </script>

5.2 remove() 方法

将匹配元素集合从 DOM 中删除。（注：同时移除元素上的事件及 jQuery 数据。）和.empty() 相似。.remove() 将元素移出 DOM。当我们想将元素自身移除时我们用.remove()，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的 jQuery 数据。在要删除元素同时保留数据和事件的情况下，使用.detach()来代替。

<script type="text/javascript">
      $(document).ready(function () {
    
    
        var $li = $("ul li:eq(1)").remove(); //获取<ul>节点中的第2个<li>元素节点后,将它从网页中删除
        $li.appendTo("ul"); //把刚才删除的节点又重新添加到 <ul> 元素里

        //可以直接使用 appendTo() 方法来简化上面的代码
        //appendTo() 方法也可以用来移动元素,移动元素时首先将文档上删除此元素,然后讲该元素插入得到文档中的指定节点
        //$("ul li:eq(1)").appendTo("ul");
      });
    </script>

jQuery中DOM基础操作

文章目录