javaweb ---- JavaScript：DOM,BOM

最新推荐文章于 2024-09-14 18:52:56 发布

Yiyou-Long

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量131

点赞数

分类专栏： javaweb 文章标签： javascript html html5

本文链接：https://blog.csdn.net/m0_46523928/article/details/118991356

版权

javaweb 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

javaweb ---- JavaScript：DOM,BOM

DOM的理解概述:

DOM(Document Object Model) 文档对象模型: JavaScript将标记语言文档的各个组成部分封装为对象（DOM树，所有元素可视为节点）,通过这些对象可以对标记语言文档进行CRUD(增删改查)的动态操作。

W3C DOM 标准被分为 3 个不同的部分：
1.核心 DOM - 针对任何结构化文档的标准模型
* Document：文档对象
* Element：元素对象
* Attribute：属性对象
* Text：文本对象
* Comment:注释对象
* Node：节点对象，其他5个的父对象，即所有dom对象都可以被认为是一个节点
2.XML DOM - 针对 XML 文档的标准模型（对核心DOM的扩展，修改较少）
3.HTML DOM - 针对 HTML 文档的标准模型（对核心DOM的扩展，修改较大）

JavaScript的使用概述:

javaScript可以通过HTML DOM中的对象，方法，属性来创建节点，选择元素并操作元素：元素可增删改属性，改变标签体内容，增删子节点元素，控制样式，添加事件。

Document文档对象的获取方法：
-window.document（在html BOM中的获取方式）
-document
Document文档对象可调用的方法：
-getElementById() ：根据id属性值获取元素对象。id属性值一般唯一
-getElementsByTagName()：根据元素名称获取元素对象们。返回值是一个数组
-getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
-getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
-createAttribute(name) : 创建属性
-createComment() : 创建注释
-createElement() :创建标签
-createTextNode()：创建文本对象

Element对象的获取方法：
-通过document来获取和创建
Element对象可调用的方法：
-removeAttribute()：删除属性
-setAttribute()：设置属性

Node节点对象不需要创建，所有元素都是Node节点
Node节点对象可调用的方法：
-appendChild()：向节点的子节点列表的结尾添加新的子节点。
-removeChild() ：删除（并返回）当前节点的指定子节点。
-replaceChild()：用新节点替换一个子节点。
Node节点对象可访问的属性：
-parentNode 返回节点的父节点。

BOM的理解概述：

BOM（Browser Object Model) 浏览器对象模型:将浏览器的各个组成部分封装成对象，包括窗口对象window，浏览器对象Navigator，显示器屏幕对象Screen，历史记录对象History，地址栏对象Location。

BOM的使用概述：

javaScript可以通过BOM中的对象，方法，属性操作浏览器。

window对象包含的方法（window对象不需要创建）：
与弹出框有关的方法：
-alert()   显示带有一段消息和一个确认按钮的警告框。
-confirm()   显示带有一段消息以及确认按钮和取消按钮的对话框。
-prompt()   显示可提示用户输入的对话框。
与打开关闭有关的方法：
-close()   关闭浏览器窗口
-open()   打开一个新的浏览器窗口
与定时器有关的方法
-setTimeout(js代码，毫秒数)   在指定的毫秒数后调用函数或计算表达式。
-clearTimeout()   取消由 setTimeout() 方法设置的 timeout。
-setInterval()   按照指定的周期（以毫秒计）来调用函数或计算表达式。
-clearInterval()   取消由 setInterval() 设置的 timeout。
获取其他对象：
-window.history
-location
-Navigator
-Screen
-document

Location地址栏对象的创建方法:
-window.location
-location
Location地址栏对象包含的方法：
-reload() 重新加载当前文档。刷新
Location地址栏对象可访问的属性：
-href ：设置或返回完整的 URL。

DOM的样式代码（整体阅读）：

 <style>
        .d1{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }    
</style>


<body>

<div class="div_cls" id="div1_id" name="div_name">
<div id="div1-1_id">div1的子标签是div1-1</div>
hello world!
</div>
<div class="div_cls" id="div2_id" name="div_name">你好 世界!</div>
 <a href="javascript:void(0);" id="del">删除子节点</a>
 <a href="javascript:void(0);" id="add">添加子节点</a>

<script>
    //1.document对象选择元素div1_id
    var div1_id = document.getElementById("div1_id"); //一般id与变量同名,且id唯一，只选中一个标签 
    //var divs = document.getElementsByTagName("div")[0];
    //var divs_cls = document.getElementsByClassName("div_cls")[0];
    //var divs_name = document.getElementsByName("div_name")[0];
    
    //2.document对象创建元素;创建class属性并添加给元素
    var div3_id = document.createElement("div");//创建元素div3_id
    var att=document.createAttribute("class"); //创建class属性并添加给元素div3_id
    att.value="div_cls";
    div3_id.setAttributeNode(att);
    //div3_id.setAttribute("class","div_cls"); document对象传创建的属性可以被多个元素添加，而直接通过elemnt对象添加属性知对该属性有效
    
    //3.修改元素的属性
    div3_id.class = div_cls+;//将div3_id的class属性值修改为div_cls+

    //4.删除元素
    div3_id.removeAttribute("class");

    //4.查，修改，追加标签体内容
    //标签体内容用双引号括起来
    var innerHTML = div3_id.innerHTML;
    alter(innerHTML) //空
    div3_id.innerHTML = "Bonjour";
    div3_id.innerHTML+= " le monde!";

    //5.元素添加事件，事件中增删子节点元素
    //获取超链接
    var element_del = document.getElementById("del");
    //
    //绑定单击事件
    element_del.onclick = function(){
    var div1_id = document.getElementById("div1_id"); //获取父节点
    var div1-1_id = document.getElementById("div1-1_id"); //获取子节点
    div1.removeChild(div1-1_id);//删除（并返回）当前节点的指定子节点。
    }

    var element_add = document.getElementById("add");
    element_add.onclick = function(){
    var div1_id = document.getElementById("div1_id"); 
        var div1-2_id = document.createElement("div");
        div1-2.setAttribute("id","div1-2_id");
        div1_id.appendChild(div1-2_id);//向节点的子节点列表的结尾添加新的子节点。
    }
    
    //6.用两种方式修改样式
    var div1_id = document.getElementById("div1_id");
     //单个样式修改
    div1_id.onclick = function(){
        div1_id.style.border = "1px solid red";
        div1_id.style.width = "200px";
        div1_id.style.fontSize = "20px";
    }
    //
    //修改标签的class属性，与CSS选择器关联起来
    var div2_id = document.getElementById("div2_id");
    div2.onclick = function(){
        div2.className = "d1";
    }

    //7..返回某一点元素的父节点
    var div1-2_id = document.getElementById("div1-2_id");
    var div1 = div1-2.parentNode; 
    alert(div1);
  
</script>

</body>

事件的样式代码：

//通过两种方式为标签绑定事件：
//1.html标签具有事件属性，可以直接执行 JavaScript 代码，或者调用 JavaScript 函数完成对用户操作的反应
<img id="?" src="..."  onclick="fun();">
<!-- <img id="?" src="..."  onclick="alert('事件被触发了');"> -->
<script>
    //定义事件内容
    function fun(){
        alert('事件被触发了');
    }
</script>

//2.在js中通过dom获取元素对象，再新增事件属性
<img id="?" src="...">
<script>
    //定义事件内容
    function fun(){
        alert('事件被触发了');
    }

    //.获取对象
    var ? = document.getElementById("?");

    //.绑定事件
    ?.onclick = fun;
   //?.onclick = fun();错于js绑定事件语法和html不通
</script>
  /*
    常见的事件：
            1. 点击事件：
                1. onclick：单击事件
                2. ondblclick：双击事件
            2. 焦点事件
                1. onblur：失去焦点。
                    * 一般用于表单验证
                2. onfocus:元素获得焦点。

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

            4. 鼠标事件：
                1. onmousedown	鼠标按钮被按下。
                    * 定义方法时，定义一个形参，接受event对象。
                    * event对象的button属性可以获取鼠标按钮键被点击了。
                2. onmouseup	鼠标按键被松开。
                3. onmousemove	鼠标被移动。
                4. onmouseover	鼠标移到某元素之上。
                5. onmouseout	鼠标从某元素移开。


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

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

            7. 表单事件：
                1. onsubmit	确认按钮被点击。
                    * 可以阻止表单的提交
                        * 方法返回false则表单被阻止提交。
                2. onreset	重置按钮被点击。
    */

BOM--window窗口对象的测试代码：

    <input id="openBtn" type="button" value="打开窗口">
    <input id="closeBtn" type="button" value="关闭窗口">

    <script>
        /* Window：窗口对象，不需要创建可以直接使用：方法名(); 也可以通过window使用：window.方法名(); 
         */

        //1. 与弹出框有关的方法：
         //警告框
         window.alert("hello window");
        
         //确认框
         /*如果用户点击确定按钮，则方法返回true
           如果用户点击取消按钮，则方法返回false
          */
         var flag = confirm("您确定要退出吗？");
         if(flag){
             alert("退出窗口！");
         }else{
             alert("撤销退出操作");
         }

         //弹出输入框
         //返回值：获取用户输入的值 
          var result =  prompt("请输入用户名");
          alert(result);
        
         //2.与窗口开关有关的方法                
          //点击按钮打开新窗口
        var openBtn = document.getElementById("openBtn");
        var newWindow;
        openBtn.onclick = function(){
            //打开新窗口:返回新的Window对象
            newWindow = open("https://www.baidu.com");
        }

        //点击按钮关闭新窗口
        var closeBtn = document.getElementById("closeBtn");
        closeBtn.onclick = function(){
           // 关闭新窗口:谁调用，就关谁
            newWindow.close();
        }

         //3. 与定时器有关的方法
        //一次性定时器
        //返回值：唯一标识，用于取消定时器
        setTimeout("fun(){alter('boom~~')};",2000);//参数位js代码

        var id = setTimeout(fun,2000);//参数为方法对象
        clearTimeout(id);
        function fun(){
            alert('boom~~');
        }

        //循环定时器
        var id = setInterval(fun,2000);
        clearInterval(id);

        //4.获取其他对象：
        //获取history
       var h1 =  window.history;
       
       //获取document对象
       var openBtn = window.document.getElementById("openBtn");
    </script>

Location对象的测试代码：

    <input type="button" id="b1" value="刷新">
    <input type="button" id="b2" value="去百度">
    <script>
        //1.location调用reload方法，刷新当前页面
        var b1 = document.getElementById("b1");
        b1.onclick = function(){
            location.reload();
            //window.location,.reload();
        }

        //2.获取location对象的href属性，即获取当前页面
        var href = location.href ;
   
        //3.设置location对象的href属性，使从当前页面跳转到指定页面
        var b2= document.getElementById("b2");
        b2.onclick = function(){
            location.href = "https://www.baidu.com";
        }
    </script>