DOM是什么?
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。
W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、结构和样式。
DOM树
文档:一个页面就是一个文档,DOM中使用document表示
元素:页面中的所有标签都是元素,DOM中使用element表示
节点:网页中的所有内容都是节点(标签、属性、文本、注释等),DOM中使用node表示
DOM把以上内容都看作对象。
如何获取元素?
1.根据ID获取
使用getElementById() 方法获取带有ID的元素对象。
// get 获得 element 元素 by 通过 驼峰命名法
// 参数 id 是大小写敏感的字符串
// 返回的是一个元素对象
var timer = document.getElementById('time');
2.根据标签名获取
使用getElementByTagName()方法可以返回带有指定标签名的对象的集合。
// 返回的是获取过来元素对象的集合,以伪数组的形式存储的
var divs = document.getElementsByTagName('div');
3.通过HTML5新增的方法获取
使用document.getElementByClassName(‘类名’); // 根据类名返回元素对象合集。
// 1、getElementsByClssName 根据类名获取某些元素集合
var boxs = document.getElementsByClassName('box');
使用document.querySelector(‘选择器’); // 根据指定选择器返回第一个元素对象
// 2、querySelector 返回指定选择器的第一个元素对象
var firstBox = document.querySelector('.box');
var nav = document.querySelector('#nav');
var nav = document.querySelector('li');
使用document.querySelectorAll(‘选择器’); // 根据指定选择器返回所有对象
// 3、querySelectorAll() 返回指定选择器的所有元素集合
var allbox = document.querySelectorAll('.box');
4.特殊元素获取
如:body,html
// 1、获取body元素
var body = document.body;
// 2、获取html
var htmlEle = document.documentElement;
事件基础
行为
触发---响应机制
事件由三部分组成
事件源 事件类型 事件处理程序
// (1)事件源
var btn = document.getElementById('btn');
// (2)事件类型 什么事件,比如鼠标点击(onclick)、鼠标经过等
// (3)事件处理程序 通过一个函数赋值的方式完成
btn.onclick = function() {
alert('点秋香');
}
执行事件的步骤
- 获取事件源
- 注册事件(绑定事件)
- 添加事件处理程序(采用函数赋值形式)
常见的鼠标事件
// onclick 鼠标点击左键触发
// onmouseover 鼠标经过触发
// onmouseout 鼠标离开触发
// onfocus 获得鼠标焦点触发
// onblur 失去鼠标焦点触发
// onmousemove 鼠标移动触发
// onmouseup 鼠标弹起触发
// onmousedown 鼠标按下触发
操作元素
内容、属性修改
1.改变元素内容
第一个: element.innerText
从起始位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉
// 1、获取元素
var btn = document.querySelector('button');
var div = document.querySelector('div');
// 2、注册事件
// document.onclick
btn.onclick = function() {
div.innerText = '2019-6-6';
}
第二个: element.innerHTML
起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行
var div = document.querySelector('div');
div.innerHTML = '<strong>今天是:</strong> 2019';
2.常见的属性操作
如:src title
// 1、获取元素
var yuto = document.getElementById('yuto');
var jianzhu = document.getElementById('jianzhu');
var img = document.querySelector('img');
// 2、注册事件 处理程序
yuto.onclick = function() {
img.src = 'image/1.jpg';
img.title = '芋头';
}
3.表单元素的属性操作
如:type\value\checked\selected\disabled
var btn = document.querySelector('button');
var input = document.querySelector('input');
btn.onclick = function() {
input.value = '你点击了';
// btn.disabled = true;
this.disabled = true;
// this 指向的是事件函数的调用者
}
4.样式属性操作
通过js修改元素的大小、颜色、位置等样式
- element.style 行内样式操作
- element.className 类名样式操作
var div = document.querySelector('div');
div.onclick = function() {
this.style.backgroundColor = 'purple';
this.style.width = '600px'
}
注意
- JS里面的样式采取驼峰命名法,比如fontSize、backgroundColor
- JS修改style样式操作,产生的是行内样式,CSS权重比较高