JavaScript的字符串、数组以及DOM操作总结

时间：2022-01-29 23:16:38

（一）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 属性值的元素节点对应的对象：

 <script>

2　　 alert(typeof document.getElementById("purchases"));      //弹出的对话框显示object

 </script>

getElementsByTagName 方法，返回一个对象数组，每个对象对应着文档里给定标签的一个元素：

 <script>

     var items = document.getElementsByTagName("li");

     for(var i = 0; i<items.length; i++){

     　　 alert(typeof items[i]);　　　　//弹出的对话框显示object，重复3次

     }

 </script>

getElementsByClassName 方法，返回一个对象数组，每个对象对应着文档里给定类名的一个元素：

1 <script>

2     var shopping = document.getElementById("purchases");

3     var sales = shopping.getElementsByClassName("sale");

4     alert(sales.length);　　　　//弹出的对话框显示2

5 </script>

getAttribute 方法，获取元素节点的各个属性：

 <script>

     var paras = document.getElementsByTagName("p")

     for(var i = 0; i<paras.length; i++){

         alert(paras[i].getAttribute("title"));      //弹出的对话框显示reminder

     }

 </script>

setAttribute 方法，对属性节点的值做出修改：

 <script>

 　　 var shopping = document.getElementById("purchases");

     alert(shopping.getAttribute("title"));　　　　 //弹出的对话框显示null(空的值)

     shopping.setAttribute("title", "a list of goods");

     alert(shopping.getAttribute("title"));　　　　 //弹出的对话框显示a list of goods

 </script>

JavaScript的字符串、数组以及DOM操作总结的更多相关文章

  1. Javascript 解析字符串生成 XML DOM 对象。

    Javascript 接收字符串生成 XML DOM 对象.实测对 Firefox .IE6 有效.可用于解析 ajax 的服务器响应结果,也可用于解析自定义字符串.​1. [代码]函数   ppt模 ...

  2. Javascript的字符串（String）操作学习

    1.bold() 方法用于把字符串显示为粗体.语法: stringObject.bold() 如下,对str进行bold操作之后,实际上时对这个字符串加了<b>标签,在文档中将以粗体进行展 ...

  3. JavaScript中字符串&comma;数组的基本操作

    JavaScript的字符串就是用”或”“括起来的字符表示. js中操作字符串: 1.获得字符串的长度 var s = 'Hello, world!'; s.length; // 132.获取指定字符 ...

  4. javascript学习（二） DOM操作HTML

    一:DOM操作HTML JavaScript能够改变页面中所有的HTML元素 JavaScript能够改变页面中所有的HTML属性 JavaScript能够改变页面中所有的CSS样式 JavaScri ...

  5. C&plus;&plus;下面关于字符串数组的一些操作

    今天在写一个搜索引擎的分词系统,是很简单的那种,但是居然费了我一天的时间还没完成,晚上估计还得弄一会了,但是在这个过程中,遇到了集中关于字符串数组的操作,值得和大家分享一下. 首先是关于统计字符串数组 ...

  6. &lbrack;JavaScript&rsqb; 将字符串数组转化为整型数组

    var dataStr="1,2,3,4,5";//原始字符串 var dataStrArr=dataStr.split(",");//分割成字符串数组 var ...

  7. JavaScript学习笔记系列2&colon;Dom操作&lpar;一&rpar;

    一.什么是Dom? DOM------>Document Object Model 直接翻译就是文档对象模型. DOM------>定义了表示和修改文档所需的对象.这些对象的行为和属性以及 ...

  8. JavaScript基础2---控制权DOM操作

    文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM将HTML文档呈现为带有元素,属性和文本的树结构(节点树). HTML文档可以说由节点构成的 ...

  9. 常用数组、字符串方法总结&amp&semi;获取元素、DOM操作

    字符串的方法.返回值.是否改变原字符串:1 charAt() 方法可返回指定位置的字符. 不改变原始字符串 JavaScript并没有一种有别于字符串类型的字符数据类型,返回的字符是长度为 1 的字符 ...

随机推荐

  1. Less使用心得

    初识less就被其函数式编程css深深吸引了,而函数式编写css带来的好处不言而喻,复用,复用,还是复用.话不多说下面简单介绍下个人使用less的心得 首先网上有很多less的安装教程,这边不多做介绍 ...

  2. angular学习之关于ng-class详解

    1,定义和用法 ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类. ng-class 指令的值可以是字符串,对象,或一个数组. 如果是字符串,多个类名使用空格分隔. 如果是对 ...

  3. 点击短信中的url打开某个应用

    实现功能: 短信内容中含有url(例如,http://youngo.com/app/),点击后打开apk 遗留问题: 点击url后,会出现选择框,让用户选择是用浏览器打开还是用该apk打开----没有 ...

  4. Oracle用户密码过期问题解决

    一.用户密码即将过期,导致autotrace无法打开           如果用户密码即将过期,在登录数据库时会收到如下提示:           ERROR:            ORA-2800 ...

  5. C&num; ComboBox绑定值问题

    使用这种方式始终绑定值有问题: cbxSchool.DataSource = schoolList; cbxSchool.DisplayMember = "school_name" ...

  6. 使用Ant Build时提示错误&colon; 编码GBK的不可映射字符

    这个build.xml是由eclipse neon 2016.6生成的 我的情况是,所有文件都使用了UTF-8编码,build.xml第一行也好好写着UTF-8,但build时仍然有乱码,并且提示失败 ...

  7. SSM文件下载

    SSM框架文件下载比文件上传稍微麻烦一点,但这次还是写成最简朴的形式,哈哈~如下 参考:http://blog.csdn.net/lcx556224523/article/details/702076 ...

  8. STL容器vector应用注意事项

    [1]提前分配足够空间以免不必要的重新分配和复制代价 关于vector容器重新分配和复制及析构释放的代价,请参见随笔<STL容器之vector>. 应用示例对比代码如下: #include ...

  9. oracle 删除服务sc delete Oracle

    oracle 删除服务sc delete OracleVssWriterorcl -----(oracle orcl vss writer service的服务名!)

  10. jQuery对象的链式操作用法分析

    可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"siz ...

相关文章