JavaScript学习(二)

内容预览

1.BOM的概念及简单使用

2.DOM的概念及简单使用

3.事件监听机制的简单了解

一、BOM

BOM的概念及组成

BOM：Browser Object Model 浏览器对象模型

将浏览器的各个组成部分封装成对象。

BOM的组成

Window：窗口对象
Navigator：正在使用的浏览器对象
Screen：显示器屏幕对象
History：历史记录对象
Location：地址栏对象

BOM对象的基本用法

Window窗口对象

常用方法

1.与弹出框有关的方法

alert()：显示带有一段消息和一个确认按钮的警告框。
confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
- 如果用户点击确定按钮，则方法返回true
- 如果用户点击取消按钮，则方法返回false
prompt()：显示可提示用户输入的对话框。
- 返回值：获取用户输入的值

2.与打开关闭有关的方法

close()：关闭浏览器窗口。
- 谁调用我，我关谁
open()：打开一个新的浏览器窗口
- 返回新的Window对象

3.与定时器有关的方法

setTimeout()：在指定的毫秒数后调用函数或计算表达式。简单得说就是几秒之后，你把我交给你得任务执行了。执行一次。
- 参数：
  1. js代码或者方法对象
  2. 毫秒值
- 返回值：唯一标识，用于取消定时器
clearTimeout()：取消由 setTimeout() 方法设置的 timeout。
setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。简单的说就是每几秒执行一次，无限执行。
clearInterval()：取消由 setInterval() 设置的 timeout。

属性

获取其他BOM对象：
- location对象
- history对象
- Navigator对象
- Screen对象
获取DOM对象
- document

特点

Window对象不需要创建可以直接使用 window使用。 window.方法名();
window引用可以省略。方法名();

Location地址栏对象

创建（获取）Location对象
- window.location
- location
方法
- reload()：重新加载当前文档。刷新
属性
- href：设置或返回完整的 URL。

History历史记录对象

创建（获取）History对象
- window.history
- history
方法
- back()：加载 history 列表中的前一个 URL。
- forward()：加载 history 列表中的下一个 URL。
- go(参数)：加载 history 列表中的某个具体页面。
  - 参数：
    1. 正数：前进几个历史记录
    2. 负数：后退几个历史记录
属性
- length 返回当前窗口历史列表中的 URL 数量。

二、DOM

DOM概念

DOM： Document Object Model 文档对象模型。

将整个HTML文档看做一棵DOM树，而HTML文档中的内容就是DOM树上的一个个节点，我们通过操作DOM树的节点就能操作HTML文档的所有内容

DOM 操作

注意：

1、在DOM操作中，‘节点’和‘标签’是不同的概念。

2、节点：包含标签节点、文本节点（空白文本也是一个节点）、注释节点

3、标签：仅包含标签节点。

4、和‘节点’有关的方法通常包含XXXNode()，如childNodes（）

和‘标签’有关的方法通常包含XXXElement(),如firstElementChild()

查找标签的方法

① 在整个文档中查找

功能	API	返回值
根据id值查询	document.getElementById(“id值”)	一个具体的元素节
根据标签名查询	document.getElementsByTagName(“标签名”)	元素节点数组
根据name属性值查询	document.getElementsByName(“name值”)	元素节点数组
根据类名查询	document.getElementsByClassName("类名")	元素节点数组

② 查找子标签

功能	API	返回值
查找子标签	element.children	返回子标签数组
查找第一个子标签	element.firstElementChild 【W3C考虑换行，IE≤8不考虑】	标签对象
查找最后一个子标签	element.lastElementChild 【W3C考虑换行，IE≤8不考虑】	标签对象

③ 查找父标签

功能	API	返回值
查找指定元素节点的父标签	element.parentElement	标签对象

④ 查找兄弟标签

功能	API	返回值
查找前一个兄弟标签	node.previousElementSibling 【W3C考虑换行，IE≤8不考虑】	标签对象
查找后一个兄弟标签	node.nextElementSibling 【W3C考虑换行，IE≤8不考虑】	标签对象

⑤ 根据选择器查找

功能	API	返回值
根据选择器查找一个标签	document.querySelector("选择器")	标签对象
根据选择器查找多个标签	document.querySelectorAll("选择器")	标签数组

选择器的表达式可以查看jQuery的API。
常用选择器

操作属性

需求	操作方式
读取属性值	标签对象.属性名
修改属性值	标签对象.属性名=新的属性值

自定义属性操作

API	功能
setAttribute()	设置 DOM 的的属性值
getAttribute()	得到 DOM 的属性值
removeAttribute()	移除属性

//1.设置 input 元素的 type 属性：
document.getElementsByTagName("INPUT")[0].setAttribute("type","button");

//2.获得链接的 target 属性：
document.getElementsByTagName("a")[0].getAttribute("target");
//结果：_blank

//删除 h1 元素的 style 属性：
document.getElementsByTagName("H1")[0].removeAttribute("style");

操作标签体

需求	操作方式
获取或者设置标签体的文本内容	element.innerText
获取或者设置标签体的内容	element.innerHTML

// 获取标签体内容
var test = element.innerHTML；
// 设置标签体内容
element.innerHTML = '<h1> 设置标签体内容 >';

DOM增删改操作

API	功能
document.createElement(“标签名”)	创建元素节点并返回，但不会自动添加到文档中
document.createTextNode(“文本值”)	创建文本节点并返回，但不会自动添加到文档中
element.appendChild(ele)	将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle)	将newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle)	用新节点替换原有的旧子节点
element.remove()	删除某个标签

事件操作

事件监听机制

概念：当事件源 (组件) 上发生了某个事件，则触发执行某个监听器代码。比如，在 “确定” 按钮上发生了“单击事件”，便触发了表单提交的相关代码。

事件源：组件。如：按钮、文本输入框...
事件类型：某些操作。如：单击，双击，键盘按下了，鼠标移动了...
事件触发后要执行的函数（监听器）：代码。
注册监听：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

常见事件

点击事件

  1. onclick：单击事件
  2. ondblclick：双击事件

焦点事件

1. onblur：失去焦点
2. onfocus:元素获得焦点。

加载事件

  1. onload：一张页面或一幅图像完成加载。

鼠标事件

  1. onmousedown	鼠标按钮被按下。
  2. onmouseup	鼠标按键被松开。
  3. onmousemove	鼠标被移动。
  4. onmouseover	鼠标移到某元素之上。
  5. onmouseout	鼠标从某元素移开。

键盘事件

  1. onkeydown	某个键盘按键被按下。	
  2. onkeyup	某个键盘按键被松开。
  3. onkeypress	某个键盘按键被按下并松开。

表单事件

  1. onsubmit	确认按钮被点击。
  2. onreset	重置按钮被点击。

选择和改变

  1. onchange	域的内容被改变。
  2. onselect	文本被选中。

posted @ 2020-11-30 12:49 沙滩拾贝阅读(84) 评论(0) 编辑收藏举报

刷新页面返回顶部

沙滩拾贝