javascript语言学习
javascript语言学习
本课将和大家一起学习简单的js dom 操作,涵盖DOM API以及JQuery的方法。
相关简介
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。
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(); });
点击“点击我删除”后,按钮消失。