javascript知识点总结（二）之 DOM和BOM对象模型
1，字符串创建方式：1，var str = ‘hello word’；字面量方式创建 2，var str = new String（‘hello word’）；构造函数方式创建 字符串常见方法： charAt :根据下标获取字符。str.charAt(0) = 'h' indexOf:返回字符串在str中第一次出现的位置，找不到就返回-1；第二个参数，从那个位置开始搜索，默认为0 substring：获取字符串中的子串，第一个参数是开始位置，最后一个是结束位置，默认到尾。 slice：获取字符串中的子串，第一个参数是开始位置，最后一个是结束位置，默认到尾。 substr：截取子串，第一个参数是开始位置，最后一个是结束位置，默认到尾。 split：分隔字符串，使用分隔符分隔子串，会返回一个数组，使用空字符串分隔，会将每个字符串分隔为数组。 replace：传两个参数，第二个参数替换第一个参数，只替换第一个。 字符串常见API: charCodeAt：获取键盘某个位置上的编码 fromCharCode ：可以把编码转化成字符 2，常见的Math函数： Math.rondom：随机数[0,1)；Math.round：四舍五入；Math.pow(2,3)：2的3次方；Math.sqrt()：开平方； Math.floor()：向下取整；Math.ceil()：向上取整；Math.max：最大值；Math.min：最小值；Math.abs：绝对值； 例：随机出n-m之间的数字。Math.ceil(Math.random()*(m-n))+n 3，日期函数： var oData = new Date() //oDate.getDate() 返回一个月中的某一天(1~31) //oDate.getDay() 返回一周中的某一天(0~6) //oDate.getMonth() 返回月份(0~11) //oDate.getFullYear() 以四位数字返回年份 // //oDate.getHours() 返回当前小时（0-23） //oDate.getMinutes() 返回当前分钟 (0 ~ 59) //oDate.getSeconds() 返回当前秒(0 ~ 59) //oDate.getMillisenconds() 返回当前毫秒(0 ~ 999) // //oDate.getTime() 返回1970年1月1日至今的毫秒数 // //oDate.setDate() 设置月中的某一天 (1 ~ 31) // oDate.setMonth() 设置月份 (0 ~ 11) // 例：oDate.setMonth(9); alert(oDate.getMonth()) //oDate.setFullYear()设置年份（四位数） //oDate.setHours() 设置小时（0-23） //oDate.setMinutes() 设置分钟 (0 ~ 59) //oDate.setSeconds() 设置秒(0 ~ 59) //oDate.setMillisenconds() 设置毫秒(0 ~ 999) //oDate.setTime() 设置1970年1月1日至今的毫秒数 判断两个日期相差的天数 //判断两个时间相差的天数 function dateDays(startyear,startmonth,startday,endyear,endmonth,endday){ var start = new Date(startyear,startmonth,startday) var end = new Date(endyear,endmonth,endday) var day = start.getTime()-end.getTime() day = Math.abs(parseInt(day/1000/60/60/24)) } dateDays(2018,2,2,2018,2,10) 4，BOM：浏览器对象模型，提供了页面与浏览器进行交互的对象，核心对象是window 页面跳转：1，location.assign(url) ；url：目标页面； 2，location.replace(url); 3,location.href = “url” 刷新页面：location.reload()； 打开新页面：window.open 关闭页面：window.close() 页面弹出框：alert() prompt() 弹出文本框，会有返回值 confirm() 会返回布尔值，确认为true，取消为false 5，history对象，保存用户上网的历史记录 后退 history.go(-1) = history.back() 前进一页 history.go(1) = history.forward() 前进两页 history.go(2) 6，scrollTop：可视区域距离页面顶部的距离 作用：回顶部，监控页面滚动事件 兼容处理：scrollTop = document.document.Elemrnt.srcollTop ||document.bady.scrollTop scrollLeft:可视区域距离页面左边的距离。 clientWidth:可视区域的宽度。 clientHeight:可视区域的高度。 7，定时器，每隔一段实践执行一次 ；setInterval创建一个定时器，清除定时器 clearInterval 延时器，指定时间间隔后执行一次；setTimeout创建一个延时器，请除延时器 clearTimeout 一般代码按顺序执行称之为同步执行，定时器和延时器则称之为异步执行。 8，Dom：文档对象模型，dom文档包含页面元素 ，dom对象，dom节点类型 通过id查询 var div = document.getElementById('div') 通过class名查询 var li = document.getElementsByClassName('list') 返回伪数组，有数组的length属性还可以通过下标拿到第几个值 例如：document.getElementsByClassName('list')[0] 通过标签名查询 var input = document.getElementsByClassName('input') 同样返回伪数组。 新增查询方法 var res = document.querySelectorAll('#id') document.querySelector('.box') 返回第一个查询到的dom对象 9，dom元素的删除 1，直接删除 ：div.remove() 2，通过父元素删除子节点 ul.removeChild(li) 10，dom元素的创建 例如：创建一个div var div = document.createElement('div') 把创建的div添加到body中，body.appendChild('div') 11，don元素的替换 con.replaceChild(新节点，旧节点) 12，dom获取非行内样式 非低ie： getComputedStyle(id).width 低ie：id.currentStyle 13，dom属性节点 attributes 获取所有属性节点 getAttribute() 获取一个属性（可以获取自定义属性（唯一）） setAttribute() 设置一个属性节点（可以设置自定义属性） removeAttribute() 删除一个属性节点 属性节点类型：元素，属性，节点 创建一个文本属性 document.createTextNode('你好') childrenNodes 获取子节点，包含空白节点 box.innerHtml 获取box的页面内容 box.innerText 获取文本，既包含标签也能显示字符串 box.outerHtml 使用后面的内容替换div firstChild/lastChild 获取第一个/最后一个元素，但会获取空节点 firstElementChild 不会获取空节点 lastElementChild 不会获取空节点 parentNode 获取父节点 previousSibling 上一个兄弟节点 nextSibling 下一个兄弟节点 加Element不会获取空白节点 box.insertBefore(newNode,existNode) 在已经存在的节点中插入新的节点 list.inserBefore(oli.list,firstElementChild) 在列表前面插入li 14，文档碎片，作用，加载更多时，创建一个文档碎片，把新加载的内容先添加到文档碎片内，在把文档碎片添加到页面中，这样向页面内新加东西时只用加一次就够了，可以减少页面渲染。 创建文档碎片：var df = createDocumentFagment() 把频繁插入list的内容先插入到文档碎片中 df.appendChild(oli) 最后把文档碎片插入到list里 list.appendChild(df) 15，事件 js可以处理的事件类型分为：鼠标事件，键盘事件，HTML事件 //鼠标事件 //onclick:用户单击鼠标按钮或按下回车键时触发 //ondblclick:当用户双击主鼠标按钮时触发 //onmousedown:当用户按下鼠标还未弹起时触发 //onmouseup：当用户释放鼠标按钮时触发 //onmouseover：当鼠标移到某个元素上方时触发 //onmouseout：当鼠标移出某个元素上方时触发 //onmousemove：当鼠标指针在元素上移动时触发 HTML 事件 //onload：当页面或者资源完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发。 //onselect：当用户选择文本框(input 或 textarea)中的一个或多个字符触发 //onchange：当文本框(input 或 textarea)内容改变且失去焦点后触发 //onfocus：当页面或者元素获得焦点时在 window 及相关元素上面触发 //onblur：当页面或元素失去焦点时在 window 及相关元素上触发 //onsubmit：当用户点击提交按钮在<form>元素上触发 //onreset：当用户点击重置按钮在<form>元素上触发 //onresize：当窗口或框架的大小变化时在 window 或框架上触发 //onscroll：当用户滚动带滚动条的元素时触发 键盘事件keyup、keydown、keypress //onkeydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发 //onkeypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发 //onkeyup：当用户释放键盘上的键触发 16，事件对象，当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息 。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。 event：通过事件绑定的执行函数是可以得到一个隐藏参数的 。说明，浏览器会自动分配一个参数，这个参数其实就是 event 对象。 event.button属性 //当前事件触发时哪个鼠标按键被点击 clientX、clientY属性 //鼠标在可视区X坐标和Y坐标，即距离左边框和上边框的距离 screenX、screenY属性 //鼠标在屏幕区X坐标和Y坐标，即距离左屏幕和上屏幕的距离 offsetX、offsetY属性 //鼠标相对于事件源的X坐标和Y坐标 pageX、pageY // 鼠标相对于文档的X坐标和Y坐标 原文发布时间：2018年03月28日 本文来源CSDN博客如需转载请紧急联系作者
