2021-09-28

jQuery中的DOM操作

DOM是Document Object Model 的缩写，意思是文档对象模型

DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件

DOM操作的分类

DOM操作分为3个方面，即DOM Core（核心）、HTML-DOM和CSS-DOM

1.DOM Core

使用DOM Core来获取表单对象的方法：

document.getElementsByTagName("form");

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

element.getAttribute("src");

2.HTML-DOM

使用HTML-DOM来获取表单对象的方法：

document.forms  //HTML-DOM提供了一个forms对象

使用HTML-DOM来获取某元素的src属性的方法：

element.src;

3.CSS-DOM

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

element.style.color="red";

构建一个DOM网页

<p title="选择你最喜欢的水果.">你最喜欢的水果是？</p>
<ul>
    <li title='苹果'>苹果</li>
    <li title='橘子'>橘子</li>
    <li title='菠萝'>菠萝</li>
</ul>

查找节点

使用jQuery在文档树上查找节点非常容易

1.查找元素节点

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

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

2.查找属性节点

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

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

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

插入节点的方法

方法	描述	示例
append（）	向每个匹配的元素内部追加内容	HTML代码： <p>我想说：</p> jQ代码： $("p").append("<b>你好</b>") 结果： <p>我想说：<b>你好</b></p>
appendTo（）	将所有匹配的元素追加到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).append(B)的操作，即不是将B追加到A中，而是将A追加到B中	HTML代码： <p>我想说：</p> jQ代码： $("<b>你好</b>").appendTo("p"); 结果： <p>我想说：<b>你好</b></p>
prepend（）	向每个匹配的元素内部前置内容	HTML代码： <p>我想说：</p> jQ代码： $("p").prepend("<b>你好</b>") 结果： <p>我想说：<b>你好</b></p>
prependTo()	将所有匹配的元素前置到指定的元素中。实际上，使用该方法是颠倒了常规的$(A).prependTo(B)的操作，即不是将B颠倒到A中，而是将A颠倒到B中	HTML代码： <p>我想说：</p> jQ代码： $("<b>你好</b>").prependTo("p"); 结果： <p>我想说：<b>你好</b></p>
after()	在每个匹配的元素之后插入内容	HTML代码： <p>我想说：</p> jQ代码： $("p").after("<b>你好</b>") 结果： <p>我想说：<b>你好</b></p>
imsertAfter()	将所有匹配的元素插入到指定的元素的后面。实际上，使用该方法是颠倒了常规的$(A).after(B)的操作，即不是将B插入到A后面，而是将A插入到B后面	HTML代码： <p>我想说：</p> jQ代码： $("<b>你好</b>").imsertAfter("p"); 结果： <p>我想说：<b>你好</b></p>
before（）	在每个匹配的元素之后插入内容	HTML代码： <p>我想说：</p> jQ代码： $("p").before("<b>你好</b>") 结果： <p>我想说：<b>你好</b></p>
insertBefore（）	将所有匹配的元素插入到指定的元素的前面。实际上，使用该方法是颠倒了常规的$(A).before(B)的操作，即不是将B插入到A前面，而是将A插入到B前面面	HTML代码： <p>我想说：</p> jQ代码： $("<b>你好</b>").insertBefore("p"); 结果： <p>我想说：<b>你好</b></p>