[JavaScript知识库]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属性值

插入节点的方法