[JavaScript知识库]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');