- 循环
- 注意点：
- 函数中，阻断程序执行，用的是return；
- 循环中，阻断循环执行，用的是break；
- 循环中，阻断该次循环，其他循环继续，用的是continue;
- 判断
var n=3;
seitch(n){
case 1:
alert(1);
break;
case 2:
alert(2);
break;
case 3:
alert(3);
break;
default:
alert(4);
break;
}
- 运算符
- "=="的隐式数据类型比较
- 对象==对象 对象比较的是地址，则[]==[] false;
- 数字与对象：0==[]:为真；[]转换为"",再转换为0；
- 数字与布尔值： 0==![]: 为真；当使用！时，优先进行判断，[]为真，![]为假，所以0==![]为真；
- null==undefined;
- NaN跟任何值都不相等，包括它自己；
- 浏览器信息
- 获取方法：window.navigator.userAgent
- 判断：通过查找信息中的特定字符串来判断浏览器种类，用indexOf()方法；
- Chrome:谷歌浏览器；信息为：
Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36
- 判断条件：if(u_agent.indexOf("Chrome")>-1);
- Firefox:火狐浏览器；信息为：
Mozilla/5.0 (Windows NT 6.2; WOW64; rv:22.0) Gecko/20100101 Firefox/22.0
- 判断条件：if(u_agent.indexOf("Firefox")>-1);
- IE8:IE浏览器；
- 判断条件：if(u_agent.indexOf("MSIE 8.0")>-1);
- DOM节点关系
- elementnode.childNodes: 元素节点下的所有子节点，包括元素节点，空白节点，注释节点等；
- elementnode.children: 元素节点下的所有元素子节点，只包括元素节点；
- 兼容性问题：在IE8浏览器下，会包含注释节点，不兼容，若使用此方法，必须保证在所有子节点中不能包含注释；
- 实例：目的获得一个元素节点下的所有元素子节点，首先判断浏览器种类，如果不是IE8浏览器时，使用children，如果是，则遍历所有子节点，判断其节点类型来排除掉除了元素节点以外，其他的节点；
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var oul=document.getElementsByTagName("ul")[0];
//children属性，所有的浏览器都支持，只有在IE8浏览器下会把注释算在子元素节点中；所以要先判断浏览器种类，看是否可用；
var u_agent=window.navigator.userAgent;
function getchildren(eleobj) {
if(u_agent.indexOf("MSIE 8.0")==-1){
return eleobj.children;
}
var achild=eleobj.childNodes;
var ary1=[];
for(var i=0; i<achild.length; i++){
if(achild[i].nodeType==1){
ary1.push(achild[i]);
}
//if条件语句可用三目形式： achild[i].nodeType==1?ary1.push(achild[i]):null;
}
return ary1;
}
var achilds=getchildren(oul);
console.log(achilds);
</script>
</body>
- nodeObject.previousSibling返回给定子节点的上一个哥哥子节点(包括空白节点，注释节点等)； 若不存在,则返回null;
- nodeObject.previousElementSibling: 返回给定子节点的上一个元素子节点，兼容性不好，IE浏览器不支持；
- 实例：1）封装一个函数，获取当前元素上一个哥哥元素；2）获取当前元素所有的哥哥元素组成的数组集合；
<body>
<div class="div-1">内容1</div>
<div class="div-2">内容2</div>
<div class="div-3">内容3</div>
<div class="div-4">内容4</div>
<div class="div-5">内容5</div>
<script>
var aDiv=document.getElementsByTagName("div");
//封装一个，获取当前元素上一个哥哥元素的函数；
function preEle(curEle) {
if(curEle.previousElementSibling){
return curEle.previousElementSibling;
}
var pre=curEle.previousSibling;
while(pre && pre.nodeType!==1){//判断pre是否存在，不存在即为null，为false；跳出循环；
pre=pre.previousSibling;
}
return pre;
}
//获取当前元素所有的哥哥元素
//思路：实参-当前元素；返回值，所有哥哥元素节点组成的数组集合；
var curelement=aDiv[3];
function allpre(curnet) {
var allpres=[];
while(preEle(curnet)){//判断条件：curnet形参当前元素上一个哥哥元素是否存在，不存在则返回null，为假，循环停止；
allpres.unshift(preEle(curnet));
//用push会使元素倒着放进数组中；用unshift是元素正序放进数组中；
curnet=preEle(curnet);//进行重新赋值，然后接着判断；
}
return allpres;
}
var pe=allpre(curelement);
console.log(pe);
</script>
</body>
- DOM动态操作
- 创建元素节点：createElement()
- 语法：document.createElement("标签名");
- 创建文本节点：createTextNode()
- 语法：document.createTextNode("文本内容");
- 与innerHTML的区别：
- createTextNode()方法添加的文本，为纯文本，不带格式，html标签会被看作文本处理；
- innerHTML赋值方法，会保留文本的格式，会保留html标签，会起作用；
- 在末尾附加节点：appendChild()：在父级节点的最后一个子节点后面添加一个新的子节点；通常用于给新建元素节点插入文本节点；
- 语法：parentnode.appendChild(newnode);
- 在指定节点前面插入节点：insertBefore()
- 语法：parentnode.insertBefore(newnode,node1);即：在父级元素下的node1节点前插入newnode节点；
- 删除节点：removeChild():删除父级元素下的子节点；
- 语法：parentnode.removeChild(node);即：在父级元素下删除node子节点；
- 注意：在进行removeChild()方法删除的子节点，虽不在DOM树中，但还存在内存中，想要彻底删除此节点，给其赋值为null;
- 替换元素节点：replaceChild()
- 语法：parentnode.replaceChild(newnode,oldnode)；即：将某元素下的oldnode节点替换成newnode;
- 注意：当oldnode节点被替换后，所有与之相关的属性及内容都被移出；
<script>
//步骤：先创建后插入；
var odiv=document.createElement("div");//创建新的元素节点
var odivtext=document.createTextNode("美好的一天，坚持就会胜利，你的努力不会白费");//创建新的文本节点；
odiv.appendChild(odivtext);//将文本节点插入到odiv元素节点的最后一位；
var obody=document.body;//获得body元素节点的方法；
obody.appendChild(odiv);//将odiv插入到body中；
</script>
- 获得body元素节点方法：document.body;
- 获得node1节点的父级节点的方法：node1.parentnode;
- 克隆节点：cloneNode()：原节点中的属性名及属性值，全部复制；
- 语法：node1.cloneNode(参数)
- node1为需要克隆的节点；
- 参数分为false和true;其中false为只克隆表层，不克隆里面内容；true为深度克隆，即内部内容也克隆；
<body>
<div class="mass" id="div1">美好的一天</div>
<script>
//获取元素节点odiv；
var odiv=document.getElementById("div1");
//克隆元素节点
var odiv2=odiv.cloneNode();//只克隆表层，不克隆里面内容；
var odiv3=odiv.cloneNode(false);//只克隆表层，不克隆里面内容；
var odiv4=odiv.cloneNode(true);//深度克隆，即内部内容也克隆；
document.body.appendChild(odiv2);
document.body.appendChild(odiv3);
document.body.appendChild(odiv4);
</script>
</body>
- 属性操作
- "odiv.属性名"：获得odiv元素的属性值，或设置属性值；当属性名为变量时，不能用此方式；
- odiv["属性名"]:获得odiv元素的属性值，或设置属性值；当属性名为变量时，不加双引号；
- attribute():
- elementNode.getAttribute("属性名"):获取元素节点属性名的属性值；
- elementNode.setAttribute("属性名","属性值"):设置或修改元素节点属性名的属性值；
- elementNode.removeAttribute("属性名"):删除元素节点上的属性；
- "."设置自定义属性与attribute()方法设置的区别：
- 1）通过点来设置自定义属性，在html标签中看不到，但是通过setAttribute()设置的属性可以看到；
- 2）通过点获取元素身上已经定义好的自定义属性，不能拿到，但是通过getAttribute()可以获取到属性值；
<body>
<div id="div1" class="div-dd" meihao="123">美好的</div>
<script>
var odiv=document.getElementById("div1");
alert(odiv.meihao);//不能获取属性值，返回的是undefined;
alert(odiv.getAttribute("meihao"));//可以获取属性值;
</script>
</body>
- 注意：千万不要混搭；即：通过点设置的自定义属性，不要用getAttribute()方法来获取；通过setAttribute()方法设置的属性，不能用点来获取；
<body>
<div id="div1" class="mass">美好的一天</div>
<script>
var odiv=document.getElementById("div1");
//第一种情况，用自定义属性添加属性，用getAttribute()不能获取到属性值；
odiv.index=12;
alert(odiv.index);//能拿到；
alert(odiv.getAttribute("index"));//不能拿到，返回的值为null;
//第二种情况，用setAttribute()添加的属性，用"."也获取不到属性值；
odiv.setAttribute("index",123);
alert(odiv.index);//不能拿到返回的值为undefined;
alert(odiv.getAttribute("index"));//能拿到；
</script>
</body>
- innerHTML属性：获取或设置元素节点的文本内容
- 语法：elementnode.innerHTML="内容";其中内容为带格式添加，标签会起作用；
- 改变元素节点的CSS样式：
- 语法：elementnode.style.property=new style;
- 例：
- 设置字体颜色：mycon.style.color="red";
- 设置字体：mycon.style.fontFamily="宋体";
- 设置字体大小：mycon.style.fontSize="10px";
- 作用：用于设置或修改单一的样式；
- 设置显示和隐藏
- 语法：elementnode.style.display="value";如：mycon.style.display="block/none";
- 设置或获得元素节点的class名
- 语法：elementnode.className="类选择器名";
- 作用：可以通过修改class名，来改变元素的所有样式类型；
- 打印
- 打印对象身上的属性和方法：console.dir(对象)；
- 数据类型检测
- typeof 用于基本数据类型检测；
- obj1 instanceOf Object 前面的对象是否属于后面的类（类首字母大写）
- obj.constructor 可以拿到所属的构造函数；
- Object.prototype.toString.call(arg) 打印arg类的详细信息；
- NaN出现的情况：
- Number()数据类型转换失败
- 无效运算的时候；如：null+undefined undefined+undefined;
- undefined出现的情况：
- 函数定义了形参，但没有赋值实参，获得的形参值为undefined;
- 函数没有写return，或是写了return，但是未赋值；函数获得的值为undefined;
- 当一个对象上的属性名不存在的时候，不会报错，会返回undefined;
<script>
//1.函数添加了形参但是未设置实参，得到的形参值为undefined;
function fn(a) {
if(a==null){//a的值为undefined;undefined==null;则弹出true;
alert(true);
}else{
alert(false);
}
}
var res=fn();
//2.函数定义完，没有添加return,或添加return后未赋值，函数返回值为undefined；
function fn(a) {
if(a==null){//a的值为undefined;undefined==null;则弹出true;
alert(true);
}else{
alert(false);
}
return ;//添加return后，没有赋值，函数也没有返回值；
}
var res=fn();//res为undefined;
console.log(res);
</script>
- 严格转换与非严格转换
- 严格转换Number();转换失败为NaN
- 在Switch()中，判断使用严格比较"==="
- Number(null)为0；其中null+10的值为10；但是null!=0;即alert(null==0)，弹出的结果为false;
- Number(undefined)为NaN;
- 算术运算中的使用
- 加号"+"：1）字符串拼接（只要不是数字间相加，其余的全部拼接）；2）加法运算:全部是数字之间的加法；3）null+10的值为10；
- 减号"-",乘号"*",除号"/",取余"%":全部进行数学运算，会默认进行数据转换（按照严格转换Number());
- 比较：null参与进行算术运算时，会被严格转换为0；undefined参与算术运算时，会被严格转换成NaN，结果为NaN;
- 例：("123px"+3)=123px3；("123px"*-/%3)=NaN; (null+10)=10;(null-10)=-10;(undefined+-x/%10)=NaN;0/0=NaN;
- false转换为0；true转换为1；
- []转换为0；
- isNaN(参数):验证参数是否为非有效数字NaN，若为NaN则返回true;若不为NaN则返回false;
- 如果isNaN函数的参数不是Number类型， isNaN函数会首先尝试将这个参数严格转换为数值，然后才会对转换后的结果是否是NaN进行判断。
isNaN(NaN); // true
isNaN(undefined); // true
isNaN({}); // true
isNaN(true); // false
isNaN(null); // false
isNaN(37); // false
// strings
isNaN("37"); // false: 可以被转换成数值37
isNaN("37.37"); // false: 可以被转换成数值37.37
isNaN("37,5"); // true
isNaN('123ABC'); // true: parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN(""); // false: 空字符串被转换成0
isNaN(" "); // false: 包含空格的字符串被转换成0
// dates
isNaN(new Date()); // false
isNaN(new Date().toString()); // true
isNaN("blabla") // true: "blabla"不能转换成数值
// 转换成数值失败， 返回NaN
- 非严格转换：parseInt():转化为整数；parseFloat():保留小数转化；
- 其他数据类型转为布尔数据类型
- Boolean()
- 假："",0,NaN,null,undefined,false
- 真：除了假都是真；
- if(一个值) 会转成布尔；
- if(表达式/比较) 会默认转成布尔；
- 其他数据类型转成字符串数据类型
- 对象转字符串：toString()；
- 数字转字符串：""+数字；用在时钟中的0变为00；
- 函数自带的参数机制：arguments;
- 当函数中实参的个数不确定，获取所有的实参值，用arguments;
- arguments为类数组，不能使用数组的方法；
- arguments的属性：
- arguments.callee():获取函数本身；
- arguments.length():类数组长度；
- 实例：
<script>
//针对函数实参个数不确定的函数，利用arguments来获取所有的实参值
//通过遍历arguments类数组，将所有的数字求和；
function fn(){
var sum=0;
for(var i=0; i<arguments.length; i++){
if(!isNaN(arguments[i])){//判断条件中isNaN(参数)，若参数不是NaN,则将参数强制进行Number转换，然后再判断是否为NaN;
sum+=Number(arguments[i]);
}
}
return sum;
}
var res=fn(1,2,3,4,"12","13px");
console.log(res);
</script>
- 类数组包含两种：
- htmlCollection 元素集合：tagName className name ...
- arguments类数组
- 所有的类数组，都不能使用数组的方法；
- 闭包思想：在函数调用时，会形成一个私有作用域，保护里面的变量不受外界的干扰，函数的这种保护机制，叫做闭包；
- 选项卡中的使用：在for循环中，添加点击事件，i值无法保存
- 通过闭包函数，将i值保存在自己的私有作用域中；
- 设置自定义属性：将i值保存在自定义属性中；
- 用点设置，在标签中，无法看到，但必须用点获取；
- 用setAttribute()设置，在标签中会看到，但必须用getAttribute获取；用点获取不到；
- 普通对象：
- 当定义普通对象时，乱序定义，但对象会重新排序，纯数字属性名以升序的形式排在前面，非纯数字属性名按照定义顺序排在后面；
var obj={
name:"guobin",
age:18,
sex:"nan",
14:34,
13:36,
15:25,
};
//当定义普通对象时，乱序定义，但是当使用时，对象会重新排序，纯数字属性名以升序的形式排在前面，非纯数字属性名按照定义顺序排在后面；即定义对象后为obj={13: 36, 14: 34, 15: 25, name: "guobin", age: 18, sex: "nan"};
- 函数类型
