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、一次性定时器:等待一定时间执行一次,自动退出

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值