常用数组字符串方法总结&获取元素DOM操作

Posted 2020-09-22

字符串的方法、返回值、是否改变原字符串：
1 charAt() 方法可返回指定位置的字符。
不改变原始字符串
javascript并没有一种有别于字符串类型的字符数据类型，返回的字符是长度为 1 的字符串；
注释：字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

2 concat() 方法用于连接两个或多个字符串并返回连接后的字符串
不改变原始字符串
语法：stringObject.concat(stringX,stringX,...,stringX)；
注释：原始字符串没有发生改变，而且使用 " + " 运算符来进行字符串的连接运算通常会更简便一些。

3 indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置的下标。
不改变原始字符串
语法：stringObject.indexOf(searchvalue,fromindex) 第二个参数可以省略，是设置的开始检索的位置；
注释：indexOf()对大小写敏感，如果没有找到，返回值为-1（之所以返回-1是保持数据类型一致原则）；

4 lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置的下标；
不改变原始字符串
即在一个字符串中的指定位置从后向前搜索。
语法：stringObject.lastIndexOf(searchvalue,fromindex) 第二个值为可选参数，是设置开始检索的位置

5 slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分。
不改变原始字符串；
语法：stringObject.slice(start,end)；
start 要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。
end 紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。
返回值是：一个新的字符串。包括字符串 stringObject 从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。

注释：String 对象的方法 slice()、substring() 和 substr() （不建议使用）都可返回字符串的指定部分。slice() 比 substring() 要灵活一些，因为它允许使用负数作为参数。slice() 与 substr() 有所不同，因为它用两个字符的位置来指定子串，而 substr() 则用字符位置和长度来指定子串。
还要注意的是，String.slice() 与 Array.slice() 相似。

6 split() 方法用于把一个字符串分割成字符串数组。不改变原始字符串；
语法：stringObject.split(separator,howmany)；
separator 必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。
howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。
注释：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

注释：String.split() 执行的操作与 Array.join 执行的操作是相反的。

7 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
返回值是一个新的字符串；
原始字符串未改变；
语法：stringObject.substr(start,length)；
start 必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length 可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。
注释：ECMAscript 没有对该方法进行标准化，因此反对使用它。

8 substring() 方法用于提取字符串中介于两个指定下标之间的字符。
stringObject.substring(start,stop)；
原始字符串未改变；
返回值：一个新的字符串，该字符串值包含 stringObject
的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。
start 必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop 可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。

如果省略该参数，那么返回的子串会一直到字符串的结尾。

9 toLowerCase() 方法用于把字符串转换为小写。
stringObject.toLowerCase()；
原始字符串不发生改变；
返回值：一个新的字符串，在其中stringObject的所有大写字符全部被转换为了小写字符。

10 toUpperCase() 方法用于把字符串转换为大写。
语法：stringObject.toUpperCase()；
原始字符串不发生改变；
返回值：一个新的字符串，在其中stringObject的所有小写字符全部被转换为了大写字符。

---------------------------------------------------------------------------------
字符串的方法、返回值、是否改变原字符串：

1 concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
arrayObject.concat(arrayX,arrayX,......,arrayX)
arrayX 必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。
2 join() 方法用于把数组中的所有元素放入一个字符串。
不改变原始数组；
语法：arrayObject.join(separator)；
separator 可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
返回一个字符串。该字符串是通过把 arrayObject的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。
3 pop() 方法用于删除并返回数组的最后一个元素。
语法：arrayObject.pop()；
改变了原始数组；
返回值：arrayObject 的最后一个元素。
注释：pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
4 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
改变了原始数组；
语法：arrayObject.push(newelement1,newelement2,....,newelementX)
newelement1 必需。要添加到数组的第一个元素。
newelement2 可选。要添加到数组的第二个元素。
newelementX 可选。可添加多个元素。
返回值：把指定的值添加到数组后的新长度。

注释：push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。
5 reverse() 方法用于颠倒数组中元素的顺序。
语法：arrayObject.reverse()；
该方法会改变原来的数组；
6 shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
arrayObject.shift();
该方法改变原始数组；
返回值：数组原来的第一个元素的值。
注释：如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。
7 slice() 方法可从已有的数组中返回选定的元素。
语法：arrayObject.slice(start,end)；
该方法不会改变原始数组；
start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
返回值：返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
注释：使用负值从数组的尾部选取元素。
注释：如果 end 未被规定，那么 slice()方法会选取从 start到数组结尾的所有元素。
8 sort() 方法用于对数组的元素进行排序。
arrayObject.sort();
改变原始数组；
返回值：改变后的原始数组;
arr.sort(function(n,m){
return n-m;
}
9 splice() 方法用于插入、删除或替换数组的元素。
语法：arrayObject.splice(index,howmany,element1,.....,elementX)；
返回值：如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
var arr = [1,3,3,2,5,9,12,21,11];
console.log(arr.splice(2,2)) ---->[3,2]
console.log(arr) ----> [1, 3, 5, 9, 12, 21, 11]
该方法改变原始数组；
index 必需。规定从何处添加/删除元素。
该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字，但可以是 "0"。
如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
element1 可选。规定要添加到数组的新元素。从 index 所指的下标处开始插入。
elementX 可选。可向数组添加若干元素。
10 toString() 方法可把数组转换为字符串，并返回结果。
语法：arrayObject.toString()；
不改变原始数组；
返回值：arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。

11 unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
该方法改变原始数组
语法：arrayObject.unshift(newelement1,newelement2,....,newelementX)
newelement1 必需。向数组添加的第一个元素。
newelement2 可选。向数组添加的第二个元素。
newelementX 可选。可添加若干个元素。
返回值：arrayObject 的新长度。

---------------------------------------------------------------------------------
DOM
1 获取元素：
document.getElementById(‘id名‘)
获取的是一个，父级必须是document
document.getElementsByTagName(‘标签名‘)
获取的是一组，父级不一定是document
document.getElementsByClassName(‘class名‘)
一组，高级浏览器
document.getElementsByName(‘name‘)
一组
document.querySelector(‘选择器‘)
高级浏览器 一个
document.querySelectorAll(‘#div1 p‘)
一组
父级.children
获取的第一层子级
childNode
可以获取文本节点
parentNode

firstChild
高级浏览器中识别文本节点
低级浏览器中只识别元素节点
firstELementChild
在高级浏览器中识别的是元素节点
在低级浏览器中是undefined

lastChild
lastELementChild

previousSibling
previousELementSibling

nextSibling
nextELementSibling

2创建元素
document.createElement(‘标签名‘)
注：必须在document下创建
3插入元素
父级.appendChild(子级)
父级.insertBefor(把谁，插到谁前)
注：父级.insertBefor(把谁，null)默认执行appendChild
4删除元素
父级.removeChild()
5克隆元素
obj.cloneNode() 只克隆元素
obj.cloneNode(true) 包含内容；

6物体的信息 offsetTop
offsetLeft
相对于定位父级的
getPos(obj){
var l=0;
var t=0;
while(obj){
l+=obj.offsetLeft;
t+=obj.offsetTop;
obj=obj.offsetParent;
}
return {left:l,top:t}
}
offsetWidth
offsetHeight
获取的是盒子模型的宽高
scrollHeight
scrollWidht
如果内容没有超过盒子，获取的是盒子的高+padding，如果超出获取的物体内容的宽高

offsetParent
定位的父级
最高级是body 在往上是null
parentNode
结构的父级
最高级是document，在网上是null

7页面的信息 可视区
document.documentELement.clientWidth
滚动距离
document.documentELement.scrollTop
不兼容chrome
document.body.scrollTop
兼容chrome
8获取高度的区别

.style .getStyle offsetHeight

100px 100px 100
string string number
在隐藏的情况下 可以获取 可以获取 0