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博客如需转载请紧急联系作者

相关文章
|
12天前
|
JavaScript 前端开发 API
JavaScript基础-BOM与窗口交互
【6月更文挑战第12天】本文介绍了BOM(浏览器对象模型),它是JavaScript与浏览器交互的API。核心对象包括顶级对象window、document、location、navigator和history。常见问题涉及window全局作用域、location.href编码、history使用和navigator.userAgent检测。提供了代码示例,如设置页面标题、页面跳转及利用history实现无刷新跳转。掌握BOM基础和最佳实践对前端开发至关重要。
|
1月前
|
JavaScript 前端开发 数据可视化
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
Three.js 是一个用于在 Web 上创建和显示 3D 图形的 JavaScript 库。它提供了丰富的功能和灵活的 API,使开发者可以轻松地在网页中创建各种 3D 场景、模型和动画效果。可以用来展示产品模型、建立交互式场景、游戏开发、数据可视化、教育和培训等等。这里记录一下如何在Vue项目中使用Three.js
108 4
Three.js第2篇,加载glb / gltf模型,Vue加载glb / gltf模型(如何在vue中使用three.js,vue使用threejs加载glb模型)
|
3天前
|
存储 JavaScript 前端开发
第十篇-JavaScript BOM-下
第十篇-JavaScript BOM-下
4 0
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
第九篇-Javascript BOM - 上
第九篇-Javascript BOM - 上
5 0
|
30天前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
26 1
|
1月前
|
XML JavaScript 前端开发
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
JavaScript简介&引入方式(JavaScript基础语法、JavaScript对象、BOM、DOM、事件监听)
17 2
|
10天前
|
JavaScript 前端开发
JavaScript BOM 浏览器对象模型
JavaScript BOM 浏览器对象模型
|
1月前
|
前端开发 JavaScript TensorFlow
如何将训练好的Python模型给JavaScript使用?
本文介绍了如何将TensorFlow模型转换为Web格式以实现浏览器中的实际应用。首先,简述了已有一个能够检测扑克牌的TensorFlow模型,目标是将其部署到Web上。接着,讲解了TensorFlow.js Converter的作用,它能将Python API创建的GraphDef模型转化为TensorFlow.js可读取的json格式,用于浏览器中的推理计算。然后,详细说明了Converter的安装、用法及不同输入输出格式,并提供了转换命令示例。最后,文中提到了模型转换后的实践步骤,包括找到导出的模型、执行转换命令以及在浏览器端部署模型的流程。
28 3
|
1月前
|
缓存 JavaScript 前端开发
【JavaScript 技术专栏】DOM 操作全攻略:从基础到进阶
【4月更文挑战第30天】本文深入讲解JavaScript与DOM交互,涵盖DOM基础、获取/修改元素、创建/删除元素、事件处理结合及性能优化。通过学习,开发者能掌握动态改变网页内容、结构和样式的技能,实现更丰富的交互体验。文中还讨论了DOM操作在实际案例、与其他前端技术结合的应用,助你提升前端开发能力。
|
12天前
|
JavaScript 前端开发 UED
JavaScript基础-DOM操作:查找、创建、修改
【6月更文挑战第12天】本文介绍了DOM基础,包括查找元素(getElementById、getElementsByClassName等)、创建新节点(createElement、createTextNode)和修改节点(innerText、innerHTML、setAttribute等)。强调了易错点,如ID唯一性、性能考量和安全问题,并提供了代码示例。熟练掌握DOM操作对前端开发至关重要,但应注意性能优化,适时使用框架或库。
JavaScript基础-DOM操作:查找、创建、修改