JavaWeb :JavaScript高级

当当当当~~~~欢迎大家阅读，今天我们学习高级 JavaScript

BOM

一:概念

Browser Object Model 浏览器对象模型

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

二:组成

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

三:Window窗口对象

(一)方法

1:与弹出框有关的方法

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

     alert("hello window");
     window.alert("hello a");

     var flag=confirm("您确定要退出吗？")
     if(flag){
         //退出操作
         alert("欢迎再次光临！");
     }else{
         //提示：手别抖。。。
         alert("手别抖...");
     }

     //输入框
     var result=prompt("请输入用户名");
     alert(result);

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

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

 //打开一个新窗口
    var openBtn = document.getElementById(openBtn);
    var newWindow;
    openBtn.onclick=function(){
        //打开一个新窗口
       newWindow.open("https://www.baidu.com");
    }

  //关闭一个新窗口
    var closeBtn = document.getElementById(closeBtn);
    closeBtn.onclick=function(){
        //关闭一个新窗口
        newWindow.close();
    }

3:与定时器有关的防范

   setTimeout()
        在指定的毫秒数后调用函数或计算表达式
        参数
            js代码或者方法对象
             毫秒值
        返回值
            唯一标识，用于取消定时器
     clearTimeout()    取消由 setTimeout() 方法设置的 timeout
     setInterval()    按照指定的周期（以毫秒计）来调用函数或计算表达式
     clearInterval()    取消由 setInterval() 设置的 timeout

//轮播图定时器
<img id="img" src="img/banner_1.jpg" width="100%">
<script>
        //修改图片src属性
        var number=1;
        function fun(){
            number ++;
            //判断number是否大于3
            if(number>3){
                number=1;
            }

            //获取img对象
            var img = document.getElementById("img");
            img.src="img/banner_"+number+".jpg";
        }

        //2.定义定时器
        setInterval(fun,3000);

</script>

(二)属性

1:获取其他BOM对象

history

location

Navigator

Screen

2:获取DOM对象

document

(三)特点

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

window引用可以省略。  方法名()；var closeBtn = document.getElementById(closeBtn);

四:Location地址栏对象

1:创建(获取)

 window.location

 location

2:方法

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

3:属性

href设置或返回完整的 URL

五:History地址栏对象

1:创建(获取)

window.history

history

<script>
    //reload方法，定义一个按钮，点击按钮，刷新当前页面
    //1.获取按钮
    var btn=document.getElementById("btn");
    //2.绑定单击事件
    btn.onclick=function () {
        //3.刷新页面
        location.reload();
    }
    //获取href
    var href = location.href;
</script>

2:方法

back()加载 history 列表中的前一个 URL

forward()加载 history 列表中的下一个 URL

go(参数):加载 history 列表中的某个具体页面:

                参数:正数：前进几个历史记录

                负数：后退几个历史记录

<script>
    //获取按钮
    var btn = document.getElementById("btn");
    //绑定单机事件
    btn.onclick=function () {
        //获取当前窗口历史记录个数
        var length = history.length;
        alert(length);
    }

    //获取按钮
    var forward = document.getElementById("forward");
    //绑定单机事件
    forward.onclick=function () {
        //获取当前窗口历史记录个数
        history.forward();
    }

    //获取按钮
    var forward = document.getElementById("forward");
    //绑定单机事件
    forward.onclick=function () {
        //获取当前窗口历史记录个数
        history.go(1);
    }
</script>

3:属性

 length    返回当前窗口历史列表中的 URL 数量。

DOM

一：概念

Document Object Model 文档对象模型

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

二：DOM简单学习

(一)功能

控制html文档的内容

(二)获取页面标签(元素)对象：Element

 document.getElementById("id值"):通过元素的id获取元素对象

//电灯开关案例
<img id="light" src="img/off.gif">
<script>
    //1.获取图片对象
    var light = document.getElementById("light");
    var flag=false;//代表灯是灭的。
    //2.绑定单击事件
    light.onclick=function () {
        if (flag){
            //如果灯是开的，则灭掉
            light.src="img/off.gif"
            flag=false;
        }else{
            //如果灯是灭的，则打开
            light.src="img/on.gif"
            flag=true;
        }
    }
</script>

(三)操作Element对象

1:修改属性值

操作Element对象

查看API文档，找其中有哪些属性可以设置

2:修改标签体内容

属性：innerHTML

获取元素对象

使用innerHTML属性修改标签体内容

三：DOM标准

(一)核心 DOM - 针对任何结构化文档的标准模型

1.Attribute：属性对象

2.Text：文本对象

3.Comment:注释对象

4.Document：文档对象

①创建(获取)：在html dom模型中可以使用window对象来获取

   window.document

   document

②方法

获取Element对象

getElementById()： 根据id属性值获取元素对象。id属性值一般唯一

getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组

getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组

getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组

<script>
    //2.根据元素名称获取元素对象们，返回值是一个数组
    var divs = document.getElementsByTagName("div");
    //alert(divs.length);
    //3.根据Class属性值获取元素对象们，返回值是一个数组
    var div_cls = document.getElementsByClassName("cls1");
    //alert(div_cls.length);
    //4.根据name属性值获取元素对象们，返回值是一个数组
    var ele_username = document.getElementsByName("username");
    //alert(ele_username.length);
</script>

创建其他DOM对象

createAttribute(name):创建拥有指定名称的属性节点，并返回新的Attr对象

createComment():创建注释节点

createElement():创建元素节点

createTextNode():创建文本节点

//获取超链接
        var element_add = document.getElementById("add");
//绑定单击事件
        element_add.onclick=function () {
            var div1 = document.getElementById("div1");
//给div添加子节点
//创建div节点
            var div3 = document.createElement("div");
            div3.setAttribute("id", "div3");
            div1.appendChild(div3);
        }

5.Element：元素对象

①获取/创建：通过document来获取和创建

②方法

removeAttribute()：删除属性

setAttribute()：设置属性 

6.Node：节点对象，其他5个的父对象

①特点

所有dom对象都可以被认为是一个节点

②方法

CRUD dom树:

appendChild()：向节点的子节点列表的结尾添加新的子节点

removeChild()    ：删除（并返回）当前节点的指定子节点

replaceChild()：用新节点替换一个子节点

③属性:

parentNode 返回节点的父节点

(二)XML DOM - 针对 XML 文档的标准模型

(三)HTML DOM - 针对 HTML 文档的标准模型

1:标签体的设置和获取：innerHTML

2:使用html元素对象的属性

3:控制元素样式

使用元素的style属性来设置

提前定义好类选择器的样式，通过元素的className属性来设置其class属性值

<script>
    var div1 = document.getElementById("div1");
    div1.onclick=function () {
        //修改样式方式1
        div1.style.border = "1px solid red";
        div1.style.width = "200px";
        //font-size--> fontSize
        div1.style.fontSize = "20px";
    }
    var div2 = document.getElementById("div2");
    div2.onclick=function () {
        div2.className="d1"

    }
</script>

以上就是JavaScript基础内容啦，希望我的文章对你有所帮助，如果有错误的地方还望大家批评指正，谢谢大家阅读!