JavaScript进阶学习笔记

it春和

已于 2022-02-18 18:08:04 修改

阅读量167

点赞数

分类专栏： JavaScript 文章标签： javascript 学习开发语言

于 2022-02-18 18:06:19 首次发布

本文链接：https://blog.csdn.net/m0_66947873/article/details/123007722

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、BOM

1.1、概念

JS 浏览器对象模型（Browser Object Model, BOM）被广泛应用于 Web 开发之中，主要用于客户端浏览器的管理。

BOM 概念比较古老，但是一直没有被标准化，不过各主流浏览器均支持 BOM，都遵守最基本的规则和用法，W3C 也将 BOM 主要内容纳入了 HTML5 规范之中。

1.2、分类

五大BOM对象：

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

1.2.1、Window

window 是客户端浏览器对象模型的基类，window 对象是客户端js的全局对象。一个 window 对象实际上就是一个独立的窗口，对于框架页面来说，浏览器窗口每个框架都包含一个 window 对象。

不用创建可直接调用方法如：alert方法

   方法：
       1. 与弹出框有关的方法：
alert()   显示带有一段消息和一个确认按钮的警告框。
confirm()   显示带有一段消息以及确认按钮和取消按钮的对话框。
         如果用户点击确定按钮，则方法返回true
         如果用户点击取消按钮，则方法返回false
prompt()   显示可提示用户输入的对话框。
     返回值：获取用户输入的值
2. 与打开关闭有关的方法：
close()   关闭浏览器窗口。
谁调用我，我关谁
open()   打开一个新的浏览器窗口
返回新的Window对象

var newwindow;
document.getElementById("btn_on").onclick = function () {
    newwindow = open()
}
document.getElementById("btn_off").onclick = function () {
    newwindow.close() // 谁调用该方法就关闭谁
}

          3. 与定时器有关的方式
setTimeout()   在指定的毫秒数后调用函数或计算表达式。
参数：
1. js代码或者方法对象
2. 毫秒值
返回值：唯一标识，用于取消定时器
clearTimeout()   取消由 setTimeout() 方法设置的 timeout。

setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。

function fun(){
    alert("雨纷纷旧故里草木深！");
}

// setTimeout("fun()",2000); // 一次行的定时器
setTimeout(fun,2000);

setInterval(fun,2000); //循环的定时器

属性：

1. 可以通过window对象获取其他BOM对象：
history
location
Navigator
Screen:
2. 获取DOM对象
document

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

1.2.2、Location

location 对象存储了当前文档位置（URL）相关的信息，简单地说就是网页地址字符串。使用 window 对象的 location 属性可以访问。

location 对象定义了 8 个属性，其中 7 个属性可以获取当前 URL 的各部分信息，另一个属性（href）包含了完整的 URL 信息

    1、创建
       1、window.location
       2、location

2、方法：
reload 重新加载当前文档刷新

3、属性：
href 设置或返回完整的url

// 1、点击按钮刷新当前页面 即重新加载
document.getElementById("btn1").onclick = function () {
    location.reload()
}

alert(location.href)

// 2、点击按钮去百度
document.getElementById("btn2").onclick = function () {
    location.href = "https://www.baidu.com"
}

1.2.3、History

历史记录对象

history 对象存储了库互动浏览器的浏览历史，通过 window 对象的 history 属性可以访问该对象，实际上 history 属性仅存储最近访问的、有限条目的 URL 信息。

1. 创建(获取)：
1. window.history
2. history

2. 方法：
back()   加载 history 列表中的前一个 URL。
forward()   加载 history 列表中的下一个 URL。
go(参数)   加载 history 列表中的某个具体页面。
参数：
正数：前进几个历史记录
负数：后退几个历史记录
3. 属性：
length   返回当前窗口历史列表中的 URL 数量。

window.history.back(); // 向后退1页
window.history.forward(); // 向前进1页

// 使用 length 属性可以了解历史记录栈中一共有多少页。

2、DOM

HTML DOM（Document Object Model）（文档对象模型）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

W3C DOM 标准被分为 3 个不同的部分：

1、核心 DOM - 针对任何结构化文档的标准模型
       * Document：文档对象
       * Element：元素对象
       * Attribute：属性对象
       * Text：文本对象
       * Comment:注释对象
       * Node：节点对象，其他5个的父对象
2、 XML DOM - 针对 XML 文档的标准模型
3、 HTML DOM - 针对 HTML 文档的标准模型

dom树

2.1、Document文档对象

文档对象
   1、创建
       1、window.document
       2、document

   2、方法
       1、获取Element对象：
           1. getElementById()   ：根据id属性值获取元素对象。id属性值一般唯一
           2. getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
           3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
           4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

       2. 创建其他DOM对象：
                createAttribute(name)
   createComment()
   createElement()
   createTextNode()

2.2、Element元素对象

        1. 获取/创建：通过document来获取和创建
       2. 方法：
           1. removeAttribute()：删除属性
           2. setAttribute()：设置属性

<body>
<a>我是一个超链接</a>
<br> <hr>
<input id="btn_set" type="button" value="设置属性">
<input id="btn_rem" type="button" value="移除属性">

<script>
    // 设置属性
    document.getElementById("btn_set").onclick = function () {
        // 获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        // 给a标签设置属性
        element_a.setAttribute("href", "https://www.baidu.com")
    }

    // 移除属性
    document.getElementById("btn_rem").onclick = function () {
        // 获取a标签
        var element_a = document.getElementsByTagName("a")[0];
        // 删除a的属性
        element_a.removeAttribute("href", "https://www.baidu.com")
    }

</script>
</body>

2.3、Node节点对象

其他5个的父对象
         特点：所有dom对象都可以被认为是一个节点
         方法：
             CRUD dom树：
                 appendChild()：向节点的子节点列表的结尾添加新的子节点。
                 removeChild()   ：删除（并返回）当前节点的指定子节点。
                 replaceChild()：用新节点替换一个子节点。

属性：
parentNode 返回节点的父节点。

2.4、 HTML DOM

HTMLDOM
   1. 标签体的设置和获取：innerHTML
   2. 使用html元素对象的属性
   3. 控制元素样式
       1. 使用元素的style属性来设置
           如：
               //修改样式方式1
       div1.style.border = "1px solid red";
       div1.style.width = "200px";
       //font-size--> fontSize
       div1.style.fontSize = "20px";
       2. 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

3、事件

概念：某些组件被执行了某些操作后，触发某些代码的执行。

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

常见的事件：
   1. 点击事件：
       1. onclick：单击事件
       2. ondblclick：双击事件
   2. 焦点事件
       1. onblur：失去焦点
       2. onfocus:元素获得焦点。

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

   4. 鼠标事件：
       1. onmousedown   鼠标按钮被按下。
       2. onmouseup   鼠标按键被松开。
       3. onmousemove   鼠标被移动。
       4. onmouseover   鼠标移到某元素之上。
       5. onmouseout       鼠标从某元素移开。
   5. 键盘事件：
       1. onkeydown   某个键盘按键被按下。
       2. onkeyup       某个键盘按键被松开。
       3. onkeypress   某个键盘按键被按下并松开。

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

   7. 表单事件：
       1. onsubmit   确认按钮被点击。
       2. onreset   重置按钮被点击。

it春和

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript进阶学习笔记

BOM ：JS 浏览器对象模型（Browser Object Model, BOM）被广泛应用于 Web 开发之中，主要用于客户端浏览器的管理。DOM：文档模型对象事件：某些组件被执行了某些操作后，触发某些代码的执行。
复制链接

扫一扫

专栏目录