本课将和大家一起学习简单的js dom 操作，涵盖DOM API以及JQuery的方法。

相关简介

HTML DOM 是 W3C 标准（是 HTML 文档对象模型的英文缩写，Document Object Model for HTML）。HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript和 VBScript 使用。Javascript中提供了一系列操作dom的函数，我们称之为DOM API。

---

Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。同样的Jquery提供了方便、强大的dom节点操作函数，在逐渐成为行业开发标准的今天jquery的学习对于研究和利用前端安全也日益重要。

 

 

0x01 DOM节点获取

在输入框中输入JS代码，点击执行就可以执行了。为了便于演示代码的效果，点击右键查看源代码，如下图。

上图中画圈部分的DIV元素，id为output就是我们操作的DOM节点目标。现在我们来依次演示DOM API、JQuery获取该节点的方法。

1)      getElementsByTagName、getElementById

通过标签名称来获取，注意output的标签是页面第二个div，所以下标是1。输入如下代码并点击执行。

var output = document.getElementsByTagName('div')[1];

output.innerHTML = 'getElementsByTagName得到取得节点';

如上图，代码成功修改页面下方显示的文字。接下来尝试通过id值来查找，输入如下代码并执行：

var output = document.getElementById('output');

output.innerHTML = 'getElementById得到取得节点';

 

2)      直接通过ID值操作dom

在唯一ID值的情况下，可以直接通过id值来直接表示节点，输入并执行如下代码：

output.innerHTML = '使用ID直接获取节点';

3)      JQuery选择器

使用Jquery 选择器可以通过id值快速选择dom节点。输入如下代码并执行：

$('#output').html('JQuery方法取得节点。');

0x02 DOM节点的创建

接下来我们的目标是在div中创建一个节点，是一个按钮，点击后可以弹出一些文字。在创建代码时要在上一节的基础上，先能够选择到节点。

首先是DOM API，输入如下代码并执行：

var addone = document.createElement('input');

addone.type = 'button';

addone.value = '点击我';

addone.id = 'addone';

addone.onclick = function(){ alert('document.createElement生成的按钮'); }

 

var output = document.getElementById('output');

output.appendChild(addone);

 

接下来，使用Jquery的append方法来创建，输入如下代码并执行：

$('#output').append('<input id="addone" />');

$('#addone').attr('type', 'button');

$('#addone').attr('value', '点击我');

$('#addone').bind('click', function(){ alert('JQuery 生成的按钮'); });

可以看到，使用Jquery是很有优势的，编程的思路非常清晰。

0x03 DOM节点的删除

如果我们要删除前面创建的节点怎么做呢？首先我们知道我们创建的按钮ID值为addone，那么输入如下代码并执行：

var output = document.getElementById('addone');

output.parentNode.removeChild(output);

 

JQuery删除节点更加简单，只需要调用remove方法即可，下面这段代码创建按钮的按钮点击过后能删除自己：

$('#output').append('<input id="addone" />');

$('#addone').attr('type', 'button');

$('#addone').attr('value', '点击我删除');

$('#addone').bind('click', function(){

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

});

 

点击“点击我删除”后，按钮消失。