普歌-智音团队-JavaScript 之Dom简介

普歌-智音团队-JavaScript 之Dom简介

什么是 DOM

文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML
或者XML）的标准编程接口。
W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

获取元素

1. 根据 ID 获取

使用 getElementById() 方法可以获取带有 ID 的元素对象。

		var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        console.dir(timer);

2. 根据标签名获取

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

		var ol = document.getElementById('ol');
        console.log(ol.getElementsByTagName('li'));

注意：

1. 因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
2. 得到元素对象是动态的
3. 如果获取不到元素,则返回为空的伪数组(因为获取不到对象)

3. 通过 HTML5 新增的方法获取

		// 1. getElementsByClassName 根据类名获得某些元素集合
        var boxs = document.getElementsByClassName('box');
        console.log(boxs);
        // 2. querySelector 返回指定选择器的第一个元素对象  切记 里面的选择器需要加符号 .box  #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        // 3. querySelectorAll()返回指定选择器的所有元素对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);

注意：
querySelector 和 querySelectorAll里面的选择器需要加符号,比如:document.querySelector(’#nav’);

4. 特殊元素获取

 		// 1.获取body 元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // 2.获取html 元素
        // var htmlEle = document.html;
        var htmlEle = document.documentElement;
        console.log(htmlEle);

事件基础

事件三要素

1. 事件源 （谁）
2. 事件类型 （什么事件）
3. 事件处理程序 （做啥）

案例：点击按钮弹出警示框中写“hello，JavaScript！”

效果

实现代码

        var btn = document.getElementById('btn');
        btn.onclick = function() {
            alert('hello，JavaScript！');
        }

常见的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

相关文章推荐：

《普歌-智音团队-JavaScript——BOM》

《普歌-智音团队-JavaScript——tab栏切换》

《普歌-智音团队-JavaScript 之排他操作及案例》
——————————————————————————

作者：yuan-元-

出处/源自：yuan-元-的《普歌-智音团队-JavaScript 之Dom简介》

本文版权归作者和CSDN共有，欢迎转载，且在文章页面明显位置给出原文链接，未经作者同意必须保留此段声明，否则保留追究法律责任的权利。