JavaScript 学习笔记（二）JavaScript基础，JavaScript的基本DOM操作（二）

已于 2022-03-05 11:26:19 修改
阅读量427 收藏 2
点赞数
文章标签： javascript 学习 前端
于 2022-03-02 15:53:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43969648/article/details/123225415
版权

文章目录

JavaScript 学习笔记（一）JavaScript基础，JavaScript的基本DOM操作（二）

一、DOM介绍

DOM 全称—— Document Object Model是一整套操作文档相关内容的属性和方法。
可以用它来操作元素修改样式；
操作元素修改属性；
操作元素改变位置；
操作元素添加事件等。

二、获取元素的方式

1. 根据id名称获取

语法：document.getElementById(‘id名称’)
作用：获取文档流中ID 名对应的一个元素
返回值：
如果有 id 对应的元素，就是这个元素
如果没有 id 对应的元素，就是 null

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <div class="box" id="container">你好</div>
<script>
    //根据id获取页面元素
    var ele = document.getElementById('container')
    //输出返回值
    console.log(ele)
</script>
</body>
</html>

2. 根据元素 类名 获取

语法：document.getElementsByClassName(‘元素类名’)
作用：获取文档流中 所有 类名对应的元素
返回值：必然是一个伪数组
如果有 类名 对应的元素，有多少获取多少
如果没有 类名 对应的元素，就是 空的伪数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
<script>
    //根据id获取页面元素
    var ele = document.getElementsByClassName('box')
    //输出返回值
    console.log(ele)
</script>
</body>
</html>

3. 根据元素 标签名 获取

语法：document.getElementsByTagName(‘标签名’)
作用：获取文档流中 所有 标签名对应的元素
返回值：必然是一个伪数组
如果有 标签名 对应的元素，有多少获取多少
如果没有 标签名 对应的元素，就是 空的伪数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM操作（二）</title>
</head>
<body>
    <div>一号</div>
    <div class="box">二号</div>
    <div class="box content">三号</div>
    <div class="box" id="container">四号</div>
<s
最低0.47元/天 解锁文章
小张小张啊
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Educoder JavaScript：HTML DOM——文档元素的操作（二）
Junds0的博客
06-04 3084
第1关：创建节点 创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <p></p> <script> <!-- 请在此处编写代码 -->
Educoder JavaScript：HTML DOM——文档元素的操作
Junds0的博客
06-01 2942
第1关：通过id获取文档元素 获取本文档中id为a1的文档元素，要求用id获取文档元素；将获取的元素赋值给变量myElement <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>get element by id</title> </head> <body> <a id="a1" src="h
JavaScript学习手册十四：HTML DOM——文档元素的操作（二）
qq_45823118的博客
04-24 9766
HTML DOM——文档元素的操作1.创建节点任务描述相关知识创建节点代码文件2.插入节点任务描述相关知识插入节点代码文件3.删除节点任务描述相关知识删除节点代码文件4.替换节点任务描述相关知识替换节点代码文件5.综合练习任务描述相关知识下拉列表的级联代码文件 1.创建节点 任务描述 1.本关任务：创建一个表单<form>节点。 2.具体要求如下： 创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post，如下所示： <form id
JS的DOM基础属性设置和排他思想（密码显示与隐藏、Tab切换栏、全选和非全选、图片切换）
qq_42964711的博客
05-11 374
API是什么 API是给程序员提供的一种工具，以便能更轻松想要完成的功能。 WEB-API是浏览器提供的操作浏览器功能和页面元素的API（BOM和DOM） DOM 什么事DOM 文档对象类型（DOM），是W3C组织推荐的可扩展标记语言的标准编程接口。 通过DOM可以改变网页内容、结构和样式 DOM树 文档：一个页就是一个文档，DOM中使用document表示。 元素：页面中所有标签都是元素，DOM中用element表示 节点：网页中所有内容都是结点（标签、属性、注解等），DOM中..
JavaScript知识点整理（十三）- DOM -（2）操作元素
JHY97的博客
02-22 785
JavaScript的DOM操作可以改变页面内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。 一、改变元素内容 element.innerText 从其实位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉 element.innerHTML 起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行 案例练习 - innerText - 点击按钮获取当前时间 <button>显示当前系统时间</bu.
javascript网页特效——DOM操作
giligili~eye giligili~mind
09-10 471
实例一：根据name获取网页中的所有复选框<script type="text/javascript"> //获取多个DOM function getDomsByName(){ //获取的DOMs var doms = document.getElementsByName("myName"
JS创建html元素
jhhuang4836的专栏
12-04 233
JavaScript HTML DOM 元素（节点） DOM 事件 JS 对象 添加和删除节点（HTML 元素）。 创建新的 HTML 元素 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。 实例 &lt;div id="div1"&gt; &lt;p id="p1"&gt;这是一个段落&lt;/...
JavaScript学习笔记之DOM基础操作实例小结
12-08
本文实例讲述了JavaScript DOM基础操作。分享给大家供大家参考，具体如下： 一、子节点 1、元素节点、文本节点 实例01 html <body> 文本节点1 <li></li> 文本节点2<li></li> 文本节点3<li></li> 文本节点4...
JavaScript学习笔记之DOM操作实例分析
12-12
本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考，具体如下： 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建对象...
javascript 学习笔记（一）DOM基本操作
01-21
html部分代码： 当点击show按钮时，触发showValue函数，将input value的值动态添加到id=”text”的元素节点中！ 代码如下: <p> <...</span> </p> ”text”></p> javascript 部分代码： 页面加载时，使inpu
JavaScript学习文档
09-16
JavaScript语言参考 JavaScript教程 Scripting 运行时的参考 filesystemobject对象教程
javascript DOM Html 对象参考手册
09-27
javascript DOM Html 对象对象参考手册
JavaScript学习笔记十四 —— 操作DOM对象
影龙武的博客qq_43594119
05-17 370
DOM：文档对象模型 ## 核心 浏览器网页就是一个DOM树形结构！ * 更新：更新DOM节点 * 遍历dom节点：得到DOM节点 * 删除：删除DOM节点 * 添加：添加一个新的节点 要操作一个dom节点，就必须要获得这个dom节点 ## 获得dom节点 ```javascript <div id="father"> <h1>标题一</h1> <p id="p1">p1</p> <p class="p2">p2</p> </div> <script> //对应cs
JavaScript中的DOM操作
虎康的博客
09-21 519
DOM基础 获取节点 节点类型 元素节点 属性节点 文本节点 网页效果：操作元素节点、属性节点、文本节点，以及修改元素的样式 1、document.getElementsById返回值是一个DOM节点 let btns = document.getElementsById("title"); 2、document.getElementsByClassName返回值是一个DOM节点的集合 let btns = document.getElementsByClassName("btn"); 3、docume
项目中用javascript操作DOM遇到的问题
wangyinbin的专栏
04-05 724
调用项目中已有的js，将表格的的样式设置成间隔行显示不同的颜色。 如下图：   代码如下：   名称：${freeEval.creater_org} AAA: ${freeEval.managerOrganization } BB: ${fre
JavaScript学习笔记（二）--JS HTML DOM
runnerxin的博客
03-20 228
HTML DOM通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。 [1]JavaScript 能够改变页面中的所有 HTML 元素。 [2]JavaScript 能够改变页面中的所有 HTML 属性。 [3]JavaScript 能够改变页面中的所有 CSS 样式。 [4]
JavaScript如何利用HTML DOM进行文档操作
li286487166的博客
03-27 801
一、DOM简介 DOM是W3C制定的用于访问诸如XML和XHTML等结构化文档的标准。 W3C文档对象模型(DOM)是一个使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口 核心DOM：用于任何结构化文档的标准模型 XML DOM：用于XML文档的标准模型。是用于获取、更改、添加或删除XML元素的标准。 HTML DO
javascript(15)文档对象模型DOM
半个脑子的博客
04-15 77
DOM：Document Object Model文档对象模型 文档：文档表示的就是整个HTML网页文档 对象：对象表示将网页中的每一个部分转换成为了一个对象 模型：使用模型来表示对象之间的关系，这样方便我们获取对象 节点： 节点Node，是构成我们网页的最基本的组成部分，网页中的每一个部分都可以成为是一个节点 比如：html标签、属性、文本 节点基础分类： 文档节点：整个html文档 元素节点：...
js学习手册十四 文档元素的创建、删除、插入、替换以及下拉列表的级联
zcy_inspire的博客
06-15 373
文档元素即节点，也为JS中的对象 创建节点 document.createElement(“tagName”)用来创建一个新的Element节点（即文档元素），返回值是新创建的节点，tagName是标签的名字，比如a、p、img等，需要注意的是它不区分大小写。 比如创建一个新的超链接节点： var newA = document.createElement("a");//创建超链接节点 newA.src = "https://www.educoder.net";//设置超链接的目的地址 答案 <!-
js DOM学习笔记11
最新发布
08-08
JavaScript DOM 学习笔记11： 在 JavaScript 中，DOM（文档对象模型）是 HTML 和 XML 文档的编程接口。通过 DOM，开发者可以轻松地访问和操作文档的各个部分，包括元素、属性和内容。 在 DOM 中，每个文档都有一个...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值