JavaScript总结2

最新推荐文章于 2023-02-13 23:40:33 发布

crazy韩先森

最新推荐文章于 2023-02-13 23:40:33 发布

阅读量114

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/crazyhsl/article/details/111882227

版权

本文详细介绍了JavaScript中的BOM浏览器对象模型，包括Window、Location、History、DOM对象等核心概念。讲解了Window对象的常用方法如alert、confirm、prompt及定时器方法，并阐述了Location对象的属性和方法，以及History对象的功能。此外，还详细探讨了DOM对象的层次结构和操作方法，如获取和创建元素、事件处理等。

摘要由CSDN通过智能技术生成

Bom浏览器对象模型

概念:Browser Object Model

组成:

window:浏览器窗口对象

navigator:浏览器对象

Screen:显示器屏幕对象

History:历史记录对象

Location:地址栏对象

Window:浏览器窗口对象

1.创建

不用创建,直接使用Window对象中的属性和方法

2.方法的使用

与弹出框有关的方法

alert():显示带有一段消息和一个确认按钮的警告框

confirm():显示带有一段消息以及确认按钮和取消按钮的对话框.重点

如果点击确认,返回true值

如果点击取消,返回false值

prompt():显示一个可提示用户输入的对话框.

如果点击确认,那么该方法返回输入框输入的值

如果点击取消,那么该方法就不返回输入框输入的值

<script>
        /*
         alert():显示带有一段消息和一个确认按钮的警告框
         */
        window.alert("我被弹出了,必须确认,否则阻塞");
        var b = window.confirm("确认删除吗?");//根据该条的id值进行删除
        if (b) {
            //关联后台  执行删除操作
            alert("删除成功;");
        } else {
            //不做任何操作
            alert("删除失败");
        }
         //prompt():显示一个可提示用户输入的对话框.
         var s = window.prompt("请输入怒要查询的(关键字)信息");//用户信息  姓韩的用户信息
         if (s == "韩") {
             //关联后台  查询姓韩的用户信息
             alert("查到了姓韩的信息");

         } else {
             alert("查询失败,无任何信息");
         }
 //var flag = window.confirm("你确定要删除吗？");// 根据该条的id值进行删除
      /*if (flag) {
          // 关联后台  执行删除动作
          //alert("删除成功！")
      } else {
          // false  不做任何操作
          //alert("删除失败！")
      }*/

与打开与关闭浏览器窗口的方法：

close():关闭浏览器窗口

open():打开一个新的浏览器窗口或查找一个已命名的窗口.

 /*
            close():关闭浏览器窗口
            open():打开一个新的浏览器窗口或者找一个已命名的窗口.
            var id对应的标签=decoment.getElementById("id名称");//Element
            事件绑定   onclick 点击事件
     */
    var input = document.getElementById("openbtn");
    //alert(input)
    var window1;
    input.onclick = function () {
        //打开一个新窗口
        window1 = window.open("https://www.baidu.com");
    }
    var input2 = document.getElementById("closebtn");
    //alert(input)
    input2.onclick = function () {
        //关闭窗口
        window1.close();//window指代的就是当前的窗口
    }

与定时器相关的方法:

setInterval() 按照指定的周期来调用函数或者计算表达式

setTimeout(): 在指定的毫秒数后调用函数或者计算表达式需要两个参数：

1.定时器加载的方法体内容

2.定时器间隔时间执行毫秒数

clearInterval():取消由setInterval()设置的timeout.

clearTimeout(): 取消由setTimeout()放置的timeout.

   // 一次性的定时器
        // 炸弹 间隔5秒钟之后，弹出一个框框 显示诈弹爆炸了
        //window.setTimeout("alert('爆炸了！！')",5000);
        var boom =  document.getElementById("boom");
        var timeID = window.setTimeout(explosion,10000);
        // 会把定时器中的方法体内容封装一个方法  建议把定时器中的方法体内容封装一个方法
        function explosion() {
            alert('爆炸了！！');

        }
        // 定义一个时间值变量
        var time = 10;
        var timeID02 = window.setInterval(countdown,1000);
        // 循环定时器方法体内容
        function countdown() {
            time--;// 时间递减1
            if (time == 5) {
                clearTimeout(timeID);
                alert("炸弹被拆除了！！");
            }
            // 当时间值为0秒的时候，关闭周期性函数
            if (time == 0) {
                clearInterval(timeID02);
            }
            boom.innerText = time + "";
        }

3.属性的使用

1.获取其他的BOM对象

history

location

Navgator

Screen

2.获取DOM对象

.document:文档对象

4.对象的特点

window对象不需要创建,直接使用,window.属性名/方法名前面的window还可以省略不写

可以通过window对象获取其他的BOM对象和DOM对象

Location地址栏对象

Location对象包含有关当前URL的信息

1.创建:通过window对象来获取. window.location,前面的window可以省略不写

2.属性:

href 设置或返回完整的url

hostname 获取当前url指定的服务器主机名

3.方法

1.reload()重新加载文档,刷新动作

2.replace():用新的文档替换当前文档

 <script>
        /*
            href  设置或返回完整的 URL。

         */
        // 获取Location对象
        /*var location = window.location;
        var url = location.href;*/
        // 展示URL信息 获取当前的URL信息
        //alert(url);
        // 设置URL信息
        // 重新再加载一次
        window.onload = function () {
            // 1. 通过id获取到input标签
            var input = document.getElementById("goBaidu");
            // 2. 事件绑定 点击事件
            input.onclick = function () {
                // 设置URL信息
                location.href = "http://www.baidu.com";
                //document.write(location.hostname + "<br>");// localhost
            }

            // 1. 通过id找到input标签
            var input02 = document.getElementById("refresh");
            // 2. 事件绑定 点击事件 onclick
            input02.onclick = function () {
                // 让页面刷新一下
                location.reload();
            }

            // 1. 通过id找到对应的input标签
            var input03 = document.getElementById("replace");
            // 2. 事件绑定  双击事件 ondblclick
            var url = "https://cn.bing.com/";
            input03.ondblclick = function () {
                location.replace(url);
            }

        }

    </script>

History历史记录对象;

1.创建:通过window对象来获取历史记录对象 window.history,前面的window可以省略不写

2.方法：

  <h1>这是你开始的地址</h1>
    <a href="./02_窗口操作.html">去02页面</a>
    <input id="next" type="button" value="前往下一个页面">
    <script>
        /*
            - forward()	加载 history 列表中的下一个 URL。
            - back()	加载 history 列表中的前一个 URL。
            - go()	    加载 history 列表中的某个具体页面。
                数字参数 number
                正数： 1  前进下一个url地址    2  前进下两个url地址
                负数：-1  返回上一个url地址   -2 倒退前两个url地址
         */
        var input = document.getElementById("next");
        // 事件绑定
        input.onclick = function () {
            window.history.forward();
        }
        // 获取当前窗口的url历史记录数
        alert("当前窗口的历史记录数为：" + window.history.length);




    </script

length 返回浏览器历史列表中的url数量

DOM对象

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

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

核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型

核心DOM内容

Document---文档对象

Element--元素对象

Attribute--属性对象

Text---文本对象

Comment--注释对象

Node---节点对象

XML DOM内容--针对HTML文档的标准模型

HTML DOM 针对HTML文档的标准模型

Document 文档对象

1.创建

通过window对象获取文档对象 window.document window可以省略不写

2.方法

1.获取element元素对象

getElementById(),通过id名称对应的元素对象,id属性值一般唯一.

getElementsByTagName():通过标签名称获取对应的元素对象.返回的是一个对象数组

getElementsByClassName():通过class名称属性值获取对应的元素对象,返回的是一个对象数组

getElementsByName():通过name属性获取对应的元素对象,返回的是一个对象数组

2.创建其他DOM对象

createComment():创建一个注释节点.

createElement():创建元素节点

createTextNode():创建文本节点

createAttribute(name):创建指定名称的属性节点,并返回新的arrtibute对象

3.属性:

title:返回当前文档的标题

URL：返回当前文档的URL

4.特点

Comment注释对象

Element元素对象

1.创建

有两种创建方式

1.通过文档document来获取元素对象

2.通过document.createElement()来创建元素对象

2.方法

3.属性

4.特点

Node节点对象

节点对象可以是元素节点，属性节点，文本节点，任何节点都有父节点和子节点，但是文本节点没有子节点

方法：

CRUD操作添加节点删除节点查找结点修改节点（替换节点）

添加节点：appendChild() 向父节点中添加子节点

删除节点： removeChild()从父结点中删除子节点

修改节点：replaceChild（）用一个新节点替换原来的节点

属性:

parentNode：获取节点的父节点

childNodes: 获取节点的所有的子节点

firstChild:获取父结点中的第一个子节点

lastChild:获取父节点中的最后一个子节点

Event事件对象

概念:某些组件被执行了一些操作,会触发一些功能效果.

事件有几个因素:

事件:某些操作(功能,方法),如点击,双击,键盘按下,键盘弹起....

事件源:组件被操作的对象元素/标签输入框 .超链接.按钮

监听器:Listener (Filter Servlet(服务中间件 , 桥梁) Html Css JS),执行事件的代码

注册监听器:将事件,事件源,监听器三者绑定到一起.当事件源上发生了某个事件,则会触发执行某个监听器代码.

常见的事件:

1.点击事件:onclick

2.双击事件:ondblclick

3.获取焦点 onfocus

4.失去焦点 onblur

5.加载事件 onload 页面或者一张图像完成加载

6.鼠标事件：onmousedown 鼠标按下

onmouseup 鼠标按键松开

onmouseout 鼠标离开

onmousemove 鼠标移动

onmouseover 鼠标悬浮到某元素上

7.键盘事件：

键盘按下：onkeydown

键盘松开：onkeyup

键盘按下松开：onkeypress

8.表单事件：

表单提交：onsubmit

表单重置：onreset

9.选择和改变事件

onchange 文本内容发生改变触发

onselect:文本被选中

HTML DOM 标签对象

1.标签体内容获取和设置属性:innerHTML(可以插入文本内容和标签以及组合标签) innerText(插入文本内容)

2.使用html标签对象拥有的属性

3.可以通过标签对象更改标签样式:style 通过style属性设置css样式

div.style.border = " 1px solid black";

div.style,background = "red";

div.style.backgroundImage="url(图像路径)"

一般不推荐使用css代码提前设置

通过className属性给该属性设置对应的class值

crazy韩先森

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript总结2

Bom浏览器对象模型概念:Browser Object Model 组成: window:浏览器窗口对象 navigator:浏览器对象 Screen:显示器屏幕对象 History:历史记录对象 Location:地址栏对象Window:浏览器窗口对象 1.创建不用创建,直接使用Window对象中的属性和方法 2.方法的使用与弹出框有关的方...
复制链接

扫一扫