js(二)之DOM

DOM简介

DOM(Document Object Model)，全名文档对象模型，通过DOM对html文档进行操作。
每个html的标签就是一个对象，通过操控对象来改变页面上的值。

节点简介

节点是组成html文档最基本的单元，常用的节点分为4类：

• 文档节点：整个html文档。
• 元素节点：html文档中的html标签。
• 属性节点：元素的属性。
• 文本节点：html标签中文本的内容。

节点属性

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文档节点	#text	3	文本内容

节点的获取

获取元素子节点

• 元素对象.getElementById()：通过id获取一个元素节点对象。
• 元素对象.getElementsByTag()：通过标签名获取一组元素节点对象。返回list
• 元素对象.getElementsByName()：通过name获取一组节点对象。返回list
• 元素对象.childNodes：包括文本节点在内的所有节点，注意标签间的空白也会当成文本节点。
• 元素对象.firstChild：表示当前节点的第一个子节点。
• • 元素对象.lastChild：表示当前节点的最后一个子节点。

获取元素兄弟节点

• parentNode：表示当前节点的父节点。
• previousSibling：表示当前节点的前一个兄弟节点。
• nextSibling：表示当前节点的前一个兄弟节点。

使用css选择器定位节点

单体定位，返回元素对象：

var ele=document.querySelector("css选择器")

例子

var div=document.querySelector(".box div")

群体定位，返回元素对象的数组：

var eles=document.querySelectorAll("css选择器")

例子

var divs=document.querySelectorAll(".box")

节点的操作

获取节点文本

var str=元素对象.innerHTML;//获取节点文本信息，包括标签。

var str=元素对象.innerText;//获取节点文本信息。

获取节点属性

var str=元素对象.value;//获取节点value属性信息。

var str=元素对象.className;//获取节点class属性信息。

节点的增删改

创建节点

document.creatAttribute();//创建属性节点
document.creatElement();//创建标签节点
document.creatTextNode();//创建文本节点

例子：

创建<li>广州<li>标签

var li=document.creatElement("li");
var text=document.creatTextNode("广州");
var node=li.appendChild(text)

增加节点

父节点.appendChild(子节点);//将子节点append到父节点中去
父节点.insertChild(新节点,旧节点);//在子节点前面插入子节点

修改节点

父节点.replaceChild(新节点,旧节点);//修改节点

修改文本节点

父节点.innerHTML="新的值";//修改文本节点

删除节点

父节点.removeChild(子节点);//删除节点

DOM修改css样式

修改内联样式

var li=document.creatElement("li");//获取节点
li.style.backgroundColor="yellow"
li.style.width="300px"

获取元素样式

var li=document.creatElement("li");//获取节点
getComputedStyle(li,null)

事件对象

https://www.cnblogs.com/websmile/p/8807334.html
事件就是文档或浏览器窗口中发生一些特定交互瞬间。js与html之间的交互是通过事件实现的。
事件类型：
点击这里
例子：

var btn=document.getElementById("bnt")
bnt.onclick=function(event){
	alter("来");
}

event属性

事件冒泡

所谓事件冒泡，就是向上传导，后代元素事件被触发时，祖先元素相同事件也会被触发。
例子：
现有3个div

<div id="box1">
	<div id="box2">
		<div id="box3"></div>
	</div>
</div>

假如这3个div同时绑定单击事件对象，触发box3的单击事件，那么box2，box1也同时触发单击事件。

取消冒泡

event.cancelBubble();

定时器与延迟器

定时器

setInterval(function(){},time);

延时器

setTimeout(function(){},time);