JavaScript的字符串、数组以及DOM操作总结
(一)javascript字符串操作
javascript的字符串就是用' '或" "括起来的字符表示,日常的学习中有时候需要对字符串进行相关的操作。例如要获取字符串某个指定位置的字符,须使用类似array数组的下标操作,索引号从0开始:
var str='hello world!' alert(str[0] ) //'h' alert(str[6] ) //'w' alert(str[12] ) //索引超出字符串的范围,但不会报错,一律返回undefined
javascript为字符串提供了一些常用方法,调用这些方法不会改变原有字符串的内容,但是会返回一个新的字符串。以下为字符串操作常用的四种方法:
touppercase() 把一个字符串全部变为大写:
var str='hello world!'; str.touppercase() //返回hello world!
tolowercase() 把一个字符串全部变为小写:
var str='hello world!'; str.tolowercase() //返回hello world!
indexof() 会搜索指定字符串出现的位置:
var str='hello world!'; str.indexof('ello'); //返回1 str.indexof(' '); //返回5 str.indexof('world'); //返回6 str.indexof('world'); //没有找到指定字符串,返回-1
substring() 会返回指定索引区间的子串:
var str='hello world!'; str.substring(0, 5); //返回"hello" str.substring(2, 8); //返回"llo wo" str.substring(-1); //返回"hello world!" str.substring(-6); //返回"hello world!"
(二)javascript数组操作
javascript的数组array可以包含任何数据类型,并通过索引来访问每个元素。例如要获得数组array的长度,可以直接访问数组array的length属性:
var arr=[1,'true',3,4,'false']; arr.length; //返回5
若直接给数组array的length赋予一个新的值会导致数组array大小的变化:
var arr=[1,'true',3,4,'false']; arr.length=7; alert(arr); //返回[1,true,3,4,false,,] arr.length=3; alert(arr); //返回[1,true,3]
若数组array通过索引把对应的元素修改成新的值(包括索引超过了范围),数组array也会发生变化:
var arr=[1,'true',3,4,'false']; arr[1] = 99; alert(arr); //arr变为[1, 99, 3,4, 'false'] arr[4] = true; alert(arr); //arr变为[1,'true',3,4,'true']
与字符串一样,javascript也为数组操作提供了一些函数方法。
indexof() 与string的类似,搜索一个指定的元素的位置:
var arr = [1, 6, 'hello', null]; arr.indexof(null); //返回3 arr.indexof(6); //返回1 arr.indexof('6'); //没有找到元素'6',返回-1
slice() 对应string的substring() ,截取数组array部分元素,返回一个新的数组array:
var arr = [1, 6, 'hello', null]; arr.slice(0, 2); //返回[1, 6] arr.slice(3); //返回[null] arr.slice(); //返回[1, 6, 'hello', null]
push() 往数组array的末尾添加若干元素,pop() 则把数组array的最后一个元素删除掉:
var arr = [1, 6, 'hello', null]; arr.push(99, 'a'); arr; //arr变为[1, 6, 'hello, null, 99, 'a'] arr.pop(); arr; //arr变为[1, 6, 'hello, null, 99]
unshift() 往数组array的头部添加若干元素,shift() 则把数组array的第一个元素删掉:
var arr = [1, 6, 'hello', null]; arr.unshift(99, 'a'); arr; //arr变为[99, 'a', 1, 6, 'hello, null] arr.shift(); arr; //arr变为['a', 1, 6, 'hello, null]
sort() 是对数组array的当前元素进行排序,而reverse() 则是颠倒数组array中元素的顺序:
var arr=[1, 'c', 'a', 9]; arr.sort(); //返回[1, 9, "a", "c"] arr.reverse(); //返回["c", "a", 9, 1]
splice() 方法是修改数组array的“万能方法”,它可以从指定的索引开始删除若干元素,然后再从该位置添加若干元素:
var arr = [1, 6, 'hello', null]; //从索引1开始删除2个元素,然后再添加2个元素 arr.splice(1, 2, 'a', 99); //返回删除的2个元素[6, 'hello'] arr; //arr变为[1, 'a', 99, null] arr.splice(2, 1); //返回从索引2开始删除的1个元素[99] arr; //arr变为[1, 'a', null]
(三)javascript dom基本操作
dom(document object model),即文档对象模型,是针对html和xml文档的一个api(应用程序编程接口)。dom描绘了一个层次化的节点树,它允许开发人员添加、移除和修改页面的某一部分。当我们创建了一个网页并把它加载到web浏览器上,dom就在幕后悄然而生,因为它把你所编写的网页文档转换为一个文档对象。
我们可以这么理解dom,把dom看做一棵节点树,主要由元素节点、属性节点、文本节点三种节点构成。例如下方的一行html代码,
<p title="reminder">hello javascript</p>
其中 p 为元素节点,title="reminder" 为属性节点,hello javascript 为文本节点。
html文档中每一个元素节点都是一个对象,其中3个获取特定元素的方法分别是: getelementbyid、getelementsbytagname 和 getelementsbyclassname 方法。当我们得到需要的元素后,就可以获取它的各个属性,getattribute 方法就是用来做这件事的,而 setattribute 方法则用来更改属性节点的值。
例如下方的html文档,对其进行javascript的 dom 的5种基本方法操作,如下所示:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>mobile phone</title> <style type="text/css"> body { color: white; background-color: black; } p { color: yellow; font-family: "arial", sans-serif; font-size: 1.2em; } #purchases { border: 1px solid white; background-color: #333; color: #ccc; padding: 1em; } #purchase li { font-weight: bold; } </style> </head> <body> <h1>what to buy</h1> <p title="reminder">never settle !!!</p> <ul id="purchases"> <li>huawei</li> <li class="sale">oppo & vivo</li> <li class="sale important">mi</li> </ul> </body> </html>
getelementbyid 方法,返回那个给定 id 属性值的元素节点对应的对象:
1 <script> 2 alert(typeof document.getelementbyid("purchases")); //弹出的对话框显示object 3 </script>
getelementsbytagname 方法,返回一个对象数组,每个对象对应着文档里给定标签的一个元素:
1 <script> 2 var items = document.getelementsbytagname("li"); 3 for(var i = 0; i<items.length; i++){ 4 alert(typeof items[i]); //弹出的对话框显示object,重复3次 5 } 6 </script>
getelementsbyclassname 方法,返回一个对象数组,每个对象对应着文档里给定类名的一个元素:
1 <script> 2 var shopping = document.getelementbyid("purchases"); 3 var sales = shopping.getelementsbyclassname("sale"); 4 alert(sales.length); //弹出的对话框显示2 5 </script>
getattribute 方法,获取元素节点的各个属性:
1 <script> 2 var paras = document.getelementsbytagname("p") 3 for(var i = 0; i<paras.length; i++){ 4 alert(paras[i].getattribute("title")); //弹出的对话框显示reminder 5 } 6 </script>
setattribute 方法,对属性节点的值做出修改:
1 <script> 2 var shopping = document.getelementbyid("purchases"); 3 alert(shopping.getattribute("title")); //弹出的对话框显示null(空的值) 4 shopping.setattribute("title", "a list of goods"); 5 alert(shopping.getattribute("title")); //弹出的对话框显示a list of goods 6 </script>
上一篇: CSS3动画效果transition
下一篇: HTML页面局部刷新
推荐阅读