BOM和DOM

喜夏-厌秋 提交于 2019-12-05 01:48:07

一.BOM

BOM(Browser Object Model)是指浏览器对象模型,它使 JavaScript 有能力与浏览器进行“对话”

一些window常用方法:

  • window.innerHeight-浏览器内部高度

  • window.innerWidth

  • window.open()

  • window.close()

    window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面
    location.href //获取uurl
    location.href='URL'//跳转到指定页面
    location.reload()//重新加载页面

二.计时相关

通过使用 JavaScript,我们可以在一定时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。

setTimeout()

语法:

var t=setTimeout('JS语句',ms)

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000)
// 取消setTimeout设置
clearTimeout(timer);
setInterval()
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

function func(){
    alert ('hhhhhh')
}
setTimeout(func,3000)

二.DOM

DOM(Document Object Model)是一套对文档的内容进行抽象和概念化的方法。 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)

DOM标准规定HTML文档中的每个成分都是一个节点(node):

  • 文档节点(document对象):代表整个文档
  • 元素节点(element 对象):代表一个元素(标签)
  • 文本节点(text对象):代表元素(标签)中的文本
  • 属性节点(attribute对象):代表一个属性,元素(标签)才有属性
  • JavaScript 可以通过DOM创建动态的 HTML:
  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应
document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集
parentElement            父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

创建节点

语法:reateElement(标签名)

var divEle=document.createElement('div');//创建

divEle.setAttribute('name','yqliu');//设置属性

var aEle=document.createElement('a');

aEle.setAttribute('href','http://www.baidu.com')

aEle.innerText='点我';

divEle=document.getElementById('p1');

pEle=document.getElementById('p1')

divEle.insertBefore(aEle,pEle);

在div这个标签里面,将aEle插入到pEle的前面

onclick        当用户点击某个对象时调用的事件句柄。
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               // 练习:输入框
onblur         元素失去焦点。               应用场景:用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange       域的内容被改变。             应用场景:通常用于表单元素,当元素内容被改变时触发.(select联动)

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress     某个键盘按键被按下并松开。
onkeyup        某个键盘按键被松开。
onload         一张页面或一幅图像完成加载。
onmousedown    鼠标按钮被按下。
onmousemove    鼠标被移动。
onmouseout     鼠标从某元素移开。
onmouseover    鼠标移到某元素之上。

onselect      在文本框中的文本被选中时发生。
onsubmit      确认按钮被点击,使用的对象是form。
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!