JavaScript学习(四)认识DOM

2023-11-09

DOM简介

DOM(Document Object Model),文档对象模型,定义了访问和处理html文档的标准方法。

DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

通过ID获取元素

html中标签的id属性是唯一的,通过id可以找到唯一与之对应的标签,对标签进行操作。

语法:

document.getElementById("id");

例:通过document.getElementById获取id为con的标签,并输出结果。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document.getElementById</title>
</head>
<body>
<p id="con">JavaScript</p>
<script type="text/javascript">
  var mychar=document.getElementById("con");
  document.write("结果:"+mychar); //输出获取的P标签。 
</script>
</body>
</html>

innerHTML 属性

  • innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

Object.innerHTML

例:获取id为con的标签,并输出内容,修改内容后重新输出

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>innerHTML</title>
</head>
<body>
<h2 id="con">javascript</H2>
<p> JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。</p>
<script type="text/javascript">
  var mychar=document.getElementById("con");
  document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
  mychar.innerHTML="Hello World!";
  document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
</script>
</body>
</html>

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

在这里插入图片描述

语法:

Object.style.property=new style;

例:获取id为pcon的标签对象,改变其颜色、字体大小、背景色等。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>style样式</title>
</head>
<body>
  <h2 id="con">I love JavaScript</H2>
  <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  <script type="text/javascript">
    var mychar= document.getElementById("con");
    mychar.style.color="red";
    mychar.style.backgroundColor="gray";
    mychar.style.width="300";
  </script>
</body>
</html>

display属性

语法:

Object.style.display = value

value取值:

  • none 元素不会被显示,即隐藏
  • block 显示
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript学习(四)认识DOM 的相关文章

随机推荐

  • 从LXMERT到VLMO:多模态预训练模型的演变史

    作者 吉雅太 单位 清华大学 研究方向 多模态研究 自从 2018 年 BERT 在 NLP 领域声名鹊起 通过预训练在 n 多 NLP 任务中刷榜 成功发掘出了 transformer 的潜力 众多研究者就看到了多模态发展的新的机会 使用
  • C/C++ 打印三角形

    打印三角形是C语言的经典例题 首先我们先看看效果图 一 直角三角形 ok 现在从最简单的打印直角三角形开始 通过以上效果图你会发现规律 行数 的个数 1 1 2 2 3 3 4 4 5 5 n n 根据以上规律写出以下代码 include
  • 查缺补漏:集和与非平凡属性

    查缺补漏 集和与非平凡属性 前面的习题和知识点补充 Conjunctive normal form CNF 是布尔逻辑的一种方法 它将公式表示为带有AND或or的子句的连词 由连词or AND连接的每个子句必须是文字或包含析取or运算符 子
  • selenium-XPATH定位

    XPATH定位 相对路径 相对定位是两个杠表示 相对路径易维护 例 div 1 div 2 绝对路径 绝对定位用一个杠 绝对路径一个层级变化所有空间都有变化 例 html body div 1 section section main di
  • 简易RPC框架-SPI

    案例 我们所熟悉的jbdc是一种用于执行SQL语句的Java API 可以为多种关系数据库提供统一访问 提供了一种基准 据此可以构建更高级的工具和接口 如上图所示 任意的一个数据库厂商只要去实现jdbc的接口 就可以轻松的对接jbdc从而为
  • csharp: read excel using Aspose.Cells

  • grunt html引入,javascript – 使用grunt自动将本地* .js和* .css文件引用到index.html中

    我打算开发一个angularJS客户端 我将使用角度组件 这将导致多个 js css文件 为了避免手动引用每个新添加的js css文件 我打算使用grunt include source任务 问题是 在配置Gruntfile js后 gru
  • postgresql:自动生成uuid列

    postgresql 有一个uuid数据类型 选择这个类型就可以在每条记录新增时自动生成uuid值 但pgsql默认没有安装uuid自动生成功能 需要手动执行命令启用该功能 方法如下 1 执行sql语句 create extension u
  • 【开发工具】SVN断网续传、续下解决办法

    支持原创 欢迎关注原文地址 http www china10s com blog p 406 当你处在弱网环境下 经常断网 断线 这时候下载SVN代码是个难题 网上搜到的答案也是众说纷纭 那么我就说一下我的解决办法吧 在你确认断网导致SVN
  • 华为OD机试真题- 分割数组的最大差值-2023年OD统一考试(B卷)

    题目描述 给定一个由若干整数组成的数组nums 可以在数组内的任意位置进行分割 将该数组分割成两个非空子数组 即左数组和右数组 分别对子数组求和得到两个值 计算这两个值的差值 请输出所有分割方案中 差值最大的值 输入描述 第一行输入数组中元
  • PAD2Reg和Reg2PAD的时序分析

    PAD2Reg 1 Input delay约束从SOC PAD输入到第一级FF的data path 2 Input delay约束中的 clock指的是launch clock 它一般存在于Device中 对SOC来说是个虚拟时钟 如果发射
  • 从生产到测试,多张表但有相同的业务主键-存储过程的使用

    PL SQL Developer Test script 3 0 32 Created on 2019 4 12 by ADMINISTRATOR declare Local variables here sqh0 varchar2 20
  • CMS V5.7 SP2漏洞复现(CVE-2018-20129)

    0x00 前置 1 CVE中对该漏洞的描述 在 DedeCMS V5 7 SP2 中发现了一个问题 uploads include dialog select images post php 允许远程攻击者通过双扩展名和修改的 php 子字
  • Nodejs学习之Path模块

    一 介绍 Node js path模块提供了一些用于处理文件路径的方法 引入Path模块 var path require path 二 函数介绍 2 1 path normalize 格式化路径 console log normaliza
  • 常见数据结构

    一 数据结构 1 线性 数组 按顺序存储在内存中 每一个节点都有下标 查询快 数组一般用来存储相同类型的数据 可通过数组名和下标进行数据的访问和更新 数组中元素的存储是按照先后顺序进行的 同时在内存中也是按照这个顺序进行连续存放 数组相邻元
  • rtabmap安装与使用

    参考 ubuntu18 04安装Rtabmap 具体详细步骤 教你手把手运行基于ZED的rtab map ZED入门 利用RTAB MAP做SLAM ubuntu16 04 ROS Kinetic rtabmap 源码 非ros版本 安装运
  • freeswitch四、局域网支持

    在局域网内进行的测试 需要进行ACL的配置 conf autoload configs acl conf xml 中 加入下面配置
  • 搭建属于自己的云测试平台

    最近老大给了一个资料让研究 需要搭建一个平台 把公司所有的测试机集中在一起管理 谁需要用的时候 直接在web页面使用 省去了到处找别人借手机等问题 下面先介绍以下这个平台 STF Smartphone Test Farm 是一个Web应用程
  • python爬虫案例(二):大学排名

    小菜鸟从一个个案例来练习爬虫 心路是曲折的 555 在爬虫案例 一 中 是用urllib进行的 本案例中应用的是requests库 它会比urllib更加方便 requests是python实现的最简单易用的HTTP库 建议爬虫使用requ
  • JavaScript学习(四)认识DOM

    文章目录 DOM简介 通过ID获取元素 innerHTML 属性 改变 HTML 样式 display属性 DOM简介 DOM Document Object Model 文档对象模型 定义了访问和处理html文档的标准方法 DOM 将HT