DOM:文档对象模型,将标记语言文档的各个元素封装为一个对象,通过树结点的方式控制html文档内容
在 HTML DOM (Document Object Model) 中 , 每一个元素都是 节点:
- 文档是一个文档节点。
- 所有的HTML元素都是元素节点。
- 所有 HTML 属性都是属性节点。
- 文本插入到 HTML 元素是文本节点。are text nodes。
- 注释是注释节点。
可以通过获取的变量修改属性。(查看API文档,查找属性)
Document:文档对象
Element:元素对象
Arrtribute:属性对象
Text:文本对象
Comment:注释对象
Node:节点对象,其他5个的父对象
核心DOM模型:
Document对象: windows.document为当前对象
Element元素对象
获取Element:
getElementByID():通过元素的id获取元素对象
getElementsByTagName():根据元素名称获取元素对象,返回一个数组
getElementesByClassName():根据class属性值获取元素对象,返回一个数组
getElementsByName():根据name属性值获取元素对象,返回一个数组
创建Element:createElement()
设置Element:setArribute("属性","值")
删除Element:removeArrbute(“属性”)
Node节点对象
所有dom对象都可以被认为是一个节点
添加:appendChild()
删除:removeChild()删除(并返回)当前节点的指定子节点
超链接两个功能:可以被点击,跳转url。如果禁用跳转功能,url="javascript:void(0)"
改:replaceChild():用新节点替换一个子节点
parentNode:获取父节点
HTML DOM:
innerHtml:获取元素内容
=更改元素,+=追加内容
控制元素样式:
(1)元素.style.属性=“”
font-size--->fontSize
(2)提前css写类选择器,js元素.className=""
事件:执行操作,触发代码执行。
οnclick="fun";可以通过js获取元素操作
案例:电灯开关
BOM:浏览器对象模型
将浏览器组成部分封装为对象
组成:浏览器对象(Navigator),浏览器窗口对象(window),地址栏对象(Location)历史记录对象(History),显示器屏幕对象(screen)
window对象
*不需要创建,直接使用window使用
*window引用可以省略,方法名();
弹出方法:
alert | 弹出警告框 |
confirm | 确认取消对话框,确定返回true 否则返回false |
prompt | 输入框,返回用户输入的值 |
打开关闭方法:
close | 关闭浏览器窗口 |
open | 打开一个新的浏览器窗口 |
定时器方法:
setTimeOut(fun,ms) | 指定毫秒后调用函数或计算表达式,返回唯一标识id |
clearTimeout(id) | 取消由setTimeout()方法设置的timeout |
setInterval(fun ,ms) | 按照指定的周期(毫秒)来调用函数或计算表达式 |
案例:轮播图
window属性:
获取其他bom对象:history,location,navigator,screen
var h=history;
获取dom对象
var w=document;
location对象
包含url信息
reload():刷新
href:获取/修改ur
案例:自动跳转首页
history对象
包含当前用户访问过的url
获取:(window.)histoty
length:返回当前窗口历史记录url个数
back:后退
forward:前进
go(参数):加载history列表中的某个具体页面,正数前进几个历史记录