javaScript中的BOM与DOM笔记

小白笔记中的javaScript中的BOM与DOM

简单介绍一下BOM与DOM：
BOM是浏览器对象模型（Browser Object Model ）
DOM是文档对象模型（Document Object Model）

书签

• BOM
  • window对象
  • navigator对象
  • screen对象
  • history对象
  • location对象
  • 弹出框
  • 计时
• DOM
  • 直接查找
  • 间接查找
  • 节点操作
  • 节点-HTML
  • 节点-CSS
  • DOM事件
  • 标签绑定DOM事件

javaScript之BOM
BOM中的中的核心是window对象，另外还包含window对象的子对象。
window对象
window对象的方法：

window对象的方法	描述
window.innerHeight	浏览器窗口的内部高度
window.innerWidth	浏览器窗口的内部宽度
window.open()	打开新窗口
window.close()	关闭当前窗口
window.moveTo()	移动当前窗口
window.resizeTo()	调整当前窗口的尺寸

navigator对象
navigator对象是window对象的子对象，主要用于查看访问者浏览器的信息

navigator对象的方法	描述
navigator.appName	web浏览器的全称
navigator.appVersion	web浏览器的版本信息
navigator.userAgent	客户端的信息
navigator.platform	浏览器运行所在的操作系统

screen对象
screen对象是window对象的子对象，主要包含用户屏幕的信息

screen对象的方法	描述
screen.availWidth	查看可用屏幕的宽度
screen.availHeight	查看可用屏幕的高度

history对象
history对象是window对象的子对象，主要包含浏览器的历史行为

history对象的方法	描述
history.back()	后退一页
history.forward()	前进一页
history.go(n)	浏览器历史跳转

对history.go(n)方法的补充：

history.go(1)==history.forward() 前进一页
history.go(-1)==history.back() 后退一页
history.go(0) 刷新页面


location对象
location对象是window对象的子对象，主要用于获取地址以及页面的跳转

location对象的方法	描述
location.href	获取当前页面的url
location.href="newurl"	跳转到指定的newurl页面
locaton.reload()	重新加载页面

弹出框
弹出框主要用于创建消息窗口，其中包含警告框、确认框、提示框（都是window对象的方法）。

弹出框的内容	介绍	详细描述
alert()	警告框	警告框包含一个确定按钮。当警告框出现后，用户需要点击确定按钮才能继续进行操作。
confirm()	确认框	确认框包含一个确定按钮和一个取消按钮。当确认框出现后，用户点击确认会返回true，点击取消会返回false。
prompt()	提示框	提示框包含确定按钮，取消按钮和输入框。当提示框出现后，用户可在输入框输入内容，接着用户点击确定会返回输入框内容，点击取消则返回null。

计时
计时主要用于定时与计时（都是window对象的方法）。

计时的内容	描述
setTimeout("js语句","毫秒")	在指定的一个时间后执行指定代码
setInterval("js语句","毫秒")	在指定时间间隔后不停地执行指定代码
clearTimeout()	用于停止setTimeout的定时
clearInterval()	用于停止setInterval()的计时

javaScript之HTML-DOM
简单的说，就是可以通过javaScript制作动态的html。

• javaScript 能够改变页面中的所有 HTML 元素
• javaScript 能够改变页面中的所有 HTML 属性
• javaScript 能够改变页面中的所有 CSS 样式
• javaScript 能够对页面中的所有事件做出反应

在BOM中，html中的所有内容都是节点：

文档节点document：代表整个文档
元素节点element：代表一个元素（标签）
文本节点text：代表元素（标签）中的节点
属性节点attribute：代表一个属性，（元素（标签）才有属性）
注释节点comment：注释

下面开始介绍BOM的方法：
直接查找：主要通过三种方式查找指定的html元素，分别是通过id查找，通过标签名查找，通过类名查找。

直接查找	描述
document.getElementById()	通过id查找
document.getElementsByTagName()	通过标签名查找
document.getElementsByClassName()	通过class类名查找

间接查找：主要通过已有的位置进行寻找。（dom代表目前节点）

间接查找	描述
dom.parentElement	父节点标签元素
dom.children	所有子标签
dom.firstElementChild	第一个子标签元素
dom.lastElementChild	最后一个子标签元素
dom.nextElementSibling	下一个兄弟标签元素
dom.previousElementSibling	上一个兄弟标签元素

节点操作：主要进行节点的创建，添加，删除，替换。

节点操作	描述
document.createElement(标签名)	创建一个节点
dom.appendChild(newdom)	添加节点。在dom节点的最后追加一个newdom子节点
dom.inserBofore(newdom,somedom)	添加节点。在dom节点的somedom子节点前面追加一个newdom子节点
removeChild(dom)	删除节点。删除dom节点
dom.replaceChild(newdom,somedom)	替换节点。将dom节点中子节点的somedom替换成newdom

节点-HTML：主要进行节点对html进行操作

节点-HTML	描述
dom.getAttribute(属性)	通过节点获取某一属性的属性值
dom.setAttribute(属性,属性值)	通过节点修改某一属性的属性值
dom.removeAttribute	通过节点删除某一属性
dom.value	获取某一节点的value值
dom.innerText	获取文本内容（不包括标签）
dom.innerHTML	获取文本内容以及标签名

节点-CSS：主要进行节点对css进行操作。（dom代表目前节点）

节点-CSS	描述
className	获取所有样式的类名
classList.remove(cls)	删除指定类
classList.add(cls)	添加类
classList.contains(cls)	查看是否存在某一类，存在就返回true，否则返回false
classList.toggle(cls)	查看是否存在某一类，存在就删除，否则就添加
dom.style.xxx="n"	将dom节点css的xxx属性的属性值改成n

DOM事件：使 JavaScript 有能力对 HTML 事件做出反应。

常用事件	描述
onclick	当用户点击某个对象时调用的事件句柄
ondblclick	当用户双击某个对象时调用的事件句柄
onfocus	元素获取焦点
onblur	元素失去焦点
onchange	域的内容被改变
onkeydown	某个键盘按键被按下
onkeypress	某个键盘按键被按下并松开
onkeyup	某个键盘按键被松开
onload	一张页面或一幅图像完成加载
onmousedown	鼠标按钮被按下
onmousemove	鼠标被移动
onmouseout	鼠标从某元素移开
onmouseover	鼠标移到某元素上
onselect	在文本框中的文本被选中时发生
onsubmit	确认按钮被点击，使用对象是form

标签绑定DOM事件：绑定事件有两种方法：通过标签绑定，通过js绑定标签

通过标签绑定

<!--通过标签绑定-->
<button id="b1" onclick="change();">点击</button>
<script>
    function change(){
        /*你想执行的js语句*/
    }
</script> 

通过js绑定标签

<!--通过js绑定标签（html文档）-->
<button id="b2" onclick="change();">点击</button>

/*通过js绑定标签（js文档）*/
var b2Ele=document.getElementById("b2");
b2Ele.onclick=function(){
    /*你想执行的js语句*/
}

以上就是我对BOM与DOM记录下的笔记（或许不是很全面）。如果有理解错的地方，还希望多多指教。