JS 特效--DOM和事件

DOM

文档对象模型，DOM又被称为文档树模型。它是一种与语言和平台无关的应用程序接口，它可以动态地访问程序和脚本，更新其内容、结构和文档的风格。

window

• 所有的浏览器都支持window对象，它支持浏览器窗口。
• 所有的js全局对象，函数以及变量都能自动成为window对象的成员。
• 全局变量是window对象的属性，全局函数是window对象的方法。

document

• document也是window对象的属性之一
• document对象是documentHTML的一个实例，也是window对象的一个属性，因此可以将document对象作为一个全局对象来访问
• 常用属性
• Console.log(document)
• Console.log(document.childNodes)
• Console.log(document.head)
• Console.log(document.body)
• document.title = “abc” //修改文档标题
• Console.log(document.title)

事件

触发-响应机制
用户和浏览器之间的交互行为，例如：点击，移出，移入······

三要素

• 事件源：（被）触发事件的元素
• 事件名称：click 点击事件
• 事件处理程序：事件触发后要执行的代码（函数形式）

使用方式：可以在事件对应的属性中实现一些JS代码，当事件被触发时，代 码执行。

文档页面元素获取

• 根据id获取元素
• 根据标签名获取元素
• 根据name获取元素
• 根据类名获取元素
• 根据选择器获取元素

节点之间关系

• 获取父节点：

var a = document.getElementById('a');
console.log(a.parentNode);			//获取到a标签的父节点。

• 获取兄弟节点

var a = document.getElementById('a');
console.log(a.nextElementSibling);			//获取到a标签的下一个兄弟节点。
console.log(a.previousElementSibling);		//获取到a标签的上一个兄弟节点。

需要注意的是如果用a.nextSibling会获取到换行符或者空格，在控制台中以text形式出现

• 获取子节点

a.firstElementChild			//获取第一个子节点
a.lastElementChild			//获取最后一个子节点
a.childNodes				//获取所有的节点
a.children					//获取所有的元素节点

节点操作

• 创建 节点

var img = document.creatElement('img');
img.src = 'img/img_.jpg';
box.appendChild(img);		//创建一个img标签            

• 删除节点

var btn = document.getElementsByTagname('button')[0];
btn.remove();		//直接删除
box.removeChild(btn);			//通过父元素删除

• 克隆标签

var box = document.getElementsByClassName('box')[0];
var newBox = box.cloneNode();		//浅克隆，仅仅当前元素
var newBox = box.cloneNode(true);		//深克隆，克隆当前元素内部所有的子节点 

节点属性操作

不但可以设置标签原有的属性，也可以动态地绑定一些我们想绑定的任何属性。

• 设置属性

var img = document.getElementsByTagName('img')[0];		//获取节点
console.log(img.getAttribute('src'));		//获取img标签中的src属性
img.setAttribute('src','img/img.jpg');		//设置img标签的src属性 

• 删除属性

img.removeAttribute('src')		//删除img标签中的src属性