javaScript WebAPI

DOM简介

文档对象模型(Document Object Model,简称DOM)，是W3C组织推荐的处理可扩展标记语言的标准接口。

DOM树

文档：一个页面就是一个文档，DOM中使用document表示。

元素：页面中的所有标签都是元素，DOM中使用element表示。

节点：网页中的所有内容都是节点，DOM中使用node表示。

获取元素

获取页面中的元素可以使用以下几种方式：

1.根据ID获取

getElementById();

console.dir() //打印我们返回的元素对象，更好的查看里面的属性和方法。

2.根据标签名获取

getElementsByTagName():可以返回带有指定标签名的对象的集合。

element.getElementByTagName('标签名')：

3.通过HTML5新增方法获取

document.getElementsByClassName() 根据类名获得元素集合 。

document.querySelector('选择器');根据指定选择器返回第一个元素对象

document.querySelectorAll():返回所有。

特殊元素获取

事件基础

javaScript使我们有能力创建动态页面，而事件是可以被javascript侦测的行为。

简单理解：触发---响应机制。

事件是由三部门组成：事件源 事件类型 事件处理程序。

事件源：事件被触发的对象  谁 按钮

事件类型：如何触发 什么事件 比如鼠标点击 还是鼠标经过 还键盘按下

事件处理程序 通过一个函数赋值的方式完成

<button id ='btn'></button>
var btn = document.getElementById('btn');
btn.onclick = function(){
    alert('唐伯虎点秋香');
}

操作元素

改变元素内容：

element.innerText:从起始位置到终止位置的内容，但它除去html标签，同时空格和换行也会去掉。

element.innerHTML：从起始位置到终止位置的全部内容，包括HTML标签，同时保留空格跟换行。