JavaScript高级
BOM浏览器对象模型
- 概念：Browser Object Model 浏览器对象模型：
将浏览器的各个组成部分封装成对象。
- 组成：
-
Window：窗口对象 -
Navigator：浏览器对象 -
Screen：显示器屏幕对象 -
History：历史记录对象 -
Location：地址栏对象
-
1.Window：窗口对象
1.创建
- Window对象不需要创建可以直接使用 window使用。
window.方法名(); - window引用可以省略。
方法名();
2.方法
- 与弹出框有关的方法：
-
alert(): 显示带有一段消息和一个确认按钮的警告框。 -
confirm():显示带有一段消息以及确认按钮和取消按钮的对话框。- 如果用户点击确定按钮，则方法返回true
- 如果用户点击取消按钮，则方法返回false
-
prompt():显示可提示用户输入的对话框。- 返回值：获取用户输入的值
-
- 与打开关闭有关的方法：
-
close():关闭浏览器窗口。- 谁调用我 ，我关谁
-
open():打开一个新的浏览器窗口- 返回新的Window对象
-
-
与定时器有关的方式
-
setTimeout(代码或者方法, 毫秒值)在指定的毫秒数后调用函数或计算表达式。- 参数：js代码或者方法对象， 毫秒值
- 返回值：唯一标识，用于取消定时器
-
clearTimeout(定时器唯一标识):取消由setTimeout()方法设置的 timeout。 -
setInterval(): 按照指定的周期（以毫秒计）来调用函数或计算表达式。 -
clearInterval():取消由 setInterval() 设置的 timeout。
-
function func() { console.log("我来啦！") }
var t = setInterval(func, 1000);
function clo() { clearInterval(t) }
setTimeout(clo, 5000);
3.属性：
- 获取其他BOM对象：
historylocationNavigatorScreen
- 获取DOM对象
document
2.Location：地址栏对象
-
创建(获取)：
window.locationlocation
-
方法：
-
location.reload():重新加载当前文档。刷新
-
-
属性
-
href:设置或返回完整的URL。
-
3.History：历史记录对象
-
创建(获取)：
window.historyhistory
-
方法：
-
history.back():加载history列表中的前一个 URL。 -
history.forward():加载 history 列表中的下一个 URL。 -
history.go(参数):加载 history 列表中的某个具体页面。参数如下- 正数：前进几个历史记录
- 负数：后退几个历史记录
-
-
属性：
-
history.length：返回当前窗口历史列表中的 URL 数量。
-
二、DOM文档对象模型
概念：Document Object Model文档对象模型,将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作
W3C DOM标准被分为 3 个不同的部分：
-
核心DOM :针对任何结构化文档的标准模型
-
Document：文档对象 -
Element：元素对象 -
Attribute：属性对象 -
Text：文本对象 -
Comment:注释对象 -
Node：节点对象，其他5个的父对象
-
- XML DOM: 针对 XML 文档的标准模型
- HTML DOM: 针对 HTML 文档的标准模型
1.核心DOM模型
a.Document：文档对象
创建(获取)：在html dom模型中可以使用window对象来获取
- window.document
- document (推荐方式)
方法
- 获取Element对象：(省略
document.)-
getElementById()： 根据id属性值获取元素对象。id属性值一般唯一 -
getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组 -
getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组 -
getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
-
- 创建其他DOM对象：
createAttribute(name)createComment()createElement()createTextNode()
- 属性
b.Element：元素对象
- 获取/创建：通过document来获取和创建
- 方法：
-
removeAttribute()：删除属性 -
setAttribute()：设置属性
-
c.Node：节点对象，其他5个的父对象
- 特点：所有dom对象都可以被认为是一个节点
- 方法：
- CRUD dom树：
-
appendChild()：向节点的子节点列表的结尾添加新的子节点。 -
removeChild()：删除（并返回）当前节点的指定子节点。 -
replaceChild()：用新节点替换一个子节点。
-
- CRUD dom树：
- 属性：
-
parentNode:返回节点的父节点。
-
2.HTML DOM
- 标签体的设置和获取：innerHTML
- 使用html元素对象的属性
- 控制元素样式
- 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
- 使用元素的style属性来设置如：
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";
三、事件监听
概念：某些组件被执行了某些操作后，触发某些代码的执行。
- 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
- 事件源：组件。如： 按钮 文本输入框...
- 监听器：代码。
- 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。
1.常见的事件
-
点击事件：
-
onclick：单击事件 -
ondblclick：双击事件
-
-
焦点事件
-
onblur：失去焦点 -
onfocus:元素获得焦点。
-
-
加载事件：
-
onload：一张页面或一幅图像完成加载。
-
-
鼠标事件：
-
onmousedown鼠标按钮被按下。 -
onmouseup鼠标按键被松开。 -
onmousemove鼠标被移动。 -
onmouseover鼠标移到某元素之上。 -
onmouseout鼠标从某元素移开。
-
-
键盘事件：
-
onkeydown某个键盘按键被按下。 -
onkeyup某个键盘按键被松开。 -
onkeypress某个键盘按键被按下并松开。
-
-
选择和改变
-
onchange域的内容被改变。 -
onselect文本被选中。
-
-
表单事件：
-
onsubmit确认按钮被点击。 -
onreset重置按钮被点击。
-
取消超链接的方式
<a href="javascript:void(0);">点击我不会跳转</a>
2.绑定事件的方式
- 直接在html标签上，指定事件的属性操作，属性值就是js代码，常见的时间如下
-
onclick:鼠标点击事件
-
<p onclick="func1()">盖伦</p>
...
function func1() {
console.log("德玛西亚收到攻击 -70");
}
- 通过js获取元素对象，指定事件属性设置一个函数
<p id="ruiwen">瑞文</p>
...
function func2() {
console.log("-100")
ruiwen.innerText = "瑞文正受到攻击...."
}
var ruiwen = document.getElementById("ruiwen");
ruiwen.onclick = func2; // 加了括号就立即执行了！
