DOM操作-获取节点-创建节点

DOM概述

DHTML=HTML+CSS+JS
HTML、XHTML、DHTML、XML

DHTML对象模型：

window：当前浏览器打开的窗口
document：当前正在打开的HTML文档
navigator：封装了浏览器软件的版本信息以及部分设置
history：封装了当前窗口成功浏览过的历史记录
location：当前窗口地址栏
screen：当前显示器
event：事件对象

BOM和DOM

BOM：浏览器对象模型，用来访问和操作浏览器窗口
DOM：文档对象模型，由W3C组织定义访问和操作的标准：可以对网页中任意对象做修改
核心DOM：操作所有结构文档（HTML XML）的通用API
HTML DOM：网页中一切对象（元素，文字，属性）
在内存中父子相连形成一颗DOM树
XML DOM

DOM操作： 增加节点、删除节点、修改节点、查找节点

DOM树：文档中每个元素、属性、文本、注释都是被看做一个节点-Node-所有节点对象的父类型
当网页被加载进内存时浏览器，浏览器会为网页创建一个document对象
所有的节点都是document的子节点
document对象封装了对网页中所有子节点的增加、删除、查找
整个文档就是一个文档节点 document node
每个html标签就是一个元素节点 element node
包含在html中的文本就是文本节点 text node
每个html属性就是一个属性节点 attribute node
注释属于注释节点 comment node

Node类型定义了三个公共属性

nodeName:用来获取元素节点的大写标签名称,如果是文本节点 返回#text
nodeValue：用来获取文本节点的文本内容
元素节点 返回的是 null
文本节点返回的才是 文本内容
nodeType:用来判断到底是什么节点
元素节点返回1
文本节点返回3

childNodes:获取当前节点的所有子节点，类数组对象
节点树： 元素树
.childNodes 获取当前元素点的所有子节点 .children
.firstChild 获取当前元素的第一个子节点 .firstElementChild
.lastChild 获取当前元素的最后一个子节点 .lastElementChild
.parentNode 获取当前节点的父节点 .parentElement
.previousSibling 获取当前节点的前一个同级节点 .previousElementSibling
.nextSibling 获取当前节点的后一个同级节点 .nextElementSibling

元素树：仅由元素组成的树
获取节点方法

点击  onclick
双击 ondblclick
划入 onmouseover
划出 onmouseout
移动 onmousemove
获得焦点 onfocus
失去焦点 onblur
鼠标按下 onmousedown
鼠标抬起 onmouseup

创建删除节点：

1、创建一个空元素对象
var newelemt =document.createElement(“标签名”)；
2、设置必要属性
newelemt.属性名 = “值”
newelemt.innerHTML = “文本”；
3、把元素对象挂载到指定父元素下
parent.appendChild(newelemt)
插入：parent.insertBefore(新元素，旧元素)；
删除：parent.removeChild(要删除的元素)；
替换：parent.replaceChild(新元素，旧元素)；

定时器：不需要用户触发可自动执行的一种机制

1、周期性定时器：按照固定时间间隔反复执行相同操作

1、定义任务函数
2、创建变量保存定时器
3、启动定时器
停止定时器clearInterval(timer)

2、一次性定时器：等待一定时间执行一次，自动退出