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标签,同时保留空格跟换行。