DOM简介、DOM查询——JS

已于 2022-04-09 13:21:45 修改
阅读量1k 收藏 5
点赞数
分类专栏： JavaScript 文章标签： js
于 2022-04-05 14:49:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/123968757
版权

宿主对象——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
    评论
专栏目录
DOM节点操作
m0_65729457的博客
10-31 176
DOM的节点操作
javascript中获取 DOM 元素的几种方式
夸克IT
12-14 4019
回顾 上一篇中我们初步了解了代码提交的规范，这个规范也是业内相当知名的规范，建议添加到你的项目中熟悉熟悉。有什么不懂得欢迎随时留言~ 在之前我们已经把 JavaScript 基础部分全部学完了，基础部分一共分为了10篇，在10篇的内容中需要记住的东西还是挺多，所以需要你多在编辑器中敲一敲。应用在实际的场景中，纸上得来终觉浅，绝知此事要躬行。 WebApi 从这篇及往后我们要进一步扩展知识面了，来到了 js 中进阶的部分—— WebApi，初来乍到你肯定会问这个 WebApi 是什么？API：顾名思义就是接口
DOM基本知识及DOM查询
weixin_44522602的博客
03-06 1954
参考：b站尚硅谷课程
JavaScript中DOM的查询
YingHuaBuRuTa的博客
12-21 326
一：Dom查询以下内容都是通过document对象进行调用。通过id属性获取一个元素节点通过标签名获取一组元素节点通过name属性获取一组元素节点对象二：实操。
dom查询
dweblover的博客
12-03 1960
1.dom元素查询以及结点查询 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;DOM查询练习&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin:0px; } .i
Dom查询的方法
huiyijiu的博客
11-29 961
定义:dom查询是通过document对象进行调用 1 getElementById():通过id属性获取一个元素节点对象。 2. getElementsByTagName():通过标签名获一取组元素节点对象。 3. getElementsByName():通过name属性获取一组元素节点对象。 4. appendChild()把新的子节点添加到指定节点。 5. removeChild()删除子节点。 6. replaceChild()替换子节点。 7. insertBefore()在指定的子节点前面插入新
JavaScript程序设计——DOM访问实验报告.docx
11-11
实验报告的主题是“JavaScript程序设计——DOM访问”，其目的是深入理解和掌握DOM（Document Object Model）在JavaScript中的应用，包括文档对象的属性、方法以及使用方式。DOM是HTML和XML文档的标准化表示，允许...
JavaScript——DOM操作——Window.document对象详解
10-21
下面小编就为大家带来一篇JavaScript——DOM操作——Window.document对象详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript——DOM
07-03
JavaScript——DOM DOM，全称为“Document Object Model”，即文档对象模型，是W3C组织定义的一种标准，用于表示HTML或XML文档的结构，并提供了一种程序化访问和操作文档内容的方法。JavaScript作为浏览器端最常用...
JavaScript-DOM查询
dafsq的博客
08-28 475
JavaScript-DOM查询
JS获取DOM元素的八种方法(含代码,简单易懂)
m0_74577714的博客
09-16 4474
六种获取元素的方法
DOM详解及DOM查询方式、DOM修改CSS
qq_39295665的博客
07-26 483
1、DOM DOM（Document Object Model）：文档对象模型，通过DOM可以来任意来修改网页中各个内容 文档 - 文档指的是网页，一个网页就是一个文档 对象 对象指将网页中的每一个节点都转换为对象 转换完对象以后，就可以以一种纯面向对象的形式来操作网页了 模型 模型用来表示节点和节点之间的关系，方便操作页面 节点（Node） 节点是构成网页的最基本的单元，...
js-DOM查询
m0_65163985的博客
07-19 124
3. 通过name属性获取一组元素节点对象。1. 通过id属性获取一个元By素节点对象。2. 通过标签名获取一组元素节点对象。通过document对象调用。
【DOM】DOM概述及DOM操作之如何查找元素_01
青春木鱼的博客
05-01 2030
DOM是一套专门操作网页内容的对象和函数的集合。今后只要想用JS程序操作网页内容，都必须使用DOM提供的对象和方法。DOM使JS有访问HTML的能力，能够实现对HTML中内容的操作。使用JS操作DOM时分为三个方面：DOM Core（核心）、HTML-DOM和CSS-DOM。
JavaScript DOM
Peakednes的博客
05-29 204
JavaScript DOMHTML DOM (文档对象模型)通过 id 查找 HTML 元素通过标签名查找 HTML 元素通过类名找到 HTML 元素改变 HTML 内容触发事件删除和增加节点操作 HTML DOM (文档对象模型) 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model），形成一个DOM树。 JS操作DOM 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 JavaScript 能够改变页面中的所有 HTML 元素
JS-获取DOM元素的五种方法
热门推荐
weixin_43937466的博客
09-04 1万+
根据id名获取元素：getElementById;根据标签名获取元素：getElementsByTagName，返回一个数组；根据类名获取元素：getElementsByClassName，返回一个数组；根据name属性值获取元素：getElementsByName，返回一个数组；根据选择器获取元素：querySelector：获取一个元素，推荐使用 用法类似写css；querySelectorAll：返回一个元素数组。more。
（9）DOM及DOM查询
yuan_21的博客
11-08 813
这里写目录标题1、宿主对象2、 DOM3、节点4、文档节点三级目录 1、宿主对象 由浏览器或运行环境所提供的对象。主要讲两种对象DOM、BOM。 2、 DOM document object module，文档对象模型 JS中通过DOM来对HTML文档进行操作，只要理解了DOM就可以随心所欲的操作WEB页面。 文档：整个HTML网页文档。 对象：将网页中的每一个部分都转换为了一个对象。 模型：使用模型来表示对象之间的关系，这样方便我们获取对象。 3、节点 节点Node，是构成我们网页的最基本的组成元素，网
前端学习（十八）webAPI基础1
whitefish520的博客
08-31 8193
web API Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM ) DOM 文档对象模型（Document Object Model）：是W3C组织推荐的处理可拓展标记语言的标准编程接口，所有的浏览器都遵循这套规范 通过DOM接口，可以改变网页的内容、结构、样式 DOM树 DOM树又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前页面 文档：一个页面就是一个文档，DOM中使用document表示 节点：网页中的所有内容，
JavaScript DOM 元素查找，web应用与开发
最新发布
2401_84094506的博客
04-03 1107
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取！**因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值