jsdom元素、数组以及排序

jsdom元素的操作

1.获取元素的方法：getElementsByClassName 返回集合； 例：

var btn=documennt.getElementsByClassName("btnlist") console.log(btn[0]); var btn2=document.getElementById("btn"); console.log(btn2);

2.直接获取body的方法：

console.log(document.body);

js元素的事件

1.dom事件前缀都带on; 2.dom事件可分为键盘事件 表单事件 鼠标事件 浏览器事件 触屏事件； 键盘事件可分为onkeydown(键盘按下)；onkeyup(键盘抬起)； onkeypress(按键事件)； 表单事件可分为onfouse(获得焦点事件)； onblur(失去焦点事件) ； 鼠标事件可分为onclick(单击事件)； ondbclick(双击事件)； onmouseleave(鼠标水平离开事件)； onmousemove(鼠标移动)； onmouseenter(鼠标进入)； onmouseover(鼠标悬停)； 浏览器事件可分为window事件；onload加载完成事件；onresize窗口变化事件 ；onerror报错事件 onscroll滑动事件； 触屏事件可分为touch触屏事件；touchstart开始触屏事件；touchmove触屏移动事件；touchend触屏结束事件； 3.给dom元素添加事件： 动态添加事件：

var btn = document.getElementById("btn"); btn.onclick = function () { console.log(1); } btn.onclick = showinfo; function showinfo() { console.log(1); }

4.事件的监听

var btn2 = document.getElementById("btn2"); btn2.addEventListener("click",function (){ console.log(2); }); btn2.addEventListener("click", showbtn); function showbtn() { console.log(2); }

5.改变dom元素的属性和行为

var btn=document.getElementsByTagName("button"); btn[0].style.background="red"; btn[0].style.width="200px"; console.log(btn[0].style.width);

获取非行内样式：

console.log(window.getComputedStyle(btn[0]).height); console.log(window.getComputedStyle(btn[0]).width);

js里面的数组

一.数组 1.赋值一个参数，代表的是数组的长度为2 例如var arr = new Array(2); 2.;多个值代表直接赋值（长度自动）：var arr1 = new Array(2, 3, 4)； 3.var k=new Array() 简写：var k=[]; 4.var k = [1, 2, 3, 4, 5]; 4.1 数组拼接：console.log(k.join("|")); join是驻足转化为string，参数是按照什么符号拼接； 4.2 数组翻转：console.log(k.reverse()); reverse 数组的翻转 4.3 截断数组：1.slice（截取完成之后对原数组没有影响） console.log(k.slice(0, 2)); console.log(k); 2.splice （截取完成之后对原数组有影响） console.log(k.splice(0, 3)); console.log(k); 4.4数组追加：push （数组内容之后追加 返回的值是数组的长度） console.log(k.push(0)); console.log(k); unshift （内容之前追加 返回值是数组的长度） console.log(k.unshift(-1))； console.log(k); 4.5数组删除：shift （数组的删除 ，删除前面的，返回值是删除的值） console.log(k.shift()); console.log(k); pop（ 删除是最后边的 返回值是删除的值） console.log(k.pop());

数组的排序

1.选择排序：

function selectionSort(array) { if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') { var len = array.length, temp; for (var i = 0; i < len - 1; i++) { var min = array[i]; for (var j = i + 1; j < len; j++) { if (array[j] < min) { temp = min; min = array[j]; array[j] = temp; } } array[i] = min; } return array; } else { return 'array is not an Array!'; } }

2.冒泡排序：

function bubbleSort(array) { if (Object.prototype.toString.call(array).slice(8, -1) === 'Array') { var len = array.length, temp; for (var i = 0; i < len - 1; i++) { for (var j = len - 1; j >= i; j--) { if (array[j] < array[j - 1]) { temp = array[j]; array[j] = array[j - 1]; array[j - 1] = temp; } } } return array; } else { return 'array is not an Array!'; } }