JavaScript构成

JavaScript构成

BOM

浏览器对象模型

Window对象

所有浏览器都支持window对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

window属性

History

History对象是window对象的历史记录对象，常见的方法有back、forward、go(count)

screen

screen对象是获取屏幕的分辨率，主要用的的有四个属性：width、height、availWidth、availHeight

navigator

navigator对象是用来描述浏览器相关信息的，其他了解，userAgent必须掌握

<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用cookie操作: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台 " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>语言环境 " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

Location

Location对象式BOM中比较重要的对象
属性：host、hostname、href、pathname、port、protocol、
方法有reload 刷新页面。

Window事件

onload 一个页面或一幅图像完成加载 在对象已加载时触发
onresize 随着窗口或框架大小的改变而改变 window.function(){}
onscroll 滚动条滚动事件

DOM

文档对象模型

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

获取文档对象

document.getElementById()
document.getElementsByTagName()
document.getElementsByName()
document.getElementsByClassName()

操作DOM对象内容

innerText
innerHTML

操作DOM对象的属性

DOM对象.属性名称
DOM对象[属性名称]
getAttribute(属性名称)、setAttribute(属性名称,属性值)
removeAttribute(属性名称)

document.getElementById(“box”).value = 10
document.getElementById(“box”)[“name”] =“ZZY”
document.getElementById(“box”).setAttribute(“value”,“ZZY”)
document.getElementsByTagName("p")

操作DOM对象样式

获取样式的值（有单位）
标签对象.style.样式名称
获取样式的数值（无单位，数字）
注意内部样式表和外部样式表中的样式获取需要使用到

getComputedStyle(对象).width

操作DOM节点

节点创建删除
createElement（）：创建元素节点
appendChild（）：末尾追加方式插入节点
insertBefore（新元素,参考元素）：在指定节点前插入新节点
remove() ：删除指定节点
removeChild（）:删除子节点
相关节点获取
parentElement父元素
children 所有的子元素
firstElementChild第一个子元素
lastElementChild最后一个子元素
previousElementSibling前一个
nextElementSibling后一个

操作DOM对象事件

Js事件分为鼠标和键盘事件、窗口个事件

常见的鼠标事件：onclick、ondblclick等
常见的键盘事件：onmousedown、onmouseup、onmousepress、onmousemove、onmouseenter、onmouseleave、onmouseover、onmo
useout
常见窗口事件：onload、onscroll、onresize、

所有的事件处理函数都会都有两个部分组成，on + 事件名称，例如click事件的事件处理函数就是：onclick