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。

属性

  1. 获取其他BOM对象：

    • location对象
    • history对象
    • Navigator对象
    • Screen对象

  2. 获取DOM对象

    • document

特点

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

Location地址栏对象

  1. 创建（获取）Location对象

    • window.location
    • location

  2. 方法

    • reload()：重新加载当前文档。刷新

  3. 属性

    • href：设置或返回完整的 URL。

History历史记录对象

  1. 创建（获取）History对象

    • window.history
    • history

  2. 方法

    • back()：加载 history 列表中的前一个 URL。
    • forward()：加载 history 列表中的下一个 URL。
    • go(参数)：加载 history 列表中的某个具体页面。
      • 参数：
        1. 正数：前进几个历史记录
        2. 负数：后退几个历史记录

  3. 属性

    • 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. 事件监听机制

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

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

  1. 常见事件

    • 点击事件
      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  沙滩拾贝  阅读(79)  评论(0)  编辑  收藏  举报