DOM 基础语法

已于 2022-02-26 15:31:48 修改
阅读量2.5k 收藏 1
点赞数 1
分类专栏： Web 文章标签： javascript 前端 html
于 2022-02-12 16:22:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62789540/article/details/122898275
版权

文章目录

DOM基础语法

1、 简介

文档对象模型（DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML、XML）的标准编程接口

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

1.1 DOM树

https://images.cnblogs.com/cnblogs_com/blogs/722174/galleries/2074790/o_220130105305_R-C.png

文档：一个页面就是一个文档，DOM 中使用 document 表示

元素：页面中的所有标签都是元素，DOM 中使用 element 表示

节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

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

2、 获取元素

获取页面中的元素可以使用一下几种方式

  • 根据 id 获取
  • 根据标签名获取
  • 通过 HTML5 新增的方法获取
  • 特殊元素获取
2.1 根据 id 获取

使用 getElementById("id")方法可以获取带有 id 的元素对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="time"> 2022-2-1</div>
    <script>
        var time = document.getElementById("time");  // 大小写敏感
        console.log(typeof time);
        console.dir(time);
        console.log(time);  // console.dir() 打印我们返回的元素对象，更好的查看里面的属性和方法
    </script>
</body>

</html>
  1. 因为我们的文档页面从上往下加载，所以先得有标签，故我们 script 写到标签的下面
  2. get 获得 element 元素 by 通过 驼峰命名法
  3. 参数 id 是大小写敏感的字符串
  4. 返回的是一个元素对象
2.2 根据标签名获取

使用getElementsByTagName("标签名")方法可以返回带有指定标签名的对象集合

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>123 a</li>
        <li>123 b</li>
        <li>123 c</li>
        <li>123 d</li>
        <li>123 e</li>
    </ul>
    <script>
       var lis = document.getElementsByTagName("li");
       console.log(lis);
       console.log(lis[0]);
       for (var i = 0; i < lis.length(); i++){
     
           console.log(lis[i])
       }
    </script>
</body>

</html>
  1. 返回的是获取过来元素对象的集合，以伪数组的形式存储，遍历获取数据
  2. 得到的元素是动态的
  3. 如果页面中没有这个元素，放回的伪数组是一个空数组
2.3 根据标签名获取

使用element.getElementByTagName("标签名")获取某个元素（父元素）内部所有指定标签名的子元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>123 a</li>
        <li>123 b</li>
        <li>123 c</li>
        <li>123 d</li>
        <li>123 e</li>
    </ul>
    <ol id="first">
        <li>23 a</li>
        <li>23 b</li>
        <li>23 c</li>
        <li>23 d</li>
        <li>23 e</li>
    </ol>
    <script>
       var ol1 = document.getElementById("first");  // var ol1 = document.getElementsByTagName("ol")[0]  效果一样
       var lis = ol1.getElementsByTagName("li");  // 一定要指明那个父元素
       console.log(lis);
       console.log(lis[0]);
    </script>
</body>

</html>

父元素必须是单个对象（必须指明是哪个元素对象）获取的时候不包括父元素自己

2.4 根据 类名来获取

使用document.getElementsByClassName("类名")来获取元素对象集合

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <script>
        var boxs = document.getElementsByClassName("box");
        console.log(boxs);
    </script>
</body>

</html>
2.5 通过指定选择器获取

使用document.querySelector("选择器")指定选择器，获取第一个元素对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="f1">盒子3</div>
    <script>
        var box = document.querySelector("div");
        console.log(box);
        var id = document.querySelector("#f1");  // 使用id选择
        // 如果使用类选择器，则 (".box")
        console.log(id);
    </script>
</body>

</html>

使用document.querySelectorAll("选择器")指定选择器，获取所有的元素

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">盒子1</div>
    <div class="box">盒子2</div>
    <div id="f1">盒子3</div>
    <script>
        var boxs = document.querySelectorAll(".box");
        console.log(boxs);
	</script>
</body>

</html>
2.6 获取 body 和 html 元素
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // body
        var bodyEle = document.body;
        console.log(bodyEle);
        console.dir(bodyEle);
        // html
        var htmlEle = document.documentElement;
        console.log(htmlEle);
    </script>
</body>

</html>

3、 事件基础

3.1 概述

JS 使我们有能力创建动态页面，而事件是可以被 JS 侦测到的行为

简单理解：触发 — 响应机制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">hello</button>
    <script>
        btn.onclick = function() {
     
            alert("hello world"
最低0.47元/天 解锁文章
SteveKenny
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript基础语法、dom操作树及document对象
10-25
本文介绍了学习javascript重要的3个内容基础语法、dom操作树及document对象，小伙伴们一定要弄明白才行
Dom基础语法
Primary_Insist的博客
11-14 1187
目录 一、获取元素 二、操作元素 改变元素的内容 获取、修改元素属性 修改表单元素 修改样式属性 三、节点 获取节点 创建节点 添加节点 删除节点 复制节点 三种动态创建元素的区别 四、事件 事件三要素 注册事件 删除事件（解绑事件） DOM事件流 事件对象 事件对象常见的属性和方法 事件委托 console.dir 打印我们返回的元素对象，更好查看里面的属性和方法 一、获取元素 document.getElementById(id)...
DOM基本语法
qq_54481824的博客
05-22 786
API： 在了解DOM之前，让我们先了解一下API。API是一些预定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。 API简单来说就是一种工具。举个例子，我们用电脑上网，我们无需理解电脑连上网络的机制，我们仅仅需要把运营商提供的账号和密码输入就可以了。 Web API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM），现阶段我们的API主要针对浏览器做交互效果。 DOM: 什么是DOM？DOM是文档对象模型，是W3
JavaScript中DOM基础语法
木易一
02-08 1055
一、关于DOM    DOM全称为document object model（文本对象模型）， 当网页被加载时，浏览器会创建页面的文档对象模型，即dom元素。    document对象指的是所有的html对象，通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。   JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变...
JavaScript 进阶班之DOM技术-pink老师
Arina_Ke的博客
01-20 735
JavaScript进阶班之DOM技术 1 DOM简介 1.1 什么是DOM 文档：一个页面就是一个文档，DOM中使用doucument来表示 元素：页面中的所有标签都是元素，DOM中使用 element 表示 节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用node表示 DOM 把以上内容都看做是对象 2 获取元素 2.1 如何获取页面元素 根据id来获取 使用 getElementByld() 方法可以获取带ID的元素对象 doucument.getElem
♥️Javascript之DOM♥️
欢迎
09-10 2065
目录 节点 Node类型 属性 方法 Document类型 属性 DOM编程界面 查找元素 添加元素 Element类型 属性 Text类型 属性和方法 文档对象模型（DOM）是网页的编程接口。它给文档（结构树）提供了一个结构化的表述并且定义了一种方式——程序可以对结构树进行访问，以改变文档的结构，样式和内容。 浏览器会根据DOM模型，将结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM T...
vue基础语法练习源码
12-09
首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的核心，它通过`new Vue()`创建。在HTML文件中，我们通常使用`<script>`标签引入Vue库，并创建实例，将DOM元素与Vue实例绑定。例如： ```html ...
JavaScript基础语法.pdf
最新发布
08-22
JavaScript基础语法是JavaScript语言的核心部分，包括ECMAScript的基础语法、DOM文档对象模型和BOM浏览器对象模型等。JavaScript是一种具有面向对象能力的、解释型的程序设计语言，主要目的是验证发往服务器端的数据...
Javascript基础知识（一）核心基础语法与事件模型
10-25
总的来说，JavaScript的基础语法和事件模型是理解其工作原理的关键，掌握这些知识能够帮助开发者构建功能丰富的交互式网页应用。无论是新手还是经验丰富的开发者，对这些基础知识的深入理解和熟练运用都是必不可少的...
JQuery基础语法小结
12-08
在本篇文章中，我们将重点讨论JQuery的基础语法，包括文档加载、选择器、事件处理、DOM对象与JQuery对象的转换以及CSS操作。 1. **$(document).ready()**： 这个函数用于确保DOM完全加载完毕后再执行内部的...
轻松使用DOM 的技巧和诀窍
notreally
10-11 469
转载：http://www.xiaing.com/article/234/239/2007/2007051317694.html 文档对象模型（Document Object Model，DOM）是用于操纵 XML 和 HTML 数据的最常用工具之一，然而它的潜力却很少被充分挖掘出来。通过利用 DOM 的优势，并使它更加易用，您将获得一款应用于 XML 应用程序（包括动态 Web 应用程序）...
JS基础 DOM 语法大总结
xiaodingmao
08-05 420
1获取元素 获取非常规标签 html body head var html=document.documentElement var body=document.body var head=document.head 获取常规标签 1、根据ID获取元素 document.getElementById('ID名字') 如果没有对应的ID元素，就是null 2、根据类名获取元素 document.getElementsByClassName('类名') 返回伪数组，伪数组内第[n]个才是元素 3、
DOM 精简知识教程
Comman1999
10-27 1005
先来看一张简单的文档树很明显树的顶层节点是NodeA节点,接下来可以通过指定的合适节点移动到树中的任何点,结合以下的代码你可以更好的了解这棵树节点间的相互关系:NodeA.firstChild = NodeA1 NodeA.lastChild = NodeA3 NodeA.childNodes.length = 3 NodeA.childNodes［0］ = NodeA1 NodeA.childN
小白必看jquery入门dom操作篇
qq_41976359的博客
08-10 568
jquery小白必看 dom操作 末尾添加 $('.box').append($('<h1>hello world</h1>') 开头添加 $('.box').prepend($('<h1>hello world</h1>') 之前添加 $('.box').before($('<h1>hello world</h1>') 之后插入` $('.box').after($('<h1>hello world</h1&g
【前端系列教程之JavaScript】09_DOM编程详解_基础篇
波哩个波的博客
12-22 1227
一、JavaScript DOM 概述 1.1、DOM概念 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理超文本标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。 ...
JS之一篇文章让你学会DOM，确定不来看看嘛
dyyay521的博客
03-30 5033
tips:本博客内容是我学习b站黑马pink老师的DOM课程总结来的呦 OK！既然点开了，就和我一起来征服传说中的DOM吧！ 第一关：我的标题上又有JS又有DOM哎，那它们的关系是啥你知道吗？ 我们来看看这个关系图，在学DOM之前，我们应该具备的是学习了JS语法！当你学了JS语法之后，再来学DOM和BOM，加起来，就是整个JS的世界啦～ 第二关：DOM是个啥？ 下面是DOM的官方定义，但对我来说的话，DOM其实就是JS的接口，有了这个接口，我们才能用JS来操作浏览器啦～ 第三关：DOM.
js中的DOM常用语句总结
12-02 295
DOM简介 DOM:Document Object Model DOM定义了访问类似于HTML/XML结构化树状文档的接口 W3C定义了Javascript对DOM的实现方法 简单而言一个DOM对象对应于HTML/XML一对闭合标签&lt;tag&gt;&lt;/tag&gt;所包含的内容 //短函数方便使用 function $(id){&lt;wbr&gt;return docum...
107个常用Javascript语句1
08-03
而在DOM（Document Object Model）层次中，浏览器窗口的顺序是`window`对象，其下有`navigator`、`screen`、`history`、`location`和`document`等子对象。 获取表单元素的信息，如名称和值，可以使用`...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

SteveKenny

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

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

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

打赏作者

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

抵扣说明：

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

余额充值