2021-09-28

DOM是文档的对象模型，根据W3C DOM规范为文档提供了一种结构化表示方法，通过改方法可以改变文档的内容和展示形式。

通常来说，DOM操作分为3方面：DOM Core、HTML-DOM和CSS-DOM.

1、DOM Core

DOM Core（核心 DOM）它不属于任何语言，它是一组标准的接口，任何一种支持DOM的程序语言都可以使用它。JavaScript中的getElementByld()、getElementsByTagName()、getAttribute()、setAttribute()等方法都是DOM Core的组成部分

2、HTML-DOM

在JavaScrrpt中，有很多专属于HTML-DOM的属性。如document.forms、element.src等

例如：

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

document.forms;

(2)、使用HTML-DOM来获取元素的title属性：

element.title;

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

对元素的内容和值进行操作

定义：

text()方式对元素的文本进行操作

html()方式对元素的html进行操作

val()方式获取表单元素的内容

3.对DOM节点文档进行操作

定义

对节点的获取 增加 删除 修改

语法格式：

$('元素')创建节点

append()添加节点  从最后以为添加  $(父级元素).append(创建的元素);

appendTo()   元素主动插入父级元素中   创建元素.appendTo('父级元素');

prepend()  在最前方插入元素  $(父级元素).prepend(创建元素)

prependTo()  元素主动插入到父级元素的最前面  创建元素.prependTo(父级元素)

var $li_1 = $('<li></li>');
var $li_2 = $('<li></li>');
$('ul').append($li_1);
$('ul').append($li_2);

在元素外插入元素

after();  $(se).after()  之后插入

insertAfter();   创建元素.insertAfter()   在元素之后插入

before()  $(se).before()   在元素之前插入

insertBefore()  创建元素.insertBefore()  在元素之前插入

var $li_1 = $('<li title='香蕉'>香蕉</li>');
var $li_2 = $('<li title='雪梨'>雪梨</li>');
var $li_3 = $('<li title='其他'>其他</li>');

var $parent = $('ul');
var $two_li = $('ul li:eq(1)');
$parent.append($li_1);
$parebt.prepend($li_2);
$li_3.inserAfter($two_li);

4、删除、复制和替换元素

定义：

删除节点    remove()  empty()  detach()

复制节点    clone()

替换节点    replaceAll(se)   replaceWith(content)

语法格式：

remove()   移除元素  $(se).remove()

detach()    移除元素  $(se).datach()

empty()     保留元素，但是清空节点内容

clone(.true/false)   true 复制所有，  false  默认值  仅仅复制元素

$('ul li:eq(1)').remove();

var $li = $('ul li:eq(1)').remove();
$li.appendTo('ul');
$('ul li:eq(1)').appendTo('ul');
$('ul li').remove('li[title!=菠萝]');

$('ul li').click(function(){
    alert($(this).html());
})
var $li = $('ul li:eq(1)').detach();
$li.appendTo('ul');

$('ul li:eq(1)').empty();

//复制节点
$('ul li').click(function(){
    $(this).clone().appendTo('ul');
})
$(this).clone(true).appendTo('body');

//替换节点
$('p').replaceWith('<strong>你最不喜欢的水果是？</strong>');
$('<strong>你最不喜欢的水果是？</strong>').replaceAll('p');