Educoder JavaScript：HTML DOM——文档元素的操作

最新推荐文章于 2020-12-27 23:21:27 发布
最新推荐文章于 2020-12-27 23:21:27 发布
阅读量2.9k 收藏 6
点赞数 7
分类专栏： Educoder实训 文章标签： javascript css html css3 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Junds0/article/details/106469523
版权

第1关：通过id获取文档元素

获取本文档中id为a1的文档元素，要求用id获取文档元素；将获取的元素赋值给变量myElement

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>get element by id</
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Ssaty.
关注
  • 7
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
订阅专栏
Educoder JavaScript：HTML DOM——文档元素的操作（二）
Junds0的博客
06-04 3093
第1关：创建节点 创建一个form节点，然后赋值给变量newNode，设置节点的id值为myForm，method值为post <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <p></p> <script> <!-- 请在此处编写代码 -->
JavaScript学习手册十三：HTML DOM——文档元素的操作（一)
qq_45823118的博客
04-24 9535
HTML DOM——文档元素的操作1、通过id获取文档元素任务描述相关知识什么是DOM文档元素节点树通过id获取文档元素代码文件2、通过类名获取文档元素任务描述相关知识通过类名获取文档元素代码文件3、通过标签名获取文档元素任务描述相关知识通过标签名获取文档元素获取标签内部的子元素代码文件4、html5中获取元素的方法一任务描述相关知识css选择器querySelector的用法代码文件5、html5中获取元素的方法二任务描述相关知识querySelectorAll的用法代码文件6、节点树上的操作任务描述相关
EduCoder_web实训作业--JS简介
qq_45520915的博客
12-27 839
第一关 <!DOCTYPE html> <html> <head> <!-- 请在此处编写代码 --> <!---------Begin---------> <script> window.alert("Hello,JavaScript!"); </script> <!---------End---------> </head> <body
Python数据结构与算法——第4-2课时——栈的实现——day73
asd1103810477的博客
09-19 143
Python数据结构与算法：第4-2课时：栈的实现 栈结构实现 栈 可以用顺序表实现，也可以用链表实现。 这里就用顺序表（序列）实现栈。 栈的操作 • Stack() 创建一个新的空栈 • push(item) 添加一个新的元素item到栈顶（压栈、入栈） • pop() 弹出栈顶元素 • peek() 返回栈顶元素 • is_empty() 判断栈是否为空 • size() 返回栈的元素个数 以上这些实现，全部用列表的函数来实现。 实现代码： class Stack(object): d
javascript DOM Html 对象参考手册
09-27
javascript DOM Html 对象对象参考手册
My SQL-day01-Jyunit、反射、注解
xingxing_LM的博客
12-26 226
Junit的用法 Junit单元测试： 测试分类： 1. 黑盒测试：不需要写代码，给输入值，看程序是否能够输出期望的值。 2. 白盒测试：需要写代码的。关注程序具体的执行流程。 Junit使用：白盒测试 步骤： 1. 定义一个测试类(测试用例) 建议： 测试类名：被测试的类名Test CalculatorTest 包名：xxx.xxx.xx.test test 2. 定义测试方法：可以独立运行 建议： * 方法名：test测试的方法名 testAdd
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十四：HTML DOM-文档元素的操作（二）
01-20
这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素，进一步提升网页动态性和交互性。 DOM是HTML和XML文档的一种结构化表示，它将网页内容...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十三：HTML DOM-文档元素的操作（一）
01-20
总的来说，本手册将为你提供一个关于HTML DOM元素操作的基础教程，帮助你掌握基本的元素选取、属性操作、元素添加与删除以及事件处理。通过学习，你将能够运用JavaScript实现对HTML页面的动态控制，提升Web应用的...
JavaScript利用HTML DOM进行文档操作的方法
10-22
DOM是W3C制定的用于访问诸如XML和XHTML等结构化文档的标准。通过本文给大家介绍JavaScript利用HTML DOM进行文档操作的方法，需要的朋友参考下吧
JavaScript dom操作 dom元素查询 示例代码
最新发布
06-27
JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码JavaScript dom操作 dom元素查询 示例代码...
javascript完全学习手册2 源码
04-12
目录 第1篇 JavaScript基础篇 第1章 JavaScript简介 1．1 JavaScript概述 1．1．1 什么是JavaScript 1．1．2 JavaScfipt的基本特点 1．1．3 常用的Web开发语言 1．2 JavaScript的应用 1．2．1 客户端应用 1．2．2 服务器端应用 1．3 在web页面中使用JavaScript 1．3．1 HTML的基本结构 1．3．2 在HTML中嵌入JavaScript 1．3．3 链接JavaScript文件 1．4 编写JavaScript的工具 1．4．1 使用纯文本编辑器 1．4．2 使用专业化脚本编辑工具 1．4．3 使用Microsoft脚本编辑器 第2章 JavaScript编程基础 2．1 基础语法 2．1．1 数据类型 2．1．2 变量和常量 2．1．3 表达式 2．1．4 运算符 2．2 流程控制 2．2．1 条件语句r 2．2．2 循环语句 2．2．3 其他语句 2．3 使用对话框 2．3．1 警告对话框 2．3．2 确认对话框 2．3．3 提示对话框 第2篇 JavaScript内置对象篇 第3章 JavaScript内置对象 3．1 JavaScript对象概述 3．1．1 对象的概念 3．1．2 使用JavaScript对象基础知识 3．2 Array对象 3．2．1 创建Array对象 3．2．2 Array对象属性 3．2．3 Array对象方法 3．3 String对象 3．3．1 创建String对象 3．3．2 String对象属性 3．3．3 String对象方法 3．4 Math对象 3．5 Date对象 3．5．1 Date对象方法 3．5．2 使用Date对象 3．6 自定义对象 第4章 JavaScript常用对象 4．1 Document对象 4．1．1 Document对象概述 4．1．2 使用Document对象 4．2 Form对象及其元素 4．2．1 Form对象概述 4．2．2 表单元素 4．2．3 表单元素属性和事件 4．2．4 表单验证 4．3 Anchor与Link对象 4．3．1 Anchor对象 4．3．2 Link对象 4．4 Image对象 4．4．1 图像翻转 4．4．2 图像载入 第5章 JavaScnpt其他常用窗口对象 5．1 Window对象 5．1．1 常用属性和方法 5．1．2 多窗口控制 5．2 Screen对象 5．3 Navigator对象 5．4 Location对象 5．4．1 常用属性和方法 5．4．2 Location对象的应用实例 5．5 History对象 5．5．1 常用属性和方法 5．5．2 History对象的应用实例 5．6 Frame对象 5．6．1 Frame对象概述 5．6．2 常用属性 5．6．3 Frame对象的应用实例 第6章 DoM对象 6．1 DOM概述 6．1．1 DOM简介 6．1．2 DOM与HTML文档 6．2 DOM对象 6．2．1 DOM基本接口 6．2．2 DOM基本对象 6．3 使用DOM 6．3．1 DOM基础 6．3．2 Node和NodeList接口 6．3．3 Element接口 6．3．4 Text接口和Attr接口 6．4 操作HTML文档 6．4．1 访问元素 6．4．．2 添加节点 6．4．3 删除节点 6．4．4 对属性进行操作 第3篇 JavaScript高级编程篇 第7章 正则表达式 7．1 正则表达式及其作用 7．2 正则表达式参考语法 7．2．1 限定符 7．2．2 选择匹配符 7．2．3 分组组合和反向引用符 7．2．4 特殊字符 7．2．5 字符匹配符 7．2．6 定位符 7．2．7 原义字符 7．3 RegExp对象 7．3．1 创建RegExp对象实例的两种方式 7．3．2 RegExp对象的属性 7．3．3 RegExp对象的方法 7．4 String对象中与正则表达式有关的方法 第8章 高级DoM技术 8．1 CSS样式 8．1．1 CSS语法 8．1．2 CSS属性 8．2 样式控制 8．2．1 Style对象 8．2．2 使用CSS属性 8．2．3 自定义鼠标提示 8．2．4 可折叠区域 8．3 StyleSheet对象 8．3．1 StyleSheet对象的属性 8．3．2 StyleSheet对象的方法 8．4 修改内容 8．5 实例应用 8．5．1 制作动态新闻框 8．5．2 显示当前日期 8．5．3 进度条控制滚动图片 8．5．4 百叶窗效果 8．5．5 更改表格间隔背景色 第9章 JavaScript中的XML 9．1 XML语言 9．1．1 XML概述 9．1．2 XML文档结构 9．1．3 XML标记 9．1．4 XML文档元素 9．1．5 XML属性 9．1．6 XML命名空间 9．2 XMLDOM 9．2．1 通用接口 9．2．2 IE中的XMLDOM支持 9．2．3 Mozilla中XMLDOM支持 9．2．4 XMLDOM实例 9．3 XPath 9．3．1 XPath概述 9．3．2 IE中的XPath支持 9．3．3 Mozilla中的XPath支持 9．4 XSLT 9．4．1 XSLT概述 9．4．2 IE中的XSLT支持 9．4．3 MozilIa中XSLT支持 9．5 数据岛技术 第10章 JavaScript事件处理 10．1 事件概述 10．1．1 事件简介 10．1．2 指定事件 10．2 原始事件模型 10．2．1 事件类型 10．2．2 使用事件返回值 10．2．3 使用事件this关键字 10．2．4 使用属性处理事件 10．2．5 使用JavaScript处理事件 10．3 标准事件模型 10．3．1 事件传播 10．3．2 注册事件处理程序 10．3．3 设置对象的事件处理程序 10．3．4 事件的模块和类型 10．3．5 Event接口和对象 10．4 IE事件模型 10．4．1 IEEvent对象 10．4．2 IE的事件传播 10．5 常用事件 10．5．1 鼠标事件 10．5．2 键盘事件 10．5．3 表单事件 10．5．4 编辑事件 10．5．5 页面事件 第11章 使用Cookie和文件 11．1 Cookie 11．1．1 Cookie概述 11．1．2 Cookie属性 11．1．3 创建Cookie 11．1．4 读取Cookie 11．1．5 删除Cookie 11．1．6 在客户机设置Cookie 11．1．7 保存用户登录状态 11．2 文件处理 11．2．1 FileSystemObjeet对象 11．2．2 Drive对象 11．2．3 Folder对象 11．2．4 File对象 11．2．5 资源管理器 第12章 JavaScript与Ajax 12．1 Ajax概述 12．1．1 Ajax运行机制 12．1．2 A1ax技术优势 12．2 Ajax核心技术 12．2．1 JavaSeript 12．2．2 DOM 12．2．3 XML 12．2．4 XMLHtlpRequest 12．3 使用Ajax 12．3．1 创建XMLHttp,Request对象 12．3．2 获取XMLHttp,Request对象的信息 12．3．3 向服务器发送请求 12．3．4 处理服务器响应 12．3．5 用户注册实例 12．3．6 处理XML请求 12．3．7 动态列表 第13章 JavaScript安全与异常处理 13．1 JavaScript安全 13．1．1 域策略 13．1．2 IntemetExplorer安全区域 13．2 IE浏览器内建的错误报告 13．3 异常处理 13．3．1 异常类型 13．3．2 触发onError事件处理异常 13．3．3 使用trycatch语句处理异常 13．3．4 Error对象 13．3．5 使用throw语句 13．4 JavaScript调试技法 13．4．1 使用alen()语句 13．4．2 使用write()语句 13．4．3 抛出自定义异常消息 第4篇 JaVflscript特效应用 第14章 JavaScript网页特效 14．1 文字特效 14．1．1 文字向上不间断无缝滚动 14．1 12灼热的文字(IE) 14．1．3 标题栏文字循环向左移动 14．1．4 各种形式输出文字 14．1．5 跑马灯式说明文字 14．1．6 跳动的文字 14．2 图片特效 14．2．1 线性幻灯片 14．2．2 非线性幻灯片 14．2．3 展示翻页效果 14．2．4 展示缩略图新闻效果 14．2．5 图片滑动效果 14．2．6 三维相册 14．3 时间特效 14．3．1 时钟提示自动关闭 14．3．2 日历生成器 14．4 窗口特效 14．4．1 窗口拖动 14．4．2 图层受标签控制显示 14．5 鼠标特效 14．5．1 鼠标方向提示 14．5．2 鼠标控制页面上下移动 14．6 菜单特效 14．6．1 树状菜单 14．6．2 折叠菜单 14．6．3 滑动菜单 14．6．4 右键菜单 ……
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
JavaScript学习记录——Dom操作就是html中元素操作的理解
YENTERTAINR的博客
10-24 359
1. JavaScript初始: 1.1浏览器执行JS简介： ···浏览器分成两部分：渲染引擎呵JS引擎 渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit JS引擎：也称为JS解释器。用来读取网页中的Javascript代码，对其处理后运行。比如chrome浏览器的v8 浏览器本身不会执行JS代码，而是通过内置的JavaScr...
javascript文档_JavaScript从零开始——DOM操作（1）
weixin_39914825的博客
11-30 115
OK，终于到这一部分了，其实这是JavaScript的最初目的，就是控制网页元素，而为了能够真正的进行交互，JavaScript就需要使用这套接口：Document Object Model —— DOM；由于这一部分涉及到一些HTML的内容，可能需要对HTML有基本的了解才行，我后面可能会考虑重新把HTML5也做一个专栏出来，这样可以相互参考了（当然，w3school这类的在线教程站点，也是好的...
Javascript学习笔记（12） --DOM对象
weixin_39209728的博客
06-14 252
一DOM Document Object Model (文档对象模型) 二、获取节点 1》document.getElementById() 选取有id的节点 2》document.getElementsByTagName() 选取节点名称 3》document.getElementsByClassName() 获取有class 节点的 三、Dom树 日常能见到的树： 树的部分：树枝 树干 ...
Educoder JS函数
Junds0的博客
05-26 3387
第1关：用函数语句定义函数 (1)用函数语句定义一个函数 定义一个名字为mainJs()的函数；该函数有两个参数，均为字符串类型；函数的功能是返回这两个参数的拼接结果； function mainJs(a,b){ return a+b; } 第2关：用表达式定义函数 (2)定义一个匿名函数，将它赋值给变量myFunc；该函数实现求一个三位数的各个位上的数字之和，比如123各个位上的数字分别为1、2和3，和是6 function mainJs(a) { a = parseInt(a); //请在此处编写代码
JavaScript——DOM简单入门
Melonico的博客
06-24 149
DOM简单入门 ○ 功能 控制html文档的内容 ○ 获取元素对象 通过标签(元素)的id获取页面标签(元素)对象 Element document.getElementById(id); ○ 示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>获取元素对象</title> </head> <body>
javascript学习手册十三：html dom——文档元素的操作（一）
06-28
### 回答1： HTML DOM（文档对象模型）是一种编程接口，允许程序访问和操作HTML文档中的元素。使用JavaScript来操作HTML DOM可以让网页具有交互性和动态性。 在JavaScript中，可以使用getElementById，getElementsByTagName和getElementsByClassName等方法来获取页面上的元素。例如，通过getElementById("myId")可以获取id为"myId"的元素。 操作元素的属性和内容也很简单，可以使用如下方法： - 修改元素的属性：element.attribute = new value - 访问元素的属性：element.attribute - 修改元素的内容：element.innerHTML = new content - 访问元素的内容：element.innerHTML 通过操作HTML DOM，可以实现各种交互效果和动态效果。例如，可以在点击按钮时显示或隐藏元素，或在输入框中输入文本时实时更新页面内容等。 ### 回答2： HTML DOM是JavaScript操作网页中元素和属性的主要方式之一。在HTML DOM中，文档元素是指HTML页面中所有元素的根节点。文档元素的操作包括获取元素、创建元素、删除元素、修改元素属性等。 获取元素是HTML DOM操作的重要一环。在JavaScript中，可以使用getElementById()、getElementsByTagName()、getElementsByClassName()等方法获得HTML页面中的元素。其中getElementById()方法可以通过元素的ID获取该元素的引用，常用于根据ID修改元素的属性或内容。而getElementsByTagName()方法可以通过标签名获取HTML页面中所有该标签的元素，例如获取所有的h1元素，常用于对整个页面的控制。getElementsByClassName()方法可以通过class属性获取HTML页面中所有具有该class的元素。 创建元素是向HTML页面中添加元素的重要方式。可以使用createElement()方法创建一个新元素，然后使用appendChild()方法将其添加到现有元素中。例如，创建一个新的p元素，并将其添加到body元素中可以使用以下代码： var newPara = document.createElement("p"); var textNode = document.createTextNode("This is a new paragraph."); newPara.appendChild(textNode); document.body.appendChild(newPara); 删除元素也是HTML DOM中的一个常用操作。可以使用removeChild()方法删除现有元素，例如： var parent = document.getElementById("parent-id"); var child = document.getElementById("child-id"); parent.removeChild(child); 修改元素属性是HTML DOM中的另一个核心操作。可以使用setAttribute()方法修改元素的属性值，例如： var element = document.getElementById("my-id"); element.setAttribute("class", "new-class"); 可以通过HTML DOM操作文档元素，实现对页面元素和属性的各种操作。掌握HTML DOM的知识，可以更好地控制和管理HTML页面。 ### 回答3： HTML DOM是JavaScript操作网页元素的主要方式之一，它的核心在于文档对象模型（DOM，Document Object Model），需要熟悉DOM才能灵活操作网页元素。文档元素是HTML页面中的根元素，它是其他所有元素的祖先元素，也是HTML DOM操作的基础。 一、获取元素 在JavaScript中，我们可以通过各种方式来获取文档元素，例如getElementById()、getElementsByTagName()、getElementsByClassName()等。其中，通过id、标签名和类名获取元素是最常用的三种方法。 1. getElementById() 此方法用于获取具有指定id属性的元素，其语法为document.getElementById(id)。id属性在整个HTML文档中应该是唯一的。 示例：获取id为“demo”的元素 ``` var demo = document.getElementById("demo”); ``` 2. getElementsByTagName() 此方法用于获取具有指定标签名的元素，其语法为document.getElementsByTagName(tagname)。 示例：获取所有p元素 ``` var pList = document.getElementsByTagName("p"); ``` 3. getElementsByClassName() 此方法用于获取具有指定类名的元素，其语法为document.getElementsByClassName(classname)。 示例：获取类名为“red”的元素 ``` var redList = document.getElementsByClassName("red"); ``` 二、改变元素 有很多种方法可以改变文档元素的属性和样式，下面列举一些常见的方法： 1. 修改元素的文本内容 我们可以通过innerHTML属性和innerText属性来修改元素的文本内容。 innerHTML属性用于改变元素的HTML内容，其语法为element.innerHTML=new html content； innerText属性用于改变元素的纯文本内容，其语法为element.innerText=new text content； 2. 修改元素的样式 我们可以通过style属性来修改元素的样式，其中style属性包含了元素的所有样式属性。 示例：将id为“demo”的元素背景色改为红色 ``` document.getElementById("demo").style.backgroundColor = "red"; ``` 3. 创建新元素 我们可以使用document.createElement()方法来创建新元素，并通过appendChild()方法将其加入到指定的元素内。 示例：创建一个新的p元素 ``` var newP = document.createElement("p"); ``` 4. 删除元素 我们可以使用parentNode.removeChild()方法来删除指定的元素。 示例：删除id为“demo”的元素 ``` var demo = document.getElementById("demo"); demo.parentNode.removeChild(demo); ``` 三、总结 通过这篇文章的学习，我们了解了HTML DOM的基础知识和基本操作方法，例如获取元素、改变元素的属性和样式以及创建和删除元素等。掌握这些操作方法可以帮助我们更好地操作网页元素，从而实现丰富多彩的网页效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Ssaty.

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

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

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

打赏作者

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

抵扣说明：

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

余额充值