本文共 4323 字，大约阅读时间需要 14 分钟。

BOM

BOM: browser object model 浏览器对象模型。允许JS和浏览器“对话”。

window object窗口对象，代表浏览器窗口。 所有浏览器都支持窗口对象。JS中的全局对象，函数，变量都是窗口对象的成员。具体来说，全局变量是窗口对象的属性；全局函数是窗口对象的方法；即便是文档对象，也是窗口对象的一个属性，下面二者是相等的：

window.document.getElementById("header");document.getElementById("header");

window对象的方法

alert() 显示带有一段消息和一个确认按钮的警告框。

confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。返回true/false prompt() 显示可提示用户输入的对话框。 例如： var ret = prompt(“please enter a num”) //接收用户输入并赋值给ret

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

close() 关闭浏览器窗口。 setInterval() 按照指定的周期（以毫秒计 1000=1s）来调用函数或计算表达式。 clearInterval() 取消由 setInterval() 设置的 timeout，需要传入setInterval()的返回值。 setTimeout() 在指定的毫秒数后调用函数或计算表达式。 clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 scrollTo() 把内容滚动到指定的坐标。 window对象是全局的，以上方法不需要加window前缀就可以直接调用。 下面我们看一下setInterval()和clearInterval()的具体应用： 点击start按钮，显示计时，点击stop,暂停计时，实现如下

 //显示效果是通过对value赋值实现的start //onclick触发start()函数执行stop  //onclick触发stop()函数执行

DOM

document object model 文档对象模型。

DOM树

浏览器为加载的HTML创建一个文档对象模型，所有的对象/元素按树形结构组织起来。

DOM树展示文档中各个对象/元素的关系，方便我们查找元素，操作元素。

DOM节点：

节点类型

HTML中的每一个成分都是一个节点：

整个文档是一个document节点； 每个元素/标签是一个element节点； 每个属性是一个attribute节点； 每个元素中的文本是一个text节点。 这里，我们关注document节点和element节点。

节点关系

这里通过节点树展示节点间的关系：

查找节点的方法

• document.getElementById(“idname”)
• document.getElementsByTagName(“tagname”)
• document.getElementsByName(“name”)，比如表单对象中的元素，有name属性。
• document.getElementsByClassName(“name”)
  注意，由于id具有唯一性，因此，除了通过id查找，其余方法查找的结果是节点的集合，需要通过索引来定位，哪怕只有集合中只有一个元素。比如：

var ele = document.getElementByTagName("input")[0]

查找关联节点

• parentElement // 父节点标签元素
• children // 所有子标签
• firstElementChild // 第一个子标签元素
• lastElementChild // 最后一个子标签元素
• nextElementSibling // 下一个兄弟标签元素
• previousElementSibling // 上一个兄弟标签元素
  注意，以上都是节点的属性，因此，使用时后面不能加括号。
  另外，JS没有办法通过一个属性来找到所有的sibling。解决方案：先找到父标签，然后找到父标签下面的子标签。

节点操作

创建节点

var ele = document.createElement("input"); //创建节点 ele.setAttribute("type","text");  //为节点增加属性

添加节点

注意，添加节点需要通过父节点来操作，所以要查找父节点

var parEle = document.getElementsById("par"); //查找父节点 parEle.appendChild(ele); //通过父节点添加创建的子节点（添加到最后） // 或者把创建的节点添加到某个节点的前面 parEle.insertBefore(ele,someNode);

删除节点

删除节点需要通过父节点来操作：

parEle.removeChild(ele);

修改/替换节点

需要通过父节点来操作：

parEle.replaceChild(new, old);

节点属性操作

Attribute

ele.getAttribute("attr_name");      ele.setAttribute("attr_name","value");    ele.removeAttribute("attr_name");

文本属性

获取文本节点的值：innerText, innerHTML

赋值： innerText：纯文本 ele.innerText = "<p>hello</p>"只能赋值为纯文本p标签会被当作文本对待。 innerHTML：超文本。通过它可以给节点添加HTML代码。 ele.innerHTML = "<p>hello</p>"，赋值超文本，添加了p标签和文本hello

表单类节点

对于表单类节点，比如<input>, <select>,<textarea>等，选择了节点后，通过点.value可以获取用户的输入值。

class操作

ele.className;   //获取节点的所有class名称ele.classList.add("class_name"); //为节点添加classele.classList.remove("class_name"); //为节点删除class

CSS操作

ele.style.property=value

ele.style.color="yellow";//等价于ele.setAttribute("attr_name","value");

DOM事件

事件类型

• onclick //点击某个元素时执行JS代码；
• ondblclick //双击某个元素时执行JS代码；
• onfocus //元素获得焦点时执行JS代码；常用于这些元素<input>, <select>, and<a>；与onfocus相反的是onblur;
• on blur //元素失去焦点时；应用场景：表单验证，用户离开输入框后，代表输入完成，可以进行验证
• onchange //当元素的值改变时；常用于<select>, radiobutton, checkbox;
• onkeydown //当用户正在按下键盘按键时；
• onkeypress //当用户按键盘按键时；该事件并不是对所有浏览器的所有按键都生效（比如：ALT, CTRL, SHIFT, ESC）；想检测用户是否按下了键盘按键，可以用onkeydown，它对所有的按键都有效；
• onkeyup //当用户释放键盘按键时；
• onload //当一个对象加载完成后，主要是用在body元素；
• onmousedown //当用户在一个上按下鼠标按键时；顺序：onmousedown–>onmouseup–>onclick(鼠标左键或中建）/oncontextmenu（鼠标右键）
• onmousemove //当鼠标光标在一个元素上移动时；
• onmouseout //当鼠标从一个元素或其子元素离开时；
• onmouseover //当鼠标移至一个元素或其子元素时；
• onmouseleave //当鼠标光标离开一个元素时； The onmouseleave event is similar to the onmouseout event. The only difference is that the onmouseleave event does not bubble (does not propagate up the document hierarchy)，比起onmouseout，这个事件仅限于元素本身，子元素不会触发事件。
• onmouseenter //当鼠标光标移至一个元素时；
• onselect //当元素中的文本被选中时；
• onsubmit // 当提交表单时；

事件类型示例

onkeydown 如何获取按键信息

说明：

1. 所有事件的监听是由操作系统完成的，然后把相关信息封装到event对象。event对象保存事件触发状态信息。 2. e=e||window.event; //通过e或全局的window.event对象拿，为了作浏览器兼容 3. e.keyCode //获取按键的asc码 4. String.fromCharCode(num) ==>数字转化为对应asc字符

事件传播

父元素绑定的事件，会传播给子元素。即子元素如果也绑定了事件，那么子元素的事件执行后，还会执行父元素的事件。

解决方案：在子元素中阻止触发父元素事件

事件绑定方式

方式一

click

将事件直接绑定在HTML代码元素的属性中，造成代码耦合，可读性差。

方式二

click

在JS代码中查找节点，然后对节点绑定事件。推荐这种方式，降低代码耦合，灵活性更高。

this关键字

在DOM事件处理中，当一个函数用作事件处理时，this就是触发事件的元素。

在行内事件处理中，this就是DOM元素

var eles.document.getElementsByClassName("titile"); //假如我们选择了一组节点eles.onclick = function(){
    //点击其中一个节点，对触发事件的结点应用CSS     this.style.color="green";     //this指点击（触发事件）时的元素。}