DOM简介、DOM查询——JS

宿主对象——DOM,BOM

DOM是什么

DOM的全称是文档对象模型。
JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

  • 文档:表示的是整个HTML网页文档
  • 对象:对象表示将网页中每一个部分转换成一个对象,所有可见的都是对象。
  • 模型:使用模型可以表示对象之间的关系,这样方便我们获获取对象。
    eg:模型
    在这里插入图片描述
    模型就是体现节点与节点之间的关系。

DOM的使用

DOM的作用就是通过对象模型用来操作网页的。
由于模型连接了全局的元素,所以只要我们获取一个对象然后通过模型就可以访问全部的对象。

浏览器已经为我们提供文档节点对象,这个对象是window的属性,可以在页面中直接使用,文档节点代表的是整个网页。

  • 文档节点对象
  <script type="text/javascript">
  console.log(document);
    </script>

输出:
在这里插入图片描述

  • 通过文档节点对象获取元素

调用 getElementById()方法

  <body>
   <button id="btn">按钮</button>
  <script type="text/javascript">
  console.log(document);
  var btn = document.getElementById("btn");
  console.log(btn);

    </script>
  </body>

输出:
在这里插入图片描述

  • 通过文档节点对象修改获取到的元素
    需要使用 innerHTML获取元素的内容从而进行修改
      var btn = document.getElementById("btn");
      console.log(btn.innerHTML);
      btn.innerHTML = "Button";

输出:
在这里插入图片描述
同时页面元素:
在这里插入图片描述

节点

节点:Node——构成HTML文档最基本的单元。
常用节点分为四类

  • 文档节点:整个HTML文档
  • 元素节点:HTML文档中的HTML标签
  • 属性节点∶元素的属性
  • 文本节点:HTML标签中的文本内容

节点的属性:

在这里插入图片描述

DOM方法

DOM查询——获取元素节点

  • getElementById() : 通过id属性获取一个元素节点对象
  • getElementsByTagName(): 通过标签名获取一组元素节点对象
  • getElementsByName(): 通过name属性获取一组元素节点对象

练习:图片的切换

实现效果:
在这里插入图片描述
在这里插入图片描述

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #outer{
            width: 580px;
            margin: 50px auto;
            padding: 10px;
            background-color: rgb(247, 223, 227); 
            /* 居中 */
            text-align: center;
        }
        img{  
           width: 100%;
           height: 326px;
           /* 根据正常比例对图片进行裁剪,前提是定义好图片的长宽,这样他才会有参照去进行裁剪 */
           object-fit: cover;
        }
       
    </style>
    <script>
        window.onload = function(){
            // 点击按钮切换图片:
            // 获取按钮对象
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");

            // 预处理
            // 获取图片对象,(想要获取一个元素,而不是集合,所以获取指定索引即可)
            var img = document.getElementsByTagName("img")[0];  
            // 存取所有图片路径
            var imgs =["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
            // 创建变量,记录索引
            var index = 0;  

            // 设置上面的初始数字.
            var info = document.getElementById("info");
            info.innerHTML = (index+1)+"/"+imgs.length;
            
            // 绑定事件
            prev.onclick = function(){
                index--;
                if(index < 0){
                    index = imgs.length-1;
                }
                img.src = imgs[index];

            // 设置图片上面地数字
            info.innerHTML = (index+1)+"/"+imgs.length;

            }
            next.onclick = function(){
                // 修改元素的属性就是:元素.属性 = 值;
                index++;
                if(index >= imgs.length){
                    index = 0;
                }
                img.src = imgs[index];

                // 设置图片上面地数字
            info.innerHTML = (index+1)+"/"+imgs.length;

            }

        }
    </script>
</head>
<body>
    <div id = "outer">
        <p id = "info"></p>
        <img src="img/1.jpg" alt="1">
        <button id = "prev">上一张</button>
        <button id = "next">下一张</button>
    </div>
</body>
</html>

DOM查询——获取元素子节点

  • getElementsByTagName():方法,返回当前节点的指定标签名后代节点
  • childNodes:属性,表示当前节点的所有子节点
  • children:属性,表示当前节点的所有子元素
  • firstChild:属性,表示当前节点的第一个子节点
  • firstElementChild:属性,表示当前节点的第一个子元素
  • lastChild:属性,表示当前节点的最后一个子节点

元素 != 结点: 元素就是标签,而结点包含页面中的所有对象,包含空行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    </style>
    <script>
        window.onload = function(){
            

            // 获取city 下的所有 li 结点
            var but = document.getElementById("but");
            but.onclick = function(){
                var city = document.getElementById("city");
                var lis = city.getElementsByTagName("li");
                
                for(var i = 0;i<lis.length;i++){
                    alert(lis[i].innerHTML);
                }
            }

             // 获取city 下的所有 子 结点
            var but = document.getElementById("but1");
            but.onclick = function(){
                var city = document.getElementById("city");
                /*
                childNodes属性会获取包括文本节点在呢的所有节点根据DOM标签标签间空白也会当成文本节点
                注意:在IE8及以下的浏览器中,不会将空白文本当成子节点,所以该属性在工E8中会返回4个子元素而其他浏览器是9个
                */
                var cns = city.childNodes;
                
                for(var i = 0;i<cns.length;i++){
                    alert(cns[i].innerHTML);
                }
            }

            // 获取city 下的所有 子 元素
            var but = document.getElementById("but2");
            but.onclick = function(){
                var city = document.getElementById("city");
                 var cns = city.children;
                
                for(var i = 0;i<cns.length;i++){
                    alert(cns[i].innerHTML);
                }
            }

            // 获取city 下的第一个子结点(包含空格)
            var but = document.getElementById("but3");
            but.onclick = function(){
                var city = document.getElementById("city");
                 var fir = city.firstChild;
                
                alert(fir.innerHTML);
            }

            // 获取city 下的第一个子元素
            var but = document.getElementById("but4");
            but.onclick = function(){
                var city = document.getElementById("city");
                 var fir = city.firstElementChild;
                
                alert(fir.innerHTML);
            }
        }
        


    </script>
</head>
<body>
<div>
    <ul id ="city">
        <li id = "bj">北京</li>
        <li id = "sh">上海</li>
        <li id = "dj">东京</li>
        <li id = "se">首尔</li>

    </ul>
    <button id="but">点击获取 city 的 li 元素</button>
    <br><br>
    <button id="but1">点击获取 city 子节点</button>
    <br><br>
    <button id="but2">点击获取 city 子元素</button>
    <br><br>
    <button id="but3">点击获取 city 的第一个子节点</button>
    <br><br>
    <button id="but4">点击获取 city 的第一个子节点</button>
    <br><br>

</div>
    
</body>
</html>

输出:
在这里插入图片描述

DOM查询——获取元素父节点、兄弟节点

  • parentNode:属性,表示当前节点的父节点
  • previousSibling:属性,表示当前节点的前一个兄弟节点
  • nextSibling:属性,表示当前节点的后一个兄弟节点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    </style>
    <script>
        window.onload = function(){
        function myClick(idName,fun){
            var btn = document.getElementById(idName);
            btn.onclick = fun;
        };

        myClick("but",function(){
            var bj = document.getElementById("bj");
            var pn = bj.parentNode;
            // alert(pn.innerHTML);
            alert(pn.innerText);
            /*
            innerText
            -该属性可以获取到元素内部的文本内容
            -它和innerHTML类似,不同的是它会自动将html去除*/
             
        });

        myClick("but2",function(){
            var bj = document.getElementById("sh");
            var pn = bj.previousSibling;
            // alert(pn.innerHTML);
            alert(pn.innerText);
        });

        myClick("but3",function(){
            var bj = document.getElementById("sh");
            var pn = bj.previousElementSibling;
            // alert(pn.innerHTML);
            alert(pn.innerText);
        });
    }


    </script>
</head>
<body>
<div>
    <ul id ="city">
        <li id = "bj">北京</li>
        <li id = "sh">上海</li>
        <li id = "dj">东京</li>
        <li id = "se">首尔</li>

    </ul>
    <button id="but">获取北京的父节点</button>
    <br><br>
    <button id="but2">获取上海的前一个兄弟节点</button>
    <br><br>
     <button id="but3">获取上海的前一个兄弟元素</button>
    <br><br>
</div>
    
</body>
</html>

输出:
在这里插入图片描述

DOM查询——其他查询方法

  • 获取body
    <script type = "text/javascript">
        windown.onload = function(){
            // 法一
            var body1 = document.getElementsByTagName("body")[0];
            // 法二: 再doument中有一个body属性,保存额是body属性
            var body2 = document.body;
        }
    </script>
  • 获取html
 var html = document.documentElement;
  • 获取页面所有的元素
var all = document.all;
 var all = document.getElementsByTagName("*");

eg:

    var all = document.all;
            console.log(all.length);
            for(var i =0 ;i<all.length;i++){
                console.log(all[i]);
            }

输出:
在这里插入图片描述

  • 通过class获取
            var box1 = document.getElementsByClassName("box1");

getElementsByclassName()可以根据class属性值获取一组元素节点对象,但是该方法不支持IE8及以下的浏览器

  • document.querySelector():需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
 <script type = "text/javascript">
        window.onload = function(){

            
            // 获取box1中所有的div
            // 通过css选择器的方法获取div:  .box1 div
            // document.querySelector() :需要一个选择器的字符串作为参数,可以根据一个CSS选择器来查询一个元素节点对象
            var div = document.querySelector(".box1 div");
            alert(div.innerHTML);

            // 也可以直接查找class
            var box1 = document.querySelector(".box1");

             // 也可以直接查找id
            var box1 = document.querySelector("#box1");

             // 也可以直接查找标签
            var box1 = document.querySelector("div");

        }
    </script>

但是:使用该方法总会返回唯一的一个元素,如果满足条件的元素有多个,那么它只会返回第一个

  • querySelectorAll():该方法和querySelector()用法类似,不同的是它会将符合条件的元素封装到一个数组中返回
    即使符合条件的元素只有一个也会返回数组。

输入框值的获取和修改

对于属性:都是通过 对象.属性 获取,对象.属性 = 值 进行修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    </style>
    <script>
        window.onload = function(){

         function myClick(idName,fun){
            var btn = document.getElementById(idName);
            btn.onclick = fun;
        };

        myClick("but",function(){
       var inp = document.getElementsByTagName("input")[0];
       alert(inp.value);});

        myClick("but1",function(){
       var inp = document.getElementsByTagName("input")[0];
       inp.value="输入你在喜欢的城市";
    });

    }


    </script>
</head>
<body>
<div>
    <ul id ="city">
        <li id = "bj">北京</li>
        <li id = "sh">上海</li>
        <li id = "dj">东京</li>
        <li id = "se">首尔</li>

    </ul>
     <input type="text" value="输入你在喜欢的城市">
     <br><br>
     <button id="but">获取输入值</button>
    <br><br>
     <button id="but1">重置输入值</button>
</div>
    
</body>
</html>

在这里插入图片描述

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值