首先整理了一下前面的API:
arr.sort( );比较两个值大小的函数,可以对数组做升降序处理。
arr.reverse( );翻转,可以用来颠倒数组元素,但不负责排序。
arr.push( );在数组的最后追加元素。
arr.pop( );删除数组的最后一个元素。
arr.shift( );删除数组开头的第一个元素,并返回第一个元素。
arr.unshift( );在数组的开头添加元素。
arr.join("自定义的连接符");--------arr.join("")无缝连接。
arr.slice(starti,endi+1); 选取starti位置到endi位置的所有元素,组成临时数组。
arr.splice(starti,n,value1,value2,);删除arr中starti开始的n个元素,插入value1,value2。
arr.concat(value1,value2,value3,arr1........)拼接到arr的结尾。
str.subStr(starti,n);选取starti开始的n个元素,n可以省略,表示截取starti开始到所有元素。
str.subString(starti,endi+1);选取starti到endi+1的元素,含头不含尾。
str.replace(/正则表达式/gi,"替换值");替换。
str.split(/正则/);切割。
检索关键词四种:
str.indexOf("关键词");查找的是第一次出现的位置,没找到返回-1。
str.search(/正则/); 忽略大小写的匹配---/正则/i。
str.match(/正则/gi); 默认只找一个,g表示找所有。
reg.exec( );
判断:
arr.every( ) :判断arr中每个元素是否都符合要求,只有每一个元素都符合要求的时候,才返回true;只要有一个元素不符合条件,就返回false。类似 &&
arr.some( ) :判断arr中是否包含符合要求的元素,只要有一个元素符合条件,就返回true;除非所有的元素都不符合条件,才返回false。类似 ||
语法:
var bool = arr.every(function(val,i,arr){
var 自动获取当前元素值
i 自动获取当前元素的位置
arr 自动获取当前数组
return 条件;
})
遍历:
arr.forEach( ) :对原数组中每个元素执行相同的操作,直接操作的原数组
语法:
arr.forEach(function(val,i,arr){执行的相同操作 arr[i] = newValue})
arr.map( ) :取出原数组中的值,加工后,放入新数组
语法:
var newArr = arr.map(function(var,i,arr){
return newValue;
})
过滤和汇总:
过滤:选取原数组中符合条件的元素组成新数组
语法:var subArr = arr.filter(function(val,i,arr){
return 条件 ;
}) ----所有返回true的元素,收集到新数组中
汇总:对数组中每个元素的值最终统计一个新的结果
语法:var result = arr.reduce(function(prev,val,i,arr){
prev 获得截止目前的统计结果
return prev + val;
start : 累积数量的起始值
}[,start]);
Math.ceil(num) 向上取整,取num的下一个整数。
Math.floor(num) 向下取整,省略小数部分。
Math.floor("12.5px")==>Math.floor(Number(12.5px))==>Math.floor(NaN)==>NaN。
Math.round(num) 四舍五入取整 缺点:只能取整。
Math.random() 随机生成一个整数(0-n)。
Math.pow(底数,幂) 乘方
Math.sprt(n) 开平方
Math.max(10,10,20,30) 最大值
Math.min(10,10,20,30) 最小值
内置对象11个:
Number String Boolean
Array Date RegExp Math
Error
Function Object 级别较高的对象,往往是父对象
Global / window浏览器中用来替换Global
一.DOM Tree (节点树)
1.getElementById方法定义在Document.prototype上,即Element节点上不能使用。
2.getElementsByName方法定义在HTMLDocument.prototype上,即非html中的document以外不能使用(xml document,Element)
3.getElementsByTagName方法定义在Document.prototype 和 Element.prototype上
getElementsByTagName(*)
4.HTMLDocument.prototype定义了一些常用的属性,body,head,分别指代HTML文档中的<body><head>标签。
document.body
document.head
5.Document.prototype上定义了documentElement属性,指代文档的根元素,在HTML文档中,他总是指代<html>元素
document.documentElement 代表html文档
6.getElementsByClassName、querySelectorAll、querySelector在Document,Element类中均有定义
二.按照HTML查找
按照HTML查找 在整个页面或者父元素下,查找属性或标签符合条件的元素对象有4种:
1.id 只能用document调用 仅返回一个元素
var div = document.getElementById("box");
console.log(div);
2.tagName 查找指定父元素下的指定标签元素 任何父元素都可以调用
返回值哪怕只有哦一个,也放在集合中 没有找到符合要求的子节点 返回一个空数组
查找不仅只查直接子节点,而且查找所有子代节点
var divs = document.getElementsByTagName("div");
var aLinks = div.getElementsByTagName("a");
console.log(document.getElementsByTagName("span"));
console.log(document.getElementsByTagName("p"));
3.name属性查找 查找表单 只能用document调用 返回:动态数组
var form1 = document.getElementById("form1");
var chks = document.getElementsByName("sex");
4.按class属性查找 只能通过任意父元素上调用 查找的子代 只要标签中class属性值符合要求的就被选中
var lis = nav.getElementsByClassName("active");
DOM的一些API:
核心DOM:可以操作一切结构文档API,访问标准的HTML属性
获取属性值:
aLink.getAttribute("href");
修改属性值:
aLink.setAttribute("href","bailiban.com");
判断是否包含指定属性 一定是在html标签中有设置的属性
var bool = aLink.hasAttribute("traget");
移除属性--属性名和属性值一起移除
aLink.removeAttribute("title");
HTML DOM :对核心DOM中常用的API的简化
一切HTML标准属性都被HTML DOM封装到元素对象中
获取属性值:
aLink.href;
修改属性值:
aLink.href = "bailiban.com";
判断是否包含指定属性,所有的标准属性都封装在对象中,如果没有设置值,返回的“ ”
var bool = aLink.traget =="";
移除属性,只移除了属性
aLink.title = "";
注意:class因为和ES中的class属性冲突,html中的class改名为className
特殊:状态属性 disabled selected checked
不用核心DOM操作,用HTML DOM 打点操作
attribute vs preoperty 属性
attribute 指出现在开始标签中的属性
property 保存在内存中的对象中的属性
核心DOM只能操作出现在页面上的attribute属性,无法操作未出现在页面上,存在内存中的property属性
追加:父元素的结尾添加新元素
parent.appendChild(elem);
插入:在现有子元素之前插入新元素
parent.insertBefore(elem,oldElem)
替换:替换现有子元素
parent.repalaceChild(elem,oldElem)