jQuery is not must for us——DOM操作

jquery

通过浏览器提供的DOM API,我们可以完成对页面元素的增删改查移动等。

  • 创建元素
  • 插入元素
  • 移动元素
  • 删除元素
  • 类操作
  • 属性操作
  • 文本操作
  • 样式操作

创建元素

/*jquery*/
	$('<div></div>');
/*DOM*/
document.createElement('div');

插入元素

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>

在id为1的div的后面插入一个id为1.1的div

<div id="1"></div>
<div id="01"></div>
<div id="2"></div>
<div id="3"></div>
/*jquery*/
	$('#1').after('<div id="1.1"></div>');
/*DOM*/
document.getElementById('1').insertAdjacentHTML('afterend', '<div id="1.1"></div>');

在id为1的div之前插入一个id为A的div

<div id="A"></div>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
$('#1').before('<div id="A"></div>');
/*DOM
document.getElementById('1').insertAdjacentHTML('beforebegin', '<div id="A"></div>');

插入子元素

<div id="parent">
	<div id="oldChild"></div>
</div>

插入一个子元素将其变成

<div id="parent">
	<div id="newChild"></div>
	<div id="oldChild"></div>
</div>
$('#parent').prepend('<div id="newChild"></div>');
/*DOM*/
document.getElementById('parent')
	.insertAdjacentHTML('afterbegin', '<div id="newChild"></div>');

移动元素

将下面的结构

<div id="parent">
	<div id="c1"></div>
	<div id="c2"></div>
	<div id="c3"></div>
</div>
<div id="orphan"></div>

变成

<div id="parent">
	<div id="c1"></div>
	<div id="c2"></div>
	<div id="c3"></div>
	<div id="orphan"></div>
</div>

jQuery

$('#parent').append('#orphan');

DOM

document.getElementById('parent')
	.appendChild(document.getElementById('orphan'));

如果想将id为orphan的div插入到c1

jQuery

$('#parent').prepend($('#orphan'));
document.getElementById('parent')
	.insertBefore(document.getElementById('orphan'), document.getElementById('c1'));

移除

这里假设存在一个id为foobar的元素

jQuery

$('#foobar').remove();

DOM

document.getElementById('foobar').parentNode.removeChild(document.getElementById("foobar"));

添加和移除class

现在我们希望将

<div id="foo"></div>
<div id="foo" class="bold"></div>

jQuery

$('#foo').addClass('bold');

DOM

/*IE9有问题*/
docuement.getElementById('foo').classList.add('bold');
/*所有浏览器都支持*/
document.getElementById('foo').className += 'bold';

移除bold类

jQuery

$('#foo').removeClass('bold');

DOM

/*IE9有问题*/
docuement.getElementById('foo').classList.remove('bold');
/*所有浏览器都支持
document.getElementById('foo').className = document.getElementById('foo').className.replace(/^bold$/, '');

属性修改

给id=”foo”的元素设置role属性为button

jQuery

$('#foo').attr('role', 'button');

DOM

document.getElementById('foo').setAttribute('role', 'button');

移除我们添加的属性

jQuery

$('#foo').removeAttr('role');

DOM

document.getElementById('foo').removeAttribute('role');

文本修改

jQuery

$('#foo').text('Goodbye!');

DOM

document.getElementById('foo').innerHTML = 'Goodbye!';
document.getElementById('foo').innerText = 'GoodBye!';
/*IE9+*/
document.getElementById('foo').textContent = 'GoodBye!';

样式修改

jQuery

$('#note').css('fontWeight', 'bold');

DOM

document.getElementById('note').style.fontWeight = 'bold';
Prev Next