JavaScript学习 - Day02 - DOM，事件，BOM

3. DOM

3.1 什么是DOM

DOM，全称Document Object Model文档对象模型。

JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

文档

文档表示的就是整个的HTML网页文档

对象

对象表示将网页中的每一个部分都转换为了一个对象。

模型

使用模型来表示对象之间的关系，这样方便我们获取对象。

3.2 节点

常用节点分为四类

文档节点 ：整个 HTML 文档

元素节点 ： HTML 文档中的 HTML 标签

属性节点 ：元素的属性

文本节点 ： HTML 标签中的文本内容

 

document.getElementById()

根据id属性值获取一个元素节点对象。

元素节点.firstChild;

获取元素节点的第一个子节点，一般为文本节点

元素节点.getAttributeNode("属性名");

可以通过元素节点来获取指定的属性节点

3.3 获取元素节点

3.3.1 通过document对象调用

getElementById()

– 通过 id 属性获取 一个 元素节点对象

getElementsByTagName()

– 通过 标签名 获取 一组 元素节点对象

getElementsByName()

– 通过 name 属性获取 一组 元素节点对象

 3.4 获取元素节点的子节点

通过具体的元素节点调用

getElementsByTagName()

– 方法 ，返回当前节点的指定标签名后代节点

childNodes

– 属性 ，表示当前节点的所有子节点

firstChild

– 属性 ，表示当前节点的第一个子节点

lastChild

– 属性 ，表示当前节点的最后一个子节点

3.5 获取父节点和兄弟节点

通过具体的节点调用

parentNode

– 属性 ，表示当前节点的父节点

previousSibling

– 属性 ，表示当前节点的前一个兄弟节点

nextSibling

– 属性 ，表示当前节点的后一个兄弟节点

3.6 元素节点的属性

 

 

其他属性

 

3.7 使用CSS选择器进行查询

3.8 节点的修改

 

4. 事件

4.1 通过HTML标签的属性设置事件

<button οnclick= "alert('hello');alert('world')"> 按钮 </button>

设定步骤非常简单，并且能够确保事件处理程序会在载入时被设定。

如果在函数的最后return false则会取消元素的默认行为

4.2 通过DOM对象的属性绑定

var btn = document.getElementById('btn');

btn.onclick = function(){

        alert("hello");

};        

这种写法将HTML代码和JS写在不同的位置，维护 起来更加容易

 

4.3 设置事件监听器

btn. addEventListener ('click' , function(){alert("hello");});

 removeEventListener() 和 detachEvent()移除事件

 

4.4 事件对象

DOM标准的浏览器会将一个event对象传入到事件的处理程序

当中。无论事件处理程序是什么都会传入一个event对象。

btn.onclick = function(event){

        alert(event.type);

};

4.5 事件的触发

事件的发生主要是由用户操作引起的。

比如mousemove这个事件就是由于用户移动鼠标引起的，在鼠标指针移动的过程中该事件会持续发生。

当指定事件被触发时，浏览器就会调用对应的函数去响应事件，一般情况下事件没触发一次，函数就会执行一次。

因此设置鼠标移动的事件可能会影响到鼠标的移动速度。 所以设置该类事件时一定要谨慎

 

4.6 事件的传播  （*）

 

 

5. BOM

5.1 什么是BOM

ECMAScript无疑是JavaScript的核心，但是要想在浏 览器中使用JavaScript，那么BOM（浏览器对象模型） 才是真正的核心。

BOM 提供了很多对象，用于访问浏览器的功能，这些 功能与任何网页内容无关。

BOM将浏览器中的各个部分转换成了一个一个的对象，我们通过修改这些对象的属性，调用他们的方法，从而 控制浏览器的各种行为

 

5.2 window对象

5.3 系统对话框

浏览器通过 alert() 、 confirm() 和 prompt() 方法可以调用系统对话框向用户显示消息。

它们的外观由操作系统及（或）浏览器设置决 定，而不是由 CSS 决定。

显示系统对话框时会导致程序终止，当关闭对 话框程序会恢复执行。

 

5.4 Location对象