Javascript中字符串、数组、和节点的增删改查。

用了那么久js我发现数组、字符串、和节点的操作归纳一起就4个方法就是增、删、改、查。

1、字符串

增：concat

concat(字符串)  和制定的字符串？相连接  例如：

var str1 = "hello";
console.log(str1.concat('world '));       //str1 = helloworld

删：trim、slice、substr、substring

 

str.trim():删除两边的空格

 

var str3 = '   张三 ';

 

var str4 = str3.trim();

 

console.log(str4.length); // 2
 
slice(start, end):从start位置开始找，到end-1位置结束
var str5 = "abcdefg";
console.log(str5.slice(1)); // bcdefg
console.log(str5.slice(1, 3)); // bc
 
substr(start, length):从start开始，截取length个长度
var str6 = "abcdef";
console.log(str6.substr(1,3)); //bcd
 
substring(start, end)：从start位置开始，到end-1位置
var str6 = "abcdef";
console.log(str6.substring(1,3)); //bc
 
改：replace、split
replace(被替换的字符，替换的字符)
var str = '奥特曼打怪兽';
console.log(str.replace('奥特曼', '***')); // ***打怪兽
 
split（指定字符)   按照指定的字符切割,结果是返回数组  例如：
var str = 'zhangsan-lisi-wangwu';
console.log(str.split('-'));             //  str = [zhangsan,lisi,wangwu];
 
查：indexOf、lastIndexOf、charAt、match、search
 str.indexOf():返回首次出现的指定字符在str中的位置
 str.lastIndexOf():返回指定字符最后一次出现的位置
var str = 'abcdecfg';
console.log(str.indexOf('c')); // 2
console.log(str.lastIndexOf('c')); // 5
 
charAt():返回指定位置的字符
var str = 'abcdefg';
console.log(str.charAt(4)); // e
 
str.match():查找成功返回对象，查找失败返回null
var str = "abcdefg";
console.log(str.match('c')); // ["c", index: 2, input: "abcdefg"]
//查找到对应的字符 index:索引，第二个位置找到了"c"字符串 查找的母字符串
console.log(str.match('z')); // null
//还可使用正则来匹配查找相应的内容
 
str.search():查找指定的字符(区分大小写)，查找成功，返回指定字符的位置,查找失败，返回-1
var str = 'xyzstvu';
console.log(str.search('t')); // 4
console.log(str.search('tV')); // -1
 
 
2、数组
增：push、unshift、splice、concat
push():向数组的末尾添加元素，返回的是原数组的个数（直接在原数组上添加）
var array = [1,2,3,4];
array.push(5,6);
array;//[1, 2, 3, 4, 5, 6]
 
unshift():向数组的开头添加元素，返回时原数组的个数（直接在原数组上添加）
var array = [1,2,3,4];
array.unshift(2);//返回数组长度5
array;//[ 2, 1, 2, 3, 4]
 
splice():将一个或多个新元素插入到数组的指定位置，插入位置的元素删除或自动后移，返回空或被删除元素组成的数组
var array1 = [1,2,3,4];
var array2 = [1,2,3,4];
array1.splice(2,0,5,6);
array1; // [1,2,5,6,3,4]
console.log(array1.splice(2,0,5,6)) ; // []
array2.splice(2,1,5,6);
array2; // [1,2,5,6]
console.log(array2.splice(2,1,5,6)); // [3]
 
concat:把不同的数组连接到一起
var arr1 = [1,2,3];
var arr2 = [4,5,6];
var arr3 = arr1.concat(arr2);
arr3; // [1,2,3,4,5,6]
 
删：pop、shift、splice、delete
pop():移除最后一个元素并返回该元素值
var arr = [1,2,3,4];
arr.pop();
arr; //[1,2,3]
 
shift():删除并返回数组的第一个元素
var arr = [1,2,3,4];
arr.shift();
arr; // [2,3,4]
 
splice同上，它既可给数组添加新元素，也可以删除数组元素
 
delete删除数组某项，但是只会删除该值，恢复默认的undefined
var arr = [1,2,3,4];
delete arr[1];
console.log(arr); //[1,undefined,3,4];
 
改：splice
splice,同上，所以我觉得它的功能最强大;
 
当然数组还有其他的方法，我这只是总结了字符串、数组、节点的增删改查 。
 
查：isArray、instanceof、length
isArray、instanceof：用来检测某对象是不是数组
var arr = [];
arr instanceof Array; //true
Array.isArray(arr); //true
 
length:用来检测数组的长度，这个应该最简单了
 
数组的其他方法：
1、数组创建
var array1 = new Array();
var array2 = [];
var array3 = new Array("num1","num2","num3");//["num1", "num2", "num3"]
var array4 = new Array(6);
array4.length;//6
 
2、数组的长度
var arr = [1,2,3,4]
arr.length; // 4
arr.length = 8; //设置数组长度，补充内容为undefined;
 
3、数组字符串转换
var arr = [1,2,3,4];
arr.toString; // "1,2,3,4"
 
join()，它接受一个字符串参数，用于插在数组各项之间形成字符串
arr.join("-"); // "1-2-3-4"
 
4、数组翻转和排序

sort() 方法用于对数组的元素进行排序。

排序顺序可以是字母或数字，并按升序或降序。

默认排序顺序为按字母升序。

注意：当数字是按字母顺序排列时"40"将排在"5"前面。

使用数字排序，你必须通过一个函数作为参数来调用。

函数指定数字是按照升序还是降序排列。

这些说起来可能很难理解。

注意： 这种方法会改变原始数组！。

var arr = [101,5,1,2,3,4]

arr.sort();

arr; // [1,101,2,3,4,5]

arr.sort(function(a,b){return a-b});

arr; // [1,2,3,4,5,101]

arr.sort(function(a,b){return b-a});

arr; // [101,5,4,3,2,1]

reverse是用来对数组进行翻转

var arr = [101,5,1,2,3,4]

arr.reverse();

arr; // [4,3,2,1,5,101]

 

5、数组分割

slice()把数组进行分割，它接受一个参数的话表示分割的起始位置，接受第二个可选的参数是表示结束的位置,返回切割后的数组

var arr = [1,2,3,4,5]

arr.slice(3); // 4,5

arr.slice(2,4); // 3,4

 

3、节点

1.查找节点是个大事情，除了id和TagName查找这种忽略文档结构的查找，还有依赖文档结构的查找，需要用到节点的五个属性和两个节点列表。

<!DOCTYPE html>
<html>
<head>
<title>Hacking JavsScript</title>
</head>
<body>
    <table>
        <tbody>
          <tr id="first_tr"><td class="number"><input /></td><td id="second_td" class="description">

Spicy roast beef</td><td class="extra">With our own mix of herbs and spices</td><td class="empty">home made</td>

</tr>
        </tbody>
        
    </table>

<script type="text/JavaScript">var firs_tr = document.getElementById('first_tr')

;var second_td = document.getElementsByTagName('td')[1];
console.log(firs_tr.firstChild);//console.log(firs_tr.firstElementChild);

console.log(firs_tr.lastChild);//console.log(firs_tr.lastElementChild);

console.log(second_td.parentNode);
console.log(second_td.previousSibling);
console.log(second_td.nextSibling);
console.log(firs_tr.childNodes);
console.log(firs_tr.children);</script>
</body>
</html>

如上所示， 五个属性是parentNode,firstChild,lastChild,previousSibling和nextSibling。两个节点列表是childNodes和children。

其中，用得比较多的是parentNode,firstChild,lastChild,children。

要注意的是，上面tr和td元素代码之间有空格的话，firstChild就是文本节点了，而不是<td class="number">。这里就涉及到浏览器兼容了，

IE是忽略代码之间的空格，而Firefox不忽略

children的节点列表都是元素节点，而childNodes的节点列表包括文本节点和元素节点。当然children和childNodes都不包含属性节点。

属性节点通过节点的attributes属性取得。

2.删除，移除节点

这个需要parentNode属性，也就是父节点。父节点是好东西，你在或者不在，父节点都在。尤其是对未来生成的元素绑定事件，更需要父节点。

jQuery经常干这事。

删除也需要父节点。

<!DOCTYPE html>
<html>
<head>
<title>Hacking JavsScript</title>
</head>
<body>
    <table>
        <tbody>
            <tr id="first_tr"><td class="number"><input /></td><td id="second_td" class="description">

Spicy roast beef</td><td class="extra">With our own mix of herbs and spices</td><td class="empty">home made</td></tr>
        </tbody>     
    </table>
<script type="text/JavaScript">
var firs_tr = document.getElementById('first_tr');
var second_td = document.getElementsByTagName('td')[1];
second_td.parentNode.removeChild(second_td);
</script>
</body>
</html>

 

还有个replaceChild(newNode, oldNode)函数，返回的是oldNode节点。函数的用处是把newNode替换oldNode，如果newNode存在文档中，

首先移除newNode。
移除子节点，两个思路，
While(x.childNodes[0]){x.removeChild(x.childNodes[0])};
另一个是
x.innerHTML = ‘’;

 

3.获取节点信息

nodeName属性用来展示节点的名称。比如文本节点的名称是#text，文档节点的名称是#document，元素节点名称是大写字母的HTML元素标签名。

nodevalue属性对于文本节点，展示文本内容。对于属性节点，展示属性值。对于文档节点和元素节点不可用。

nodeType属性对于Element元素节点，值是1.对于Attribute属性节点的值是2，Text文本节点的属性值是3，Comment注释值是8，Document文档节点

属性值是9。

4.增加节点

增加节点有两个方法，需要父节点。

第一个是appenChild方法。

<!DOCTYPE html>
<html>
<head>
<title>Hacking JavsScript</title>
</head>
<body>
    <table>
        <tbody>
            <tr id="first_tr"><td id="first_td" class="number"><input value="first td" /></td>

<td id="second_td" class="description">Spicy roast beef</td><td class="extra">With our own mix of herbs and spices</td><td class="empty">home made</td></tr>
            <tr id="second_tr"></tr>
        </tbody>
        
    </table>

<script type="text/JavaScript">var firs_tr = document.getElementById('first_tr');

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

var first_td = document.getElementById('first_tr').getElementsByTagName('td')[0];var second_td = document.getElementById('first_tr').getElementsByTagName('td')[1];

second_tr.appendChild(second_td);//first_td.parentNode.appendChild(first_td);if(firs_tr == first_td.parentNode){
    firs_tr.appendChild(first_td);
}</script>
</body>
</html>

如上所示，appendChild方法让你添加一个节点并使其成为某个元素的最后一个子节点，如果该节点存在于文档中，它会从当前位置移除。

第二个是insertBefore方法。

<!DOCTYPE html>
<html>
<head>
<title>Hacking JavsScript</title>
</head>
<body>
    <table>
        <tbody>
            <tr id="first_tr"><td id="first_td" class="number"><input value="first td" />

</td><td id="second_td" class="description">Spicy roast beef</td><td class="extra">

With our own mix of herbs and spices</td><td class="empty">home made</td></tr>
            <tr id="second_tr"></tr>
        </tbody>
        
    </table>

<script type="text/JavaScript">var firs_tr = document.getElementById('first_tr');

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

var first_td = document.getElementById('first_tr').getElementsByTagName('td')[0];

var second_td = document.getElementById('first_tr').getElementsByTagName('td')[1];

var thrid_td = document.getElementById('first_tr').getElementsByTagName('td')[2];

first_td.parentNode.insertBefore(second_td, first_td);
second_tr.insertBefore(thrid_td, null);</script>
</body>
</html>

这个就是插在某个节点前面。如果第二个参数为null，则跟appendChild效果一样。

注意：appendChild和insertBefore都返回被插入的节点。

 

5.创建节点
Element节点的创建函数是crateElement()，
文本节点的创建函数是createTextNode()，两个一起用就是，
var p_element = document.createElement('p');
var text = document.createTextNode('This is a text');
p_element.appendChild(text);
创建好元素后，我们要把它放到body里面
document.body.appendChild(p_element);
再弄个attribute属性节点，它的创建函数是setAttribute()，
p_element.setAttribute('value','this is p');

 

document.documentElement     返回文档的根节点<html>
document.body     <body>
document.activeElement 返回当前文档中被击活的标签节点(ie)
event.fromElement        返回鼠标移出的源节点(ie)
event.toElement       返回鼠标移入的源节点(ie)
event.srcElement     返回激活事件的源节点(ie)
event.target         返回激活事件的源节点(firefox)
当前对象为node
返回父节点：node.parentNode, node.parendElement,
返回所有子节点：node.childNodes（包含文本节点及标签节点）,node.children
返回第一个子节点：node.firstChild
返回最后一个子节点： node.lastChild
返回同属上一个子节点：node.nextSibling
返回同属下一个子节点：node.previousSibling
parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持 ,所以大家只要记得有parentElement和children就行了

　　有两种可以检测数组的方式，第一种使用instanceof,如下：

1
2
var array5 = [];
array5 instanceof Array;//true

　　同时，Array也自带了isArray()的方法，如下：

1
2
var array6 = [];
Array.isArray(array6 );//true

　　3、获取数组长度

　　数组长度可以通过.length获取，如下：

1
2
var array7 = [1,2,3,4];
array7.length;//4

　　同时，数组的长度你也可以随时设置，如果设置的长度超过之前的，则后面的内容会自动补充维undefined，否则会截取有效长度的内容，如下：

1
2
3
4
5
6
7
var array8 = [1,2,3,4,5];
console.log(array8.length);//5
array8.length = 8;
array8;//[1, 2, 3, 4, 5, undefined × 3]
 
array8.length = 3;
array8;//[1,2,3]
posted @ 2016-10-17 16:49  changeMyselfAndWorld  阅读(342)  评论(0)  编辑  收藏  举报