JavaScript脚本语言 - DOM入门，以及DOM获取元素四种方式

已于 2022-01-20 06:58:12 修改
阅读量1.2k 收藏
点赞数
分类专栏： 笔记 成长阶段 文章标签： javascript 前端 html
于 2022-01-20 06:04:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39123467/article/details/122593554
版权

文章目录

DOM入门

DOM简介

  • 文档对象模型（Document Object Model，简称 DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。

  • W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。

DOM树

请添加图片描述

  • 文档：一个页面就是一个文档，DOM中使用document表示
  • 元素：页面中的所有标签都是元素，DOM中使用element表示
  • 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示

DOM把以上内容都看作是对象

获取元素

  • DOM在我们实际开发中主要用来操作元素
  • 我们如何来获取页面中的元素？
  • 获取页面中的元素可以使用以下几种方式：

1.根据ID获取

  • 使用getElementByld（）方法可以获取带有ID的元素对象。
<body>
    <div id="time">'2019-9-9'</div>
    
    <script>
        //1.因为我么文档页面从上往下加载，所以先得有标签，所以我们script写到标签的下面
        //2.get 获得 element 元素 by 通过 驼峰命名法
        //3.参数 id是大小写敏感的字符串
        //4.记得引号  （''）
        var a = document.getElementById('time');
        console.log(a);          //'2019-9-9'
        //5.返回的是一个元素对象object
        console.log(typeof a);  //object
        //6.console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(a);         //div#time     
    </script>
</body>

2.根据标签名获取

  • 使用getElementsByTagName（）方法可以返回带有指定标签的对象的集合
<body>
    <ul>
        <li>刘刘</li>
        <li>鸿鸿</li>
        <li>涛涛</li>
    </ul>

    <script>  

    //得到所有li标签元素
    //得到的是动态的数据（实时更新）
    var lis = document.getElementsByTagName('li');  
    //返回的是 获取过来元素对象的集合 以伪数组的形式存储的
    console.log(lis);   //刘刘 \n 鸿鸿 \n 涛涛
    console.log(lis.length);    //3
    console.log(lis[0]);        //刘刘
    //循环遍历
    for(var i = 0; i < lis.length; i++){
        console.log(lis[i]);
    }

    //如果页面中只有一个li，返回的是一样的（伪数组）
    //如果页面中没有这个元素，返回的是一个空的伪数组
    

    </script>
</body>

需要注意

element.getElementsByTagName(‘标签名’);

 <body>
    //我们的目标，获得ol标签下的li标签数据
    <ul>
        <li>刘刘</li>
        <li>鸿鸿</li>
        <li>涛涛</li>
    </ul>

    <ol>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ol>

    <script>  

    //得到所有li标签元素
    //得到的是动态的数据（实时更新）
    var a = document.getElementsByTagName('ol');
    console.log(a.length);          //1
    console.log(a[0].getElementsByTagName('li'));  //[li,li,li]
    
    </script>
</body>
  • 通过Id获取也是可以的
<body>
    //我们的目标，获得ol标签下的li标签数据
    <ul>
        <li>刘刘</li>
        <li>鸿鸿</li>
        <li>涛涛</li>
    </ul>

    <ol id='b'>
        <li>11</li>
        <li>22</li>
        <li>33</li>
    </ol>

    <script>  

    //得到所有li标签元素
    //得到的是动态的数据（实时更新）
    var a = document.getElementsByTagName('b');
    console.log(b.getElementsByTagName('li'));  //[li,li,li]
    var lis = b.getElementsByTagName('li');

    //遍历数据
    for(var i = 0; i < lis.length ; i++){
        console.log(lis[i]);
    }
    
    </script>
</body>

3.通过HTML5新增的方法获取

1.document.getElenmentsByClassName(‘类名’); //根据类名返回元素对象集合

<body>
    
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>  
        //document.getElenmentsByClassName('类名');	//根据类名返回元素对象集合	
        var a = document.getElementsByClassName('box');
        console.log(a);    //[div.box,div.box]
        //遍历
        for(var i = 0; i < a.length; i++){
            console.log(a[i]);
        }
    </script>
</body>

2.document.querySelector(‘.选择器’); //根据指定选择器返回第一个元素对象

<body>
    
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>  
        //document.querySelector(‘.选择器’);		//根据指定选择器返回第一个元素对象
        var a = document.querySelector('.box');     
        console.log(a); //div.box

        var b = document.querySelector('#nav');
        console.log(b); //div#nav
        
        var c = document.querySelector('li');
        console.log(c); //首页
        

    </script>
</body>

3.document.querySelectorAll(‘选择器’); //根据指定选择器返回

<body>
    
    <div class="box">盒子</div>
    <div class="box">盒子</div>
    <div id="nav">
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>  
        //document.querySelectorAll('选择器');	//根据指定选择器返回
        var a = document.querySelectorAll('.box');
        console.log(a);     //NodeList(2)  [div.box,div.box]

    </script>

需要注意

类需要加 .(’.box’)

id需要加 #(’#top’)

标签不需要加东西(‘id’)

4.特殊元素获取(body,html)

获取body元素

doucument.body

<body>
    
    <script>  
        //获取body元素
        var a = document.body;
        console.log(a);     //body

    </script>
</body>

获取html元素

document.documentElement

<body>
    
    <script>  
        //获取html元素
        var b = document.documentElement;
        console.log(b);

    </script>
</body>
鬼鬼骑士
关注
专栏目录
DOM学习——DOM获取页面元素对象的方式总结
zjhahaha123的博客
04-20 817
目录一、为什么要获取元素二、DOM获取元素的方式1.通过DOM提供的方法获取元素①通过id获取②通过标签名tagName获取③通过类名class获取④通过name获取⑤通过选择器获取⑥特殊元素获取--body、html2.利用节点层级关系获取元素①节点概述②获取父级节点③获取子节点总结 一、为什么要获取元素 在页面中，我们通常要对一些元素进行操作，比如点击更换页面背景、修改文字内容等，这是需要先获...
Web基础(从零开始)——DOM简介（获取元素的四种方法）
qq_57633498的博客
12-04 1339
文档对象模型（简称DOM）：是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。 DOM树： 1.文档：一个页面就是一个文档，DOM中使用document表示； 2.元素：页面中的所有标签都是元素，DOM中使用element表示； 3.节点：页面中所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示； DOM把以上内容都看做是对象。 获取元素 1.根据ID获取 var element=document.getElementById(ID); eleme
DOM中获得对象的方法
aoluan2964的博客
02-26 130
Document 对象 每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 提示：Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。 在document对象中有以下三个方法，对于程序员来说，真可谓无人不知，无人不晓，...
Dom 获取元素的几种方式
qq_66198247的博客
05-23 9990
一.Dom简介 文档对象模型(Document Object Model，简称DOM ）)，是W3C组织推荐的处理可扩展标记语言(HTML或者XML）的标准编程接口。 W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。 二.Dom树 文档：一个页面就是一个文档，Dom中用document表示 ； 元素：页面中的所有标签都是元素，Dom中使用element表示； 节点：网页中的所有内容都是一个节点（标签，属性，文本，注释等），Dom中使用node表示 Dom
javaScript:DOM元素的获取（静态/动态获取）
qq_52799985的博客
09-05 2354
dom操作其实在前面的文章中已经用到很多次了，但是一直没有系统性的总结，接下来的几篇文章，主要来总结dom操作以及dom操作相关的案例（小游戏），比如说：选字游戏，连连看，打地鼠，多球碰撞，随机抽签，无缝轮播，原生js绘制时钟等等。二.DOM元素获取的常用方法（重点）
JavaScript学习笔记(DOM脚本)
weixin_30326745的博客
08-25 96
本篇讲述的是文档对象模型（DOM）。 JavaScript在Web开发中的主要作用是用于与用户交互，而DOM便是我们实现这些功能的基础。DOM是W3C提供的一种标准，它为开发人员提供了一种方式以表达网页中的所有元素。我们可以通过JavaScript修改页面元素相应的DOM属性，便可以对页面中的元素进行相关操作。 有一点儿比较值得称赞的是，因为DOM只表示页面中的内容，所以它并不受浏览器影响，因...
JavaScript驾驭网页－DOM
12-03
DOM是一种编程接口，它是一套标准的API，允许开发者通过JavaScript等脚本语言来访问和操作HTML、XHTML以及XML文档中的各个元素。正如JDBC提供了与数据库交互的接口，DOM则提供了与网页内容互动的桥梁。 DOM的主要...
JavaScript-UI-and-DOM:Telerik Academy 2015-2016 JavaScript-UI和DOM项目
05-14
JavaScript是一种广泛使用的编程语言，尤其在客户端Web开发中，它被用来赋予网页动态功能。JavaScript运行在用户的浏览器上，可以实时更新页面内容，处理用户输入，与服务器通信，甚至创建复杂的图形和动画效果。...
JavaScript-UI-and-DOM:JavaScript UI和DOM课程作业
05-18
JavaScript是一种强大的脚本语言，主要用于网页动态效果和用户界面的控制。DOM（Document Object Model）是HTML和XML文档的结构化表示，允许我们通过编程方式访问和修改文档内容。 在JavaScript中，UI（User ...
simple-dom:dom的基本元素
05-14
它提供了一种标准的方法，让程序和脚本可以动态地访问和更新文档的内容、结构以及样式。简单DOM是针对DOM操作的一个简化版本，便于开发者更便捷地理解和操作网页元素。 在HTML中，DOM将整个页面视为一个树形结构，...
JS-获取DOM元素的四种方法
qq_50708827的博客
04-03 1587
返回值：是一个元素对象，即当前id的对象（获取到元素则返回该元素，如果页面上没有你所获取的id，则返回null）语法：document.getElementsByClassName(“类样式的名字”);语法：document.getElementsByTagName(“标签的名字”);语法：document.getElementById(“id属性的值”);语法：document.querySelector(“选择器”);返回值：是一个伪数组，所以页面上没有对应标签的时候返回空数组。
原生JS-DOM操作获取元素的四种方法
世界和我们都不该止步于此
04-14 6690
目录 一.getElementById获取元素 二.getElementsByTagName()获取元素 三.HTML5新增方法获取元素 四.获取body、html元素 一.getElementById获取元素 这个方法需要根据ID来获取，使用getElementById()可以获取到带有ID属性的元素对象 我们来举一个例子： <div id='hello-JS'>你好JS</div> 这是一段HTML代码，有这样一个带有ID属性的div元素，我们通过get.
JavaScript获取DOM对象常用方法
『愚』的博客
11-15 4107
获取DOM对象的常用方法有如下几种： getElementById() 通过元素的ID属性获取DOM对象，获取的是一个DOM对象。 getElementsByTagName() 通过元素的标签名获取DOM对象，获取的是一组DOM对象。 getElementsByClassName() 通过元素的class属性获取DOM对象，获取的是一组DOM对象。 getElementsByName() 通过元素的name属性获取DOM对象，获取的是一组DOM对象。 样例代码： <!DOCTYPE html&gt
Script找DOM对象的五种方法
最新发布
qq_58299900的博客
11-09 183
1、通过标签选择器来获取DOM对象：通过标签来获取对象，//[0]表示代码中box里面第一个标签属性，如果不写，说明你获取的是所有box标签对象，以下同理。2、通过className来获取DOM对象：通过class属性来获取对象。4、通过name属性来找DOM对象：通过name属性来获取对象。5、通过父级来找子集：通过父级属性来获取子集属性的对象。3、通过id来找DOM对象：通过id来获取对象。通过div里面的内容为例。
JS（4）DOM脚本
aic1999的博客
09-26 342
DOM脚本 我个人的理解是，它是代码的结构树，以便于增删改查它的每一个结点。 例如：   【示例1】有表如下，试着将表格内的内容one\two\three\four变红色 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;DOM节点&lt;/titl..
DOM获取元素的几种方式
qq_46492364的博客
05-25 2338
文章目录一、对象1.对象的概念2.对象字面量 # 前言 这部分学习Web API,包括DOM和BOM。JavaScript包括ES、DOM、BOM三个部分，其中ES是ECMAScript，是JavaScript的核心，是一套 一、对象 1.对象的概念 JavaScript中的对象其实就是生活中对象的一个抽象。JavaScript的对象是无序属性的集合。 其属性可以包含基本值、对象或函数。对象就是一组没有顺序的值。我们可以把JavaScript 中的对象想象成键值对，其中值可以是数据和函数。 2.对象字面
DOM操作技术-动态脚本
cake_eat的博客
09-23 279
什么是动态脚本 动态脚本指的是在页面加载不存在，但将来的某一时刻通过修改DOM动态添加脚本。 创建动态脚本的两种方式 （1）插入外部文件 例如： var script = document.createElement(“script”); script.type = “text/javascript”; script.src = “client.js”; document.body.appendChild(script); （2）直接插入JavaScript代码 var script = document.
获取页面DOM数脚本
低至一折起的博客
12-12 226
function countTags(node){ var node=node?node:window.document; var nums=0; if(node.nodeType==1){ nums++; } for(var i=0,l=node.childNodes.length;i<l;i++){ nums += countTags(node.childNodes[i]); }
JavaScript DOM基础教程-客户端脚本语言入门
在JavaScript的世界里，DOM（文档对象模型）是网页内容的结构化表示，它提供了一种方式来访问和操作HTML或XML文档中的各个元素。DOM基础对于任何JavaScript开发者来说都是至关重要的，因为它允许我们通过编程的方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鬼鬼骑士

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值