DOM介绍及元素的操作

最新推荐文章于 2023-09-05 09:26:32 发布
最新推荐文章于 2023-09-05 09:26:32 发布
阅读量526 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/121585195
版权

DOM介绍及元素的操作

1、DOM简介

1.1、什么是DOM

在这里插入图片描述

1.2、DOM树

在这里插入图片描述

2、元素

2.1、如何获取页面元素

在这里插入图片描述

2.2、getElementById获取页面元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="time">1999-9-9</div>
    <script>
        // 1、因为我们文档从上往下加载，先得有标签 所以我们script写到标签下面
        // 2、get 获得 elemnt 元素 by通过 驼峰命名法
        // 3、参数 id是大小敏感的字符串
        // 4、返回的是一个元素
        var timer = document.getElementById('time');
        console.log(timer);
        console.log(typeof timer);
        // 5、console.dir 打印我们返回的元素对象 更好的查看里面的属性和方法
        console.dir(timer);
    </script>
</body>
</html>

在这里插入图片描述

2.3、根据标签名获取

  • document.getElementsByTagName()
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>知否是否，应是绿肥红瘦</li>
        <li>知否是否，应是绿肥红瘦</li>
        <li>知否是否，应是绿肥红瘦</li>
        <li>知否是否，应是绿肥红瘦</li>
        <li>知否是否，应是绿肥红瘦</li>

    </ul>
    <script>
        // 1、返回的是 获取过来的元素对象的集合 以伪数组的形式存在
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        console.log('输出第一个小li:------------------');
        console.log(lis[0]);
        console.log('遍历结果：------------------');
        // 2、我们想要依次打印里面的元素对象 我们可以用来采取遍历的形式
        for(var i = 0;i<lis.length;i++){
            console.log(lis[i]);
        }
        // 3、如果页面中只有一个li 返回的还是伪数组的形式
        // 4、如果页面中没有这个元素返回的空的伪数组的形式
    </script>
    
</body>
</html>
  • element.getElementsByTagName()

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol id='ol'>
        <li>知否作否</li>
        <li>知否作否</li>
        <li>知否作否</li>
    </ol>
    <script>
        // 获取某个元素(父元素)内部指定标签名的子元素
        // var ol = document.getElementsByTagName('ol');
        // console.log(ol[0].getElementsByTagName('li'));
        
        // 方式2 根据id获取父元素
        var ol = document.getElementById('ol');
        // element.getElementsByTagName('标签元素') element：父元素 必须是指定的单个元素
        console.log(ol.getElementsByTagName('li'));
        
    </script>
</body>
</html>

在这里插入图片描述

2.4、通过HTML5新增的方法获取

  • document.getElementsByClassName(‘类名’);
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class='box'>盒子</div>
    <div class='box'>盒子</div>
    <div id='nav'>
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        // 1、getElementSByClassName根据类名获取某些元素
        var box = document.getElementsByClassName('box');
        console.log(box);
        
    </script>
</body>
</html>

在这里插入图片描述

  • document.querySelector(‘选择器’);
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class='box'>盒子</div>
    <div class='box'>盒子</div>
    <div id='nav'>
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        // querySelector返回指定选择器的第一个元素对象 切记 里面的选择器需要加符号 .box #nav
        var firstBox = document.querySelector('.box');
        console.log(firstBox);
        var nav = document.querySelector('#nav');
        console.log(nav);
        var li = document.querySelector('li');
        console.log(li);
        console.log('-------querySelectorAll----------');
    </script>
</body>
</html>

在这里插入图片描述

  • querySlectorAll()返回指定选择器的所有对象集合
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class='box'>盒子</div>
    <div class='box'>盒子</div>
    <div id='nav'>
        <ul>
            <li>首页</li>
            <li>产品</li>
        </ul>
    </div>

    <script>
        // querySlectorAll()返回指定选择器的所有对象集合
        var allBox = document.querySelectorAll('.box');
        console.log(allBox);
        var lis = document.querySelectorAll('li');
        console.log(lis);
    </script>
</body>
</html>

在这里插入图片描述

2.5、获取body和html元素

2.5.1、获取body元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1、获取body元素
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
    </script>
</body>
</html>

在这里插入图片描述

2.5.2、获取html元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 2、获取html元素
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>
</html>

在这里插入图片描述

小码哥呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript dom操作 dom元素查询 示例代码
06-27
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
1.dom元素——dom元素获取
ling_xy的博客
12-02 7563
什么是dom？ dom，即document object model(文本对象模型)。整个页面元素统称dom。 本质上是一种接口（API)，是专门操作网页内容的API标准 dom树 dom操作： 1.dom元素获取 2.dom元素属性操作（常规属性操作） 3.dom元素节点操作（子父节点之类的） 4.dom元素的事件（行为） 5.dom元素的方法操作 前提：要注意获取的元素是否已经初始化（需要考虑获取的元素存在还是不存在），根据页面的加载顺序来考虑 js里面如何获取dom元素 js里面dom..
♥️Javascript之DOM♥️
欢迎
09-10 2063
目录 节点 Node类型 属性 方法 Document类型 属性 DOM编程界面 查找元素 添加元素 Element类型 属性 Text类型 属性和方法 文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。 浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM T...
Dom元素
WJLSH123的博客
08-18 2441
dom的定义 ​ DOM(Document Object Model) 文档对象模型 ​ 作用: ​ 通过dom模型可以让js操作页面中的html标签和样式,从而改变页面的结构和样式 ​ document:(文档) ​ 表示整个网页文件(各种标签) ​ html标签存在完整的层次结构 ​ object:(对象) ​ 当浏览器将html加载到页面中,会自动生成每个标签的对象,以便js可以
DOM——获取元素方式
weixin_68160847的博客
01-12 995
（1）获取元素 （2）对元素进行操作（设置其属性或调用其方法） （3）动态创建元素 （4）事件（什么时机做相应的操作）
dom元素
Gananldo04的博客
05-19 3013
如何获取dom元素 dom 全称是document object model 文本对象模型 简称dom元素，dom就是html元素 获取dom元素的时候需要注意什么，注意dom元素是否初始化（是否已经存在） 一.四种动态获取dom的方法 1.通过class 类名称获取元素 返回的是一个HTMLCollection集合 document.getElementsByClassName() var btn=document.getElementsByClassName("list");cons
JavaScript dom操作 删除元素 示例代码
最新发布
06-27
JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 删除元素 示例代码JavaScript dom操作 ...
jQuery Dom元素操作技巧
10-18
DOM是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有的标准组件,这篇文章给大家介绍了jquery dom元素操作方法，需要的朋友参考下
ExtJS DOM元素操作经验分享
01-21
记得最早刚接触网页操作DOM元素的时候是做毕业设计的时候，用JQuery操作的。毕业工作后是从事C++方面的编程，两年后，又重新解决了网页编程，不过这次不是用JQuery了，用的是ExtJS。就我经验来看，程序员是一个需要...
DOM元素简介
前端开发小白9527
06-29 1090
在网页上，组成页面（或文档）的对象被组织在一个树形结构中。 页面的顶级包含在html标签中，在其中会找到head和body标签，而其它标签包含在这两个标签中，javascript将文档树中的每一项都当做对象，可以使用javascript操纵这些对象。用来表示文档中对象的标准模型就称为DOM（Document Object Model）。 ...
DOM 简介 | 深入了解DOM
青春木鱼的博客
09-05 3535
W3C DOM由以下三部分组成：核心DOM - 针对任何结构化文档的标准模型。XML DOM - 针对XML文档的标准模型。HTML DOM - 针对HTML文档的标准模型。DOM是一种提供对文档访问或修改方法的模型，它的范围很广，但对于 web 开发者来说，往往都认为它是指JavaScript在浏览器访问和修改html 文档的一种技术，但实际上范围远不局限在这里。
DOM简介、HelloWorld、文档节点、获取元素节点、元素的属性和方法——DOM
weixin_70320000的博客
11-26 2281
DOM简介、HelloWorld、文档节点、获取元素节点、元素的属性和方法
JavaScript中DOM元素对象
weixin_52629158的博客
05-02 595
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。一个窗口下面可以有很多的document对象。通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。document 表示的是一个文档对象，windows 表示一个窗口对象。insertBefore() 方法可在已有的子节点前插入一个新的子节点。childNodes 属性返回包含被选节点的子节点的 NodeList。
DOM详解
m0_48224507的博客
06-10 4430
文章目录一、什么是DOM1. 什么是DOM2. 为什么学习DOM3. 何时会用到DOM4. DOM标准5. DOM能做的5件事二、DOM树1. 什么是DOM树2. 何时会生成DOM树三、查找1. 不需要查找就可直接获得的4种节点对象:2. 按节点间关系查找3. 示例: 输出指定元素，并用节点间关系查找想要的元素4. 按HTML特征查找: 4个函数5.查找指定的元素，并修改元素的样式总结 一、什么是DOM 1. 什么是DOM 一套专门操作网页内容的对象和方法的集合。 2. 为什么学习DOM ECM
什么是DOM（超详细解释，建议收藏！！！）
weixin_58091723的博客
08-25 5055
元素节点表示 HTML 元素，属性节点表示属性，文档类型节点表示文档类型，注释节点表示注释。所有的节点和最终的树状结构，都有规范的对外接口。其中，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。文档里面最高的HTML标签，一般是，它构成树结构的根节点（root node），其他HTML标签节点都是它的下级。
什么是DOM和BOM？
似水流年QC的博客
06-01 1万+
DOM 全称是 Document Object Model，也就是文档对象模型。提供操作页面元素的方法和属性，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。DOM 树DOM树是Web页面的模型，当浏览器加载一个Web页面时，它会创建这个页面的模型，称为DOM树。DOM树主要由4类主要节点组成：文档节点，元素节点，属性节点，文本节点。①.文档节点：在树的顶端是文档节点，它呈现整个页面。②.元素节点：需要访问DOM树时，需要从查找元素开始。
DOM是什么？（超详细解释）
热门推荐
冰月灵狐
10-18 2万+
DOM全拼为Document Object Model（文档对象模型）是一种用于HTML和XML文档的编程接口，它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。 DOM概念本身： 普通文档（*.txt）和HTML/XML文档（*.html/*.xml）的区别仅仅是因为后者是有组织的结构化文件； 浏览器将结构化的文档以树的数据结构读入浏览器内存，并将每个树的子节点定义为一个NODE（想象这颗树，从根节点到叶子节点都被建模为一个NODE对象）； 这每个节点（NODE...
DOM基础知识
Mozarty的博客
04-22 1245
何为DOMDOM，即Document Object Model（文档对象模型），是一种Web API，它将HTML或XML文档表示为一个树形结构，每个节点都是一个对象，从而使开发者可以使用脚本语言（例如JavaScript）动态地访问和修改文档内容、结构和样式。何为Web APIWeb API是一种由Web浏览器提供的编程接口，它允许开发者通过JavaScript等脚本语言与浏览器进行交互，从而实现动态网页和丰富的Web应用程序。
DOM介绍
gergerfrgegregfd的博客
06-24 1984
一、DOM简介1.document:文档,DOM中的"D":当创建了一个网页并把它加载到Web浏览器中时,DOM就已经生成了,它把你编写的网页文档转换为一个文档对象.2.Object:对象,DOM中的"O":在程序设计语言里,“对象”这个词含义很明确,对象是一种自给自足的数据集合,与对象相关联的变量被称为属性,与对象相关联的且只能由该对象去调用的函数被称为这个对象的方法.JavaScript里最基础的对象是window对象,对应着浏览器本身,这个对象的属性和方法通常被称为BOM(浏览器对象模型),但叫做窗口

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值