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');